Стрелочные функции
Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис.
Но они имеют недостатки, что в некоторых случаях их не стоит использовать. Например, в методах объектов.
О всех недостатках и случаях, читайте подробнее в статье.
Ссылка на статью
#js
Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис.
Но они имеют недостатки, что в некоторых случаях их не стоит использовать. Например, в методах объектов.
О всех недостатках и случаях, читайте подробнее в статье.
Ссылка на статью
#js
Docusaurus — это генератор статических сайтов, который позволяет создавать красивые сайты с документацией без особых усилий. Он основан на React и его богатой экосистеме.
Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов.
Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем.
Ссылка на официальный сайт
#инструменты
Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов.
Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем.
Ссылка на официальный сайт
#инструменты
Remotion - это библиотека для создания видео в React приложениях. Она позволяет создавать визуальные эффекты с помощью canvas, CSS, SVG и WebGL и объединять их в видео.
Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода!
Советуем ознакомиться с документацией, чтобы понять, как это работает.
Ссылка на официальный сайт
#react
Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода!
Советуем ознакомиться с документацией, чтобы понять, как это работает.
Ссылка на официальный сайт
#react
3D карусель
Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу.
Сохраняйте в закладки!
Ссылка на CodePen
#дизайн
Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу.
Сохраняйте в закладки!
Ссылка на CodePen
#дизайн
NGINX
Как фронтенд-разработчику, вам будет полезно знать что такое NGINX.
Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс".
Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым.
Более подробно о принципе его работы читайте в статье.
Ссылка на статью
#статьи
Как фронтенд-разработчику, вам будет полезно знать что такое NGINX.
Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс".
Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым.
Более подробно о принципе его работы читайте в статье.
Ссылка на статью
#статьи
Эффект печатающей машинки
Эффект печатающей машинки - очень популярная анимация, для которой существует не мало способов создания.
В статье представлено несколько демо с реализацией:
- на чистом CSS;
- c помощью CSS и JavaScript;
- с помощью библиотек.
Ссылка на статью
#css
Эффект печатающей машинки - очень популярная анимация, для которой существует не мало способов создания.
В статье представлено несколько демо с реализацией:
- на чистом CSS;
- c помощью CSS и JavaScript;
- с помощью библиотек.
Ссылка на статью
#css
Сортировка по дате
Часто на практике возникает задача: с бэкэнда приходит набор данных, которые нужно отсортировать по дате.
Как это реализовать в JavaScript читайте в статье.
Ссылка на статью
#javascript
Часто на практике возникает задача: с бэкэнда приходит набор данных, которые нужно отсортировать по дате.
Как это реализовать в JavaScript читайте в статье.
Ссылка на статью
#javascript
Preline - это набор готовых UI компонентов, основанный на Tailwind СSS.
В вашем распоряжении более 250 компонентов, которые можно использовать в React, Vue и HTML. Все компоненты имеют вариант для темной цветовой темы, что упрощает создание функционала переключения тем.
Ссылка на сайт
#инструменты
В вашем распоряжении более 250 компонентов, которые можно использовать в React, Vue и HTML. Все компоненты имеют вариант для темной цветовой темы, что упрощает создание функционала переключения тем.
Ссылка на сайт
#инструменты
Начинать что-то с нуля страшно, особенно если это путь в новую профессию. Но на самом деле у вас уже есть опыт, который можно применить!
Яндекс Практикум проводит день открытых дверей. На нём вы поймёте, как ваш опыт пригодится в поиске работы в IT.
→ Бесплатно, 23 августа в 18:00
Во встрече будет два блока:
◾️ Круглый стол с выпускниками Практикума.
Ребята расскажут, как они прошли путь до новой профессии. Как учились с нуля, как долго искали работу, что из их опыта помогало, а что мешало.
◾️ Упражнение на выбор IT-профессии от карьерного консультанта.
Карьерный специалист Мария Оборина даст алгоритм по поиску профессии, которая вам по душе. Она поможет:
— оценить прошлый опыт и понять, как использовать его в новой работе;
— определить, что для вас важно в работе,
— наложить эти данные на разные IT-профессии и выбрать подходящую;
— определить, насколько востребованы такие специалисты.
В финале встречи выпускники и Мария ответят на вопросы гостей.
→ Узнать больше и зарегистрироваться
Яндекс Практикум проводит день открытых дверей. На нём вы поймёте, как ваш опыт пригодится в поиске работы в IT.
→ Бесплатно, 23 августа в 18:00
Во встрече будет два блока:
◾️ Круглый стол с выпускниками Практикума.
Ребята расскажут, как они прошли путь до новой профессии. Как учились с нуля, как долго искали работу, что из их опыта помогало, а что мешало.
◾️ Упражнение на выбор IT-профессии от карьерного консультанта.
Карьерный специалист Мария Оборина даст алгоритм по поиску профессии, которая вам по душе. Она поможет:
— оценить прошлый опыт и понять, как использовать его в новой работе;
— определить, что для вас важно в работе,
— наложить эти данные на разные IT-профессии и выбрать подходящую;
— определить, насколько востребованы такие специалисты.
В финале встречи выпускники и Мария ответят на вопросы гостей.
→ Узнать больше и зарегистрироваться
useRunOnce - это React хук который запускает функцию один раз при монтировании компонента.
Он полезен в ситуациях, когда нужно, чтобы код выполнился всего лишь один раз. Но стоит отметить, что данный хук стоит использовать только в особых случаях.
В статье объясняются распространенные случаи использования useRunOnce и когда его не следует использовать.
Ссылка на статью
#react
Он полезен в ситуациях, когда нужно, чтобы код выполнился всего лишь один раз. Но стоит отметить, что данный хук стоит использовать только в особых случаях.
В статье объясняются распространенные случаи использования useRunOnce и когда его не следует использовать.
Ссылка на статью
#react
Эффекты для курсора
Создание эффекта для курсора при его передвижении - это хороший способ добавить сайту изюминку.
Делимся ссылкой на коллекцию крутых эффектов. На сайте представлены демо, а как добавить понравившийся вариант в свой проект рассказано в документации!
Ссылка на сайт
#дизайн
Создание эффекта для курсора при его передвижении - это хороший способ добавить сайту изюминку.
Делимся ссылкой на коллекцию крутых эффектов. На сайте представлены демо, а как добавить понравившийся вариант в свой проект рассказано в документации!
Ссылка на сайт
#дизайн
DNS (Domain Name System — система доменных имен) - технология, которая предоставляет браузеру возможность находить конкретный сайт по его имени с помощью DNS-серверов.
У каждого подключенного к интернету устройства есть свой номер, который на профессиональном языке называется IP-адресом. Запомнить эти наборы цифр сложно, поэтому придумали DNS технологию, которая связывает домен с IP-адресом. Часто DNS сравнивают с телефонной книгой, где записаны контакты (доменные имена) и номера телефонов (IP-адреса).
В этой статье рассказывается о внутренностях DNS: различных компонентах, участвующих в обработке DNS-запроса и какую функцию каждый из них выполняет.
Ссылка на статью
#статьи
У каждого подключенного к интернету устройства есть свой номер, который на профессиональном языке называется IP-адресом. Запомнить эти наборы цифр сложно, поэтому придумали DNS технологию, которая связывает домен с IP-адресом. Часто DNS сравнивают с телефонной книгой, где записаны контакты (доменные имена) и номера телефонов (IP-адреса).
В этой статье рассказывается о внутренностях DNS: различных компонентах, участвующих в обработке DNS-запроса и какую функцию каждый из них выполняет.
Ссылка на статью
#статьи
-webkit-box-reflect
Реально ли создать отражение элемента всего лишь с помощью одного CSS свойства? Да!
-webkit-box-reflect предоставляет эту возможность.
Хотя Firefox не поддерживает данное свойство. И для похожего эффекта рекомендуется использовать функцию element(). Но все же с помощью webkit-box-reflect можно создавать очень крутые эффекты. Примеры смотрите в статье.
Совместимость с браузерами можно глянуть тут.
Ссылка на статью
#css
Реально ли создать отражение элемента всего лишь с помощью одного CSS свойства? Да!
-webkit-box-reflect предоставляет эту возможность.
Хотя Firefox не поддерживает данное свойство. И для похожего эффекта рекомендуется использовать функцию element(). Но все же с помощью webkit-box-reflect можно создавать очень крутые эффекты. Примеры смотрите в статье.
Совместимость с браузерами можно глянуть тут.
Ссылка на статью
#css
метод startsWith
Существует много способов для того, чтобы проверить, что строка начинается с определенного символа:
- метод indexOf;
- метод substring;
- регулярное выражение;
А также существует метод специально предназначенный для этого! startsWith помогает определить, начинается ли строка с символов переданных в качестве аргумента, возвращая true или false.
Подробнее о нем и примерах его использования читайте в статье!
Ссылка на статью
#js
Существует много способов для того, чтобы проверить, что строка начинается с определенного символа:
- метод indexOf;
- метод substring;
- регулярное выражение;
А также существует метод специально предназначенный для этого! startsWith помогает определить, начинается ли строка с символов переданных в качестве аргумента, возвращая true или false.
Подробнее о нем и примерах его использования читайте в статье!
Ссылка на статью
#js
elevator.js - это библиотека для создания прокрутки наверх по клику на кнопку. Особенность ее в том, что она создает иллюзию подъема наверх, как будто на лифте, да еще и в сопровождении соответствующей мелодии.
Советуем глянуть демо на сайте!
Ссылка на сайт
#инструменты
Советуем глянуть демо на сайте!
Ссылка на сайт
#инструменты
React Just Parallax - библиотека React для создания параллакс эффекта при прокрутке и при движении мыши.
Она написана на TypeScript, весит мало, работает молниеносно и проста в использовании.
Смотрите демо и примеры использования на сайте!
Ссылка на сайт
#react
Она написана на TypeScript, весит мало, работает молниеносно и проста в использовании.
Смотрите демо и примеры использования на сайте!
Ссылка на сайт
#react
Passport - это промежуточное программное обеспечение для аутентификации для Node.js. Оно поддерживает аутентификацию с использованием имени пользователя и пароля, Facebook, Twitter и многого другого.
Ссылка на официальный сайт
#nodejs
Ссылка на официальный сайт
#nodejs
fffuel - это коллекция бесплатных генераторов для создания уникальных фонов, градиентов и декоративных элементов в формате SVG.
Сохраняйте в закладки!
Ссылка на сайт
#дизайн
Сохраняйте в закладки!
Ссылка на сайт
#дизайн
Именование коммитов
Коммиты отражают историю репозитория, а также предоставляют информацию другим о том, какая работа была выполнена, что было исправлено или добавлено. Поэтому очень важно писать для них ясные и понятные сообщения.
Кстати, существует единое соглашение (Conventional Commit) по тому, как писать коммиты.
В статье как раз рассказывается о правилах из данного соглашения и примерах хороших и плохих коммитов.
Ссылка на статью
#статьи
Коммиты отражают историю репозитория, а также предоставляют информацию другим о том, какая работа была выполнена, что было исправлено или добавлено. Поэтому очень важно писать для них ясные и понятные сообщения.
Кстати, существует единое соглашение (Conventional Commit) по тому, как писать коммиты.
В статье как раз рассказывается о правилах из данного соглашения и примерах хороших и плохих коммитов.
Ссылка на статью
#статьи
Псевдоселектор :modal
Псевдоселектор :modal позволяет выбирать модальные элементы.
Два типа элементов в настоящее время классифицируются как :modal:
- <dialog>, использующий метод showModal;
- элементы, находящиеся в полноэкранном режиме;
Поддержка пока еще недостаточно хорошая, но :modal поддерживается уже последними версиями Chrome, Safari, Firefox и Edge. Ее уровень можно глянуть тут.
А подробнее об его использовании читайте в статье.
Ссылка на статью
#css
Псевдоселектор :modal позволяет выбирать модальные элементы.
Два типа элементов в настоящее время классифицируются как :modal:
- <dialog>, использующий метод showModal;
- элементы, находящиеся в полноэкранном режиме;
Поддержка пока еще недостаточно хорошая, но :modal поддерживается уже последними версиями Chrome, Safari, Firefox и Edge. Ее уровень можно глянуть тут.
А подробнее об его использовании читайте в статье.
Ссылка на статью
#css
JavaScript API, о которых вы не знали
В статье описываются наименее известные, но чрезвычайно полезные API, такие как:
- Page Visibility API
- Web Share API
- Broadcast Channel API
- Internationalization API
Например, Web Share API используется для обмена текстом, ссылками и файлами. Его можно использовать для того, чтобы поделиться контентом со страницы в социальных сетях или скопировать его в буфер обмена.
Подробнее об этих API и о том, как их использовать читайте в статье.
Ссылка на статью
#js
В статье описываются наименее известные, но чрезвычайно полезные API, такие как:
- Page Visibility API
- Web Share API
- Broadcast Channel API
- Internationalization API
Например, Web Share API используется для обмена текстом, ссылками и файлами. Его можно использовать для того, чтобы поделиться контентом со страницы в социальных сетях или скопировать его в буфер обмена.
Подробнее об этих API и о том, как их использовать читайте в статье.
Ссылка на статью
#js