У меня с ноутом траблы, так что пока без контента :(

#js #фишки

Нихау чувачки, я снова тут!

Сегодня хочу вам показать крутые либы для ваших проектов, которые упростят жизнь.

Начнём с реакта, наебал, со свайпера.

Swiper.js

Может некоторые догадались что он делает? Нет? Это либа, позволяющая вам делать крутые слайдеры пиздец как просто!

В документации всё очень понятно расписано, и даже есть дохуя и больше демо версий слайдеров, вам нужно всего-лишь скопировать и вставить в свой проект.

Anime.js

Нет, нет, эта либа не добавит в ваш проект аниме, она добавит крутые анимации! Не, ну, а чо делать, если заказчик хочет ебанутую анимацию, а пилить самому в лом? Тут хуяк,хуяк и в продакшен😄

Three.js

А вы когда-нибудь видели 3д модели на сайте? Да? Вам было интересно, как они реализованы? ДА? - это хорошо, ведь сейчас ты узнал, что для таких задач была создана либа three.js. Благодаря ей можно ебошить такие 3д модели, что любой заказчик ахуеет(конечно же, зависит всё от ваших рук), но чтобы там что-то сделать – нужно сперва охуеть, а потом научиться там хотя бы сферу отрисовывать.

Draggable.js

Я вот недавно делал драгндроп на сайте, и мне очень хотелось заюзнуть какую-то либу, для пиздатого драгндропа, дабы не ебаться с ним в соло, но к сожалению либу draggable.js я нашёл слишком поздно :с
Да, если вы хотите сделать крутой драгндроп, то юзайте эту либу, вы точно сохраните себе пару нервных клеток.

Select2

Вот видите вы в макете крутой select>option и хотите повторить, идёте в цсс, усердно хуярите код, а в итоге видите нихуя. Да, стилизовать опшин у селекта нельзя нативным цсс(или можно, но много дрочки), но при помощи select2 вы сможете легко заебошить любой select>option :3

Воот теперь ваша жизнь стала легче, ибо в вашу жизнь добавили библиотеки джса :3

Надеюсь вы узнали тут для себя что-то новое, а ссылки на либы я оставлю в ниже, всем хорошего дня ^_^

https://swiperjs.com/
https://animejs.com/

https://threejs.org/

https://shopify.github.io/draggable/

https://select2.org/

#js #статья

Всем шалом!

Продолжу тему библиотек и сегодня мы поговорим про гейм-библиотеки.

Наш топ открывает PixiJS.

Это ХТМЛ движок, благодаря которому можно создавать 2д игрушки.

В доке есть много готовых решений, просто бери и юзай!

CraftyJS

Тоже крутая либа для созданий 2д игрушек, но не такая крутая как пикси.

MatterJS

MatterJS - это физический 2Д движок.

Ну то есть да, нужно сделать какую-то физическую ебалу? Юзайте эту либу, там так же много готовых решений.

PhaserJS

Благодаря ей тоже можно создавать крутые игрушки, а на сайте можно найти множество работ других ребят.

BabylonJS

Так, хватит говорить про 2Д игры, настало время 3Д игр!

BabylonJS даёт нам возможность пилить невероятно крутые 3Д игры(и 2Д тоже). И да, BabylonJS является одним из лидеров WebGL-based движков, так что я думаю вы понимаете, насколько это крутая либа!

А вы создавали когда-то игры на сайте?

Теперь у вас появилась возможность создавать 2Д/3Д игры!

Надеюсь вы узнали тут для себя что-то новое, а ссылки на либы я оставлю в ниже, всем хорошего дня ^_^

https://www.pixijs.com/
https://craftyjs.com/
https://brm.io/matter-js/
https://phaser.io/
https://www.babylonjs.com/

#js #статья

Всем привет!

Вчера я проводил опрос на тему "знаете ли вы как добавлять элементы в массив без метода push? " - на что 6 ответили что знают, а 7 нет.

Ну что же, тогда давайте поговорим о том, как это делается!

Если вы подумали, что я говорил про метод unshift - вы ошибались😀

Сегодня я покажу метод, который всё чаще и чаще начинает набирать обороты, а именно - через копирование.

Создадим массив:

let arr = ["Dima", "Alex", "Alexandr", "Petr"];

Ну ладно, изначально  покажу через обычные методы, вдруг кто не знал. Сегодняшним нашим подопытным будет Олег xD

PUSH()

arr.push("Oleg"); - Да, всё.

push добавляет элемент в КОНЕЦ массива, важно это помнить.

UNSHIFT()

arr.unshift("Oleg"); - добавляет в НАЧАЛО массива.

А теперь про третий, тот самый загадочный метод..

let arrCopy = [...arr, "Oleg"];

Собственно, что за нахуй сейчас произошло?

Мы создали новый массив, в него засунули копию старого массива и добавили новый элемент.

...arr - создаёт копию нашего массива, затем, после запятой мы добавляем то что нам надо.

А что если  нужно добавить элемент в начало массива? А ну, напрягите мозг.

let arrCopy = ["Oleg",  ...arr]; 

Ну как вам? Если вы подумали, что данный метод параша, то вы ошибаетесь, он очень сильно набирает обороты и делает код более красивым и профессиональным!

А на этом всё, желаю вам продуктивного и хорошего дня!

На канале уже 50 человек!

Поздравляю всех с этим маленьким праздником!!

Спасибо каждому, дальше - больше(надеюсь)!

Так же не забывайте, что у канала есть чат, где вы можете пообщаться на различные темы и позадавать всякие вопросы, жду всех!

https://news.1rj.ru/str/sharknessITchat

#js #статья

Доброго времени суток!

Сорян что задержался со статьёй, неожиданно навалилась работа D:

Чтобы не было такого, сегодня я расскажу вам про классы.

Начнём с того, что классы - это объекты.., а значит, здесь есть this.

Та и вообще, это зачатки ООП, но сегодня ( и не завтра ) не о нём.

Классы привыкли называть с большой буквы:

class Animal{...};

Если не хотите брать в рот хуй моржа, пишите название класса с большой буквы.

Чтобы наш класс заработал, нужно его объявить таким образом:

const animal = new Animal();

Теперь ваш класс отработает как надо.

Сейчас поговорим о внутренностях класса.

constructor

class Animal {
constructor() { ... }
}

Что делает конструктор? - он инициализирует ваши данные.

Допустим вы передаёте как аргумент слона.

class Animal {
constructor(animal) {
this.animal = animal; // то есть мы говорим, что под "this.name" мы имеет ввиду наш аргумент animal.
}
}

const animal = new Animal("Слон");

Ну и да, дальше нужно this.animal, а не animal, ибо это классы, и они требуют к себе this.

Хорошо, теперь идём дальше - методы.

class Animal {
constructor(animal) {
this.animal = animal;
}
sayHello() {
console.log("Hello, ", this.animal, "!");
}
}

let animal = new Animal("Slon");
animal.sayHello();

Теперь поговорим о наследовании.

class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name, " издает звук ");
}
}

class Dog extends Animal {
constructor(name) {
super(name); // вызывает конструктор super класса и передает параметр name
}

speak() {
super.speak()
}
}

let animalChild = new Dog('Jake');
animalChild.speak(); // Jake издает звук

То есть, мы можем создавать дочерние классы, и при помощи super использовать методы родителя - применений уйма.

На этом базовые вещи классов заканчиваются. А что, есть что-то ещё? Да, допустим статические методы, приватные поля - о них мы если и поговорим, то точно не сегодня, ибо статья посвящается большей части новичкам.

На этом, желаю вам продуктивной работы!

#js #статья

Всем привет и сегодня мы поговорим про циклы в джс.

Думаю, что такое цикл, объяснять не надо.

for();

Начнём с цикла for.

Синтаксис:

for( let i = 0; i < 5; i++) {
console.log("Like my post");
}

// Like my post выведется 5 раз.

Можно так же и избавляться от частей цикла.

let i = 0;
for( ; i < 5; i++){
console.log("Like my post");
}

// Like my post выведется 5 раз.

А можно и так:

let i = 0;
for( ; ;) {
console.log("Like my post"); // будет выполняться бесконечно
}

while

Это всё можно переписать и на цикл while

let i = 0;
while(i < 5){
i++;
console.log("Like my post");
}

Тут важно не забывать прописать внутри while "i++", ибо тогда будет пиздец ( бесконечный цикл ).

do..while

let i = 0;
do {
console.log( "Like my post" );
i++;
} while (i < 3);

Прикол этой структуры в том, что она всегда выполниться хотя бы один раз, даже если условие окажется ложным.

Расписывать тут что-то на подобие я не буду:

let arr = [1,5,42,63,44]

for(let a = 0; a < arr.length; a++){
console.log(arr[a]); // выведет все значения массива
}

Почему? Ибо это просто понимание языка и осознание того, что вы делаете.

На этом с циклами всё, да, детская тема, но я не мог её не затронуть, ибо на канале есть те кто вообще не знают джс и именно для них эта статья.

На этом всё, всем спасибо за внимание и удачного денька :3

#js #статья

Всем привет, сегодня спустя 3-4 дня новая статья. Я долго думал о чём написать, и решил что сегодня мы затронем тему работы с DOM-деревом.

D - Documnet
O - Object
M - Model

Начнём с того, чё вообще можно с ним делать - работать напрямую с хтмл элементами, создавать более сложную вёрстку, анимации и т.д.

Начнём пожалуй с того, что создадим наш каркас ХТМЛ, который будет использоваться во всей статье.

HTML:

<section>
<div class="blocks">
<div class="block js-block-yellow"> </div>
<div class="block js-block-red"></div>
</div>
</section>

CSS:

.blocks{
display: flex;
justify-content: center;
}
.block{
margin: 0 15px;
width: 100px;
height: 100px;
box-shadow: 1px 2px 4px #c2c2c2;
border-radius: 5px;
background: yellow;
}
.block:last-child{
background: red;
}

Всё, структура и краткая стилизация есть, теперь переходим к js.

Как вы могли заметить, я нашим блокам дал ещё по два разных класса:

- js-block-yellow
- js-block-red

Если ваш элемент будет задействован в джсе, то хорошей практикой является дать ему приставку "js-" в классе.

А теперь, что вообще будем делать.

Задача:

В зависимости от того, на какой блок нажали - менять цвет всего фона.

Начинаем думать, что нам надо для этой задачи, конечно же, как минимум два наших блока. Чтобы использовать их в джсе, нужно их "взять" оттуда. На этот случай есть аж 3 метода.

let yellowBlock = document.getElementById(" ");
let yellowBlock = document.getElementByClassName(" ");
let yellowBlock = document.querySelector(" ");

Есть ещё и четвёртый, но о нём позже.

Какой метод юзать? Я предпочитаю последний.

let yellowBlock = document.querySelector(".js-block-yellow");
let redBlock = document.querySelector(".js-block-red");

И тут опять можно пойти несколькими путями, вешать функцию на каждую кнопку, или повесить событие на родительский контейнер и от него уже плясать. Конечно же второй вариант лучше, так и сделаем, но для этого нам нужен ещё и наш контейнер:

let relativeBlock = document.querySelector(".blocks");

relativeBlock.addEventListener("click", evt => { });

addEventListener - благодаря нему мы можем повесить любое из доступных нам событий на заданный элемент перед ним, далее передаётся само событие и колбэк, можно так же и передать нашу готовую функцию - всё зависит от задачи, но важно помнить, что если вы передадите вторым "аргументом" свою функцию, то свои параметры вы передать в неё не сможете, ранее была статья где можно было увидеть такую ситуацию, решение - в обычный колбэк передавать нашу функцию, и там уже вы сможете передавать аргументы своей функции.

relativeBlock.addEventListener("click", evt => {
if(evt.target === yellowBlock){
document.body.style.background = "yellow";
}
else if(evt.target === redBlock){
document.body.style.background = "red";
}
})

evt.target определяет, куда мы нажали и дальше следует заданной логике, если так, то так... я думаю тут и так всё понятно.

document.body - обращение к главному тегу body, если вам нужно допустим покрасить какой-нибудь "randomBlock", то не надо писать так:

document.randomBlock.style.background = "red";

Ибо когда вы берёте элемент таким образом:

...document.querySelector(".elem"), то вы уже затираете слово "document", поэтому чтобы всё заработало, надо писать так:

randomBlock.style.background = "red" - теперь ваш блок окрасится в красный цвет.

document.body.style - style обращается к стилям элемента, к которому вы обращаетесь. Можете попробовать так написать и увидите сколько знакомых вам цсс свойств там есть, да, проще говоря - это работа с цсс через джс.

К сожалению, не получится рассказать про задачу которую хотел и 4 метод, ибо на данном этапе уже 3867/4000 символов, поэтому ждите вторую часть, тут ещё много чего можно рассказать.

Всем спасибо за внимание и хорошего дня!

#js #статья

Продолжим тему дом-дерева.

Если не читали прошлую статью - временами вы можете не понимать что-то, так что советую прочитать первую часть.

Начнём с 4 метода.

У нас есть каких-то 3 элемента и у них будет одинакова логика, как быть? Брать каждый элемент через квериСелектор? - Бред.

На помощь приходит document.querySelectorAll();

let blocks = document.querySelectorAll(".block");

Но важно понимать и всегда помнить, что querySelectorAll возвращает псевдомассив, а значит, нам нужно по нему пробежаться, дабы нормально взаимодействовать с элементами.

И да, для querySelectorAll работает только цикл forEach();

blocks.forEach(block => {
block.addEventListener("click", () => {
console.log("Like my post!")
})
})

Теперь, на каждую кнопку у которой есть класс ".block" повесится событие "клик", которое в результате выведет в консоль "Like my post!".

Идём дальше и разберём задачу, о которой я говорил в конце прошлой статьи.

Задача:

Человек вводит фрукт, и если он есть в наличии, то выводим в консоль " товар есть в наличии ".

let field = document.querySelector(".js-field");
let button = document.querySelector("#js-check-button");

let fruits = ["Яблоко", "Груша", "Персик"]
let check = () =>{
let state = false;
if(field.value !== null){
for(let i = 0; i < fruits.length; i++){
if(field.value === fruits[i]){
state = true;
}
}
if(state){
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!")
}
}
}

button.addEventListener("click", check)


Казалось бы, зачем я взял такую задачу?
Тут есть несколько фишек:

1) Если написать так:

for (let i = 0; i < fruits.length; i++) {
if (field.value === fruits[i]) {
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!");
}
}

То, если товара нет - то он выведет в консоль " Товара нет в наличии " 3 раза, оно нам надо? Нет, поэтому, я реализовал это методом замены false на true, что в результате выводит "Товара нет в наличии" всего один раз.

2) Работа с массивами, циклами и методами массивов(хотя это почти одно и тоже)

3) Ну и работа с самим дом-деревом.

classList.

Допустим нам при каком-то условии надо вешать на элемент класс, как это делать?

Юзать classList.

elem.classList.add("test"); - к элементу "elem" добавили класс "test".

Ну и в самом цсс не забудьте дать стилизацию классу.

А что если нужно убрать класс?

elem.classList.remove("test");

А если нам нужно проверить, есть ли такой класс у элемента?

elem.classList.contains("test");

И да, classList тоже псевдомассив и его можно перебирать через for.

let classes = document.querySelector(".test1");

let classesList = classes.classList;

for (let i = 0; i < classesList.length; i++) {
alert(classesList[i]); // test1 , затем test2
}

Ну и ещё затрону тему атрибутов.

<body>
<div id="elem" name="Dima"></div>
</body>

let elem = document.querySelector("#elem");

alert(elem.getAttribute("name")); // Dima
getAttribute проверяет значение атрибута, которое мы ему указали.

alert(elem.hasAttribute("name")); // true
hasAttribute проверяет, есть ли вообще такой атрибут.

elem.setAttribute("act", "like my post")
alert(elem.getAttribute("act")); // like my post
setAttribute устанавливает атрибут и его значение.

elem.removeAttribute("name);
removeAttribute удаляет атрибут.

О атрибутах поговорим в будущем.

Спасибо всем за внимание, в дом-дереве есть много всяких фич, о которых можно писать вечно и чтоб их все узнать - надо просто писать код, так что не ленитесь и практикуйтесь!

Всем хорошего дня!

#js #статья

Всем привет и сегодня мы поговорим о том, а какие же проекты делать для портфолио?

Это пиздец частый вопрос и все начинают думать так:

- Нуу, я хочу что-то крутое.. создам-ка я копию инстаграма.

Хорошо, сделал ты фронтенд, а бекенд? Откуда его брать? Самому клепать? - та не, ещё год потратить на понимание бекенда не хочется.

Конечно можно поискать бекенд апи для инсты, но это будет тяжело и не факт что будет годное апи.

Так что же делать?

Начинать в первую очередь стоит с того, что найти парочку готовых бекенд апи, и от них уже плясать. Почему? - да потому что вы сможете сделать динамический сайт, что является продвинутым навыком веб-разработки. Но где взять эти " парочку " апишек? А я их вам скину. На данном гитхабе есть большое количество backend API, которые даже разбиты по категориям.., так что, выбирайте что-то готовое оттуда и удивляйте всех!

Backend API: https://github.com/public-apis/public-apis

#css #статья

Всем привет!

Часто ли вы слышали о noscript? Наверное, да.

А что это такое? Как использовать это? Как оптимизировать?

На эти вопросы вы получите ответ на данном сайте.

Там рассмотрены множество примеров работы с свг, а так же оптимизация и т.д.

Сайт: https://noscriptontheweb.com/ru/

( надеюсь скоро и на моём канале выйдет статья о свг )

Всем хорошего дня!

#js #статья

Всем привет и сегодня мы поговорим про экспорт и импорт в джсе.

Начнём с того, что это важная составляющая в разработке, ибо в том же реакте вы будете импортировать и экспортировать постоянно.

Так же хочу отметить, что экспорт и импорт работает на серверах, как пример: локальный сервер. ( Если я путаю, прошу поправить, но вроде это так )

Начнём с экспортов.

Их существует два типа:

- export
- export default

Начнём с того, что представим что мы запустили локалку и создали два js файла: main.js и func.js

В файле func.js мы будем создавать наши функции, а в main.js будем их юзать.

func.js:

let sum = (a,b) => {
return a + b;
}

Ну и тут мы с гордостью можем написать export default sum;

Всё, наша функция экспортирована, можем её юзать в главном файле, но об этом позже.

Но так же мы можем написать так:

export let sum = (a,b) => {
return a + b;
}

Ну и теперь мы тоже можем юзать эту функцию:D

А... в чём разница?

Ну тут дело в том, что благодаря обычному экспорту мы можем экспортировать сразу несколько функций, а при export default - только что-то одно.

Вот пример:

func.js:

let sum = (a,b) => {
return a + b;
}

let sayHi = name => {
console.log("Hello", name);
}

export {sum}, {sayHi};

При помощи export default такое делать нельзя D:

Ну ладно, с экспортами мы разобрались, теперь поговорим про импорты.

Если вы думали, что достаточно просто написать import sum from '...' - то нет:D

В зависимости от того, какой у вас экспорт, будет зависеть тип импорта.

Начнёмс.

func.js:

let sum = (a,b) => {
return a + b;
}

export default sum;

main.js:

import sum from 'func.js'

sum(4,2);

Те кто внимательный, те заметили что в этом случае мы юзали экспорт по дефолту, а вот как будет выглядеть импорт обычного экспорта:

func.js:

export let sum = (a,b) => {
return a + b;
}

main.js:

import {sum} from 'func.js'

sum(4,2);


Ну, а если у вас допустим две функции, которые экспортируются без дефолта, то можно записать так:

import {sum, sayHi} from 'func.js'

Ну, на этом всё. Да, тема не большая, но очень важная! Так что, я надеюсь вы внимательно всё прочитали, ибо я старался донести всю инфу без воды и только самое важное.

На этом всё, всем продуктивного денька!

#js #статья

Всем привет!

Сегодня мы поговорим про асинхронность.

Что это вообще такое, твоя асинхронность? - Это когда код выполняется не сразу, а через время, самый популярный и понятный пример - запрос на сервер. Сервер не ответит вам моментально, а через некоторое время, допустим через одну секунду.

Начнём с того, что сегодня для примера я буду слать какой-то левый запрос на сервер, загружать прилоадер во время запроса, и после ответа сервера - выключать.

Тут на самом деле много кода надо писать, но мы упростим себе задачу:

- Loading(condition) - это наш прилоадер, как параметр он принимает true или false, если true - прилоадер покажется, и наоборот, изначально он равен false.

- getData() - запрос на сервер, так как у нас нет задачи плясать от ответа сервера, то мы просто представим что там есть какой-то запрос.

Теперь про асинхронность - есть два вида записи асинхронности:
- then
- async/await

Что лучше использовать? Последний вариант.

const getUserData = async () => {
Loading(true)
let responce = await getData();
Loading(false)
}

Вот такой вот простенький запрос на сервер, основанный на асинхронности.

Ну, а теперь про then.

const getUserData = () => {
Loading(true)
getData().then(() => {
Loading(false)
}
}

Но я вас призываю использовать async/await, сейчас сам на них перешёл.

Но что делать если сервер ответит ошибкой? - ну что поделать, будем перехватывать ошибки.

const getUserData = async () => {
try {
let response = await getData();
} catch(err) {
alert("Error", err);
}
}

Да-да, это те самые ребята try/catch, я вроде где-то упоминал их ранее.

Ну и конструкцию async/await можно использовать в методах класса, там всё так же, так что показывать нет смысла.

Ну, на этом всё, тема не большая, но очень важнецкая! Всем хорошего дня!