This media is not supported in your browser
VIEW IN TELEGRAM
Переключатель в виде сковороды с яичницей
Вот такой переключатель вы можете сделать самостоятельно благодаря коду, который лежит по ссылке. Всё выполнено на html, css и ванильном JS.
От себя могу сказать, что сделать сковороду красной, а не зелёной выглядит куда логичнее. Сможете доработать?😉
@frontend_school #codepen #css #javascript
Вот такой переключатель вы можете сделать самостоятельно благодаря коду, который лежит по ссылке. Всё выполнено на html, css и ванильном JS.
От себя могу сказать, что сделать сковороду красной, а не зелёной выглядит куда логичнее. Сможете доработать?
@frontend_school #codepen #css #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Полифилы JavaScript: что это и зачем они нужны
Полифил — это код, реализующий какую-то функциональность, которая не поддерживается в некоторых браузерах. Реализация собственного полифила обеспечивает единообразное поведение функциональности в разных браузерах.
Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как
@frontend_school #статья #javascript
Полифил — это код, реализующий какую-то функциональность, которая не поддерживается в некоторых браузерах. Реализация собственного полифила обеспечивает единообразное поведение функциональности в разных браузерах.
Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как
map
, forEach
, filter
, reduce
. @frontend_school #статья #javascript
Введение в асинхронный JavaScript: Callbacks, Promises и Async/Await
Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.
Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.
@frontend_school #статья #javascript
Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.
Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.
@frontend_school #статья #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем пинг-понг на JS с нуля
Вот такой классный проект вы можете реализовать самостоятельно на выходных.
Все необходимые зависимости, части кода, принципы его работы описаны в статье.
@frontend_school #статья #javascript
Вот такой классный проект вы можете реализовать самостоятельно на выходных.
Все необходимые зависимости, части кода, принципы его работы описаны в статье.
@frontend_school #статья #javascript
Два сниппета на JavaScript, которые упростят вам жизнь
В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).
@frontend_school #статья #javascript
В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).
@frontend_school #статья #javascript
Что означает ошибка SyntaxError: Unexpected token '{'. Expected ')' to end an 'if' condition
Наверное, каждый из нас сталкивался с такой ошибкой при написании кода на JS. Её легко допустить, но также и легко исправить.
О том почему она возникает и как её быстро устранить рассказали в статье: https://thecode.media/chto-oznachaet-oshibka-syntaxerror-unexpected-token-expected-to-end-an-if-condition/
@frontend_school #статья #javascript
Наверное, каждый из нас сталкивался с такой ошибкой при написании кода на JS. Её легко допустить, но также и легко исправить.
О том почему она возникает и как её быстро устранить рассказали в статье: https://thecode.media/chto-oznachaet-oshibka-syntaxerror-unexpected-token-expected-to-end-an-if-condition/
@frontend_school #статья #javascript
21 лайфхак для новичков в JavaScript
Приготовьтесь пополнить арсенал своих JavaScript-навыков. Всеобъемлющее руководство ознакомит вас с эксклюзивными JavaScript-лайфхаками, которые помогают опытным разработчикам достигать вершин мастерства при создании кода.
Постигаем мастерство тут: https://nuancesprog.ru/p/20310/
@frontend_school #статья #javascript
Приготовьтесь пополнить арсенал своих JavaScript-навыков. Всеобъемлющее руководство ознакомит вас с эксклюзивными JavaScript-лайфхаками, которые помогают опытным разработчикам достигать вершин мастерства при создании кода.
Постигаем мастерство тут: https://nuancesprog.ru/p/20310/
@frontend_school #статья #javascript
Новые методы Set в JavaScript, которые подарят вам суперспособности
Set был добавлен ещё в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако при работе с несколькими коллекциями или их сравнении, приходилось писать дополнительные функции.
Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции. Подробнее:
https://proglib.io/p/set-v-javascript-teper-s-novymi-supersposobnostyami-2024-06-19
@frontend_school #статья #javascript
Set был добавлен ещё в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако при работе с несколькими коллекциями или их сравнении, приходилось писать дополнительные функции.
Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции. Подробнее:
https://proglib.io/p/set-v-javascript-teper-s-novymi-supersposobnostyami-2024-06-19
@frontend_school #статья #javascript
5 крутых функций JavaScript, о которых не знает большинство разработчиков
С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript добавляются новые методы и операторы, чтобы сделать код более коротким и читабельным.
Как использовать всю мощь языка, рассказали здесь: https://proglib.io/p/5-krutyh-funkciy-javascript-o-kotoryh-ne-znaet-bolshinstvo-razrabotchikov-2021-09-04
@frontend_school #статья #javascript
С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript добавляются новые методы и операторы, чтобы сделать код более коротким и читабельным.
Как использовать всю мощь языка, рассказали здесь: https://proglib.io/p/5-krutyh-funkciy-javascript-o-kotoryh-ne-znaet-bolshinstvo-razrabotchikov-2021-09-04
@frontend_school #статья #javascript
Полное руководство по localStorage в JavaScript localStorage
JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера.
Зачем оно нужно, как им пользоваться и какие методы существуют, рассказали в статье: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
@frontend_school #статья #javascript
JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера.
Зачем оно нужно, как им пользоваться и какие методы существуют, рассказали в статье: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
@frontend_school #статья #javascript
Большой видеоурок по Three.js
В этом видео вы научитесь пользоваться популярной js-библиотекой для создания сложных анимаций Three.js. Хоть видео и на английском, но вы без труда сможете посмотреть его используя автоматический перевод, например, в Яндекс Браузере:
https://youtu.be/UMqNHi1GDAE
@frontend_school #видео #javascript #threejs https://www.youtube.com/watch?v=UMqNHi1GDAE
В этом видео вы научитесь пользоваться популярной js-библиотекой для создания сложных анимаций Three.js. Хоть видео и на английском, но вы без труда сможете посмотреть его используя автоматический перевод, например, в Яндекс Браузере:
https://youtu.be/UMqNHi1GDAE
@frontend_school #видео #javascript #threejs https://www.youtube.com/watch?v=UMqNHi1GDAE
YouTube
Learn Three.js by Building 5 Projects
Learn fundamental JavaScript coding techniques by creating dazzling real-time 3d animations and effects using three.js.
✏️ Course developed by @robotbobby9
Here are the projects you will create:
1) Getting Started
https://github.com/bobbyroe/getting-started…
✏️ Course developed by @robotbobby9
Here are the projects you will create:
1) Getting Started
https://github.com/bobbyroe/getting-started…
Спорим, вы знаете не все методы для работы со строками в JavaScript?
Хоть нам и приходится каждый день иметь дело с JS, но всё знать невозможно. В этой статье собраны 40 методов, которые позволяют взаимодействовать со строками:
https://proglib.io/p/40-osnovnyh-i-nestandartnyh-metodov-dlya-raboty-so-strokami-v-javascript-2022-05-19
Напишите в комментарии сколько из них вы знали до прочтения статьи 👇
#javascript #строки
Учитесь фронтенду с нами — подпишитесь 💻
Хоть нам и приходится каждый день иметь дело с JS, но всё знать невозможно. В этой статье собраны 40 методов, которые позволяют взаимодействовать со строками:
https://proglib.io/p/40-osnovnyh-i-nestandartnyh-metodov-dlya-raboty-so-strokami-v-javascript-2022-05-19
Напишите в комментарии сколько из них вы знали до прочтения статьи 👇
#javascript #строки
Как работают функции JavaScript
Мы с вами знаем, что функция — это блок программы, который выполняет определённые действия. То есть мы понимаем, что делает функция, потому что можем посмотреть код в ней.
Но как именно это работает? Мы не будем сейчас углубляться в двоичный код и прочие технические нюансы. Вместо этого предлагаем вам детально разобраться в том, что из себя представляет функция, какими скрытыми возможностями обладает и почему это работает именно так, как работает:
https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12
#javascript
Учитесь фронтенду с нами — подпишитесь 💻
Мы с вами знаем, что функция — это блок программы, который выполняет определённые действия. То есть мы понимаем, что делает функция, потому что можем посмотреть код в ней.
Но как именно это работает? Мы не будем сейчас углубляться в двоичный код и прочие технические нюансы. Вместо этого предлагаем вам детально разобраться в том, что из себя представляет функция, какими скрытыми возможностями обладает и почему это работает именно так, как работает:
https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12
#javascript
Что такое делегирование событий в JS и как это работает
Это техника, которая позволяет обрабатывать события на родительских элементах вместо на дочерних.
Мы знаем, что события всплывают вверх по DOM-дереву. То есть если вы установите обработчик события на родительском элементе, он будет вызван при срабатывании и на любом дочернем.
Вот пример, как можно это использовать:
Тут мы устанавливаем обработчик на родительский элемент и проверяем, что событие произошло именно на дочернем элементе.
#javascript #урок
Учитесь фронтенду с нами — подпишитесь 💻
Это техника, которая позволяет обрабатывать события на родительских элементах вместо на дочерних.
Мы знаем, что события всплывают вверх по DOM-дереву. То есть если вы установите обработчик события на родительском элементе, он будет вызван при срабатывании и на любом дочернем.
Вот пример, как можно это использовать:
// Получаем родительский элемент
const parentElement = document.getElementById('parentElement');
// Добавляем обработчик на родительский элемент
parentElement.addEventListener('click', function(event) {
// Проверяем, что кликнули на нужный дочерний элемент
if(event.target.classList.contains('childElement')) {
// Обрабатываем событие
console.log('Событие обработано на дочернем элементе');
}
});
Тут мы устанавливаем обработчик на родительский элемент и проверяем, что событие произошло именно на дочернем элементе.
#javascript #урок
Учимся создавать анимацию жидкости с помощью JS и CSS
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
Учитесь фронтенду с нами — подпишитесь 💻
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
YouTube
Amazing Liquid Dripping Effects using CSS & Javascipt
All Source Code : https://www.patreon.com/onlinetutorials
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
Метод bind() в JavaScript
Простыми словами,
Давайте разберёмся на примере. Представьте, что у вас есть объект
Если мы вызовем
Но что, если мы захотим передать эту функцию в другое место? Например:
В этом случае контекст потеряется, и
Теперь функция
#урок #javascript
Простыми словами,
bind
— это инструмент, который позволяет «привязать» определённый контекст (this
) к функции.Давайте разберёмся на примере. Представьте, что у вас есть объект
user
:const user = {
name: 'Аня',
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};
Если мы вызовем
user.greet()
, то увидим: «Привет, меня зовут Аня». Всё работает, потому что контекст (this
) указывает на объект user
.Но что, если мы захотим передать эту функцию в другое место? Например:
const greetFunc = user.greet;
greetFunc(); // Что произойдет?
В этом случае контекст потеряется, и
this
будет указывать не на user
, а на глобальный объект (или undefined
в строгом режиме). Метод bind
поможет нам решить эту проблему:const greetFuncBound = user.greet.bind(user);
greetFuncBound(); // Привет, меня зовут Аня
Теперь функция
greetFuncBound
всегда будет знать, что её контекст — это объект user
.#урок #javascript
Область видимости и замыкания в JavaScript
Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.
В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!
https://habr.com/ru/articles/828618/
#javascript
Учитесь фронтенду с нами — подпишитесь 💻
Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.
В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!
https://habr.com/ru/articles/828618/
#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Форма авторизации с капчей
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Что такое WeakMap и WeakSet
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.
WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.
Примеры использования:
```
let wm = new WeakMap();
let obj = {};
wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'
obj = null; // Объект становится недоступен и может быть удалён
```
```
let ws = new WeakSet();
let obj = {};
ws.add(obj);
console.log(ws.has(obj)); // true
obj = null; // Объект может быть удалён
```
`WeakMap` подходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов. `WeakSet` полезен для хранения множества объектов с автоматической очисткой.
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.
WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.
Примеры использования:
```
let wm = new WeakMap();
let obj = {};
wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'
obj = null; // Объект становится недоступен и может быть удалён
```
```
let ws = new WeakSet();
let obj = {};
ws.add(obj);
console.log(ws.has(obj)); // true
obj = null; // Объект может быть удалён
```
`WeakMap` подходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов. `WeakSet` полезен для хранения множества объектов с автоматической очисткой.
#урок #javascript