overflow: hidden
Как достичь такого же результата, как у overflow: hidden, но без его использования?
Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.
Подробно о данных способах, читайте в статье!
Ссылка на статью
#css
Как достичь такого же результата, как у overflow: hidden, но без его использования?
Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.
Подробно о данных способах, читайте в статье!
Ссылка на статью
#css
👍7
Фильтрация объектов
Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter().
Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!
В статье рассказывается, как фильтровать объекты по ключу.
Ссылка на статью
#js
Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter().
Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!
В статье рассказывается, как фильтровать объекты по ключу.
Ссылка на статью
#js
👍3
Nunjucks
Nunjucks является мощным шаблонизатором для JavaScript. Его можно использовать в браузере, на стороне клиента и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.
На каждой странице сайта присутствуют одинаковые блоки: хедер, футер и др. Что бы заменить надпись, например, в хедере, нужно вручную вносить изменения на каждой странице сайта.
Шаблонизатор Nunjucks позволяет вынести все повторяющееся элементы в один базовый шаблон. При этом изменить надпись в хедере на всем сайте займет пару минут.
Кстати, Nunjucks был разработан командой Mozilla.
Ссылка на официальный сайт
#инструменты
Nunjucks является мощным шаблонизатором для JavaScript. Его можно использовать в браузере, на стороне клиента и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.
На каждой странице сайта присутствуют одинаковые блоки: хедер, футер и др. Что бы заменить надпись, например, в хедере, нужно вручную вносить изменения на каждой странице сайта.
Шаблонизатор Nunjucks позволяет вынести все повторяющееся элементы в один базовый шаблон. При этом изменить надпись в хедере на всем сайте займет пару минут.
Кстати, Nunjucks был разработан командой Mozilla.
Ссылка на официальный сайт
#инструменты
👍5👎1
Mantine
Еще одна библиотека для быстрого создания React приложений!
Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков.
Mantine предлагает немало полезных функций. Например:
- c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода;
- имеет полнофункциональную систему уведомлений;
- Transitions API для создания плавных анимаций
и многое другое!
Ссылка на официальный сайт
#react
Еще одна библиотека для быстрого создания React приложений!
Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков.
Mantine предлагает немало полезных функций. Например:
- c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода;
- имеет полнофункциональную систему уведомлений;
- Transitions API для создания плавных анимаций
и многое другое!
Ссылка на официальный сайт
#react
👎3
Как стать веб-разработчиком с нуля в 2022? Узнайте на вебинаре.
→ Бесплатно, 26 июля в 19:00
На встрече расскажем, как освоить профессию с нуля и выйти на рынок труда через 10 месяцев, даже если до этого вы никогда не программировали.
◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика.
◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика.
На вебинаре вы узнаете:
— почему через веб-разработку реально попасть в IT;
— какие задачи решает веб-разработчик;
— какие навыки нужны для успешного старта карьеры.
В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии.
→ Зарегистрироваться на вебинар
#реклама
→ Бесплатно, 26 июля в 19:00
На встрече расскажем, как освоить профессию с нуля и выйти на рынок труда через 10 месяцев, даже если до этого вы никогда не программировали.
◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика.
◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика.
На вебинаре вы узнаете:
— почему через веб-разработку реально попасть в IT;
— какие задачи решает веб-разработчик;
— какие навыки нужны для успешного старта карьеры.
В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии.
→ Зарегистрироваться на вебинар
#реклама
👍2
Morgan — это промежуточное ПО для Node.js, которое регистрирует HTTP-запросы. Обычно оно используется в проектах Express.
Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять.
А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению.
Подробнее о том, как его использовать читайте в статье!
Ссылка на статью
#nodejs
Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять.
А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению.
Подробнее о том, как его использовать читайте в статье!
Ссылка на статью
#nodejs
Mesher - инструмент для создания сетчатых градиентов.
Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом.
Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код.
Ссылка на сайт
#дизайн
Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом.
Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код.
Ссылка на сайт
#дизайн
CMS, CRM, и ERP
CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам.
Если не понимаете, что и для чего предназначено, то эта статья для вас. В ней рассказывается для чего эти типы ПО нужны и их ключевых функциях.
Ссылка на сайт
#статьи
CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам.
Если не понимаете, что и для чего предназначено, то эта статья для вас. В ней рассказывается для чего эти типы ПО нужны и их ключевых функциях.
Ссылка на сайт
#статьи
👍5
column-rule
Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule!
column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя.
Подробности в статье!
Ссылка на статью
#css
Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule!
column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя.
Подробности в статье!
Ссылка на статью
#css
Шпаргалка GSAP
GSAP - это высокопроизводительная JavaScript библиотека анимации.
В шпаргалке представлены примеры синтаксиса GSAP со всеми базовыми свойствами и методами. Кликая на свойства в примерах, можно почитать подробное описание.
Удобно иметь под рукой!
Ссылка на шпаргалку
#инструменты
GSAP - это высокопроизводительная JavaScript библиотека анимации.
В шпаргалке представлены примеры синтаксиса GSAP со всеми базовыми свойствами и методами. Кликая на свойства в примерах, можно почитать подробное описание.
Удобно иметь под рукой!
Ссылка на шпаргалку
#инструменты
React-Responsive-Carousel — это npm пакет, используемый в React приложениях для создания карусели изображений или видео.
Хороший и быстрый вариант для создания карусели, адаптированной под все экраны!
На официально сайте можно посмотреть демо, а в статье подробно рассказывается, как ее создать и настроить.
Ссылка на статью
Ссылка на официальный сайт
#react
Хороший и быстрый вариант для создания карусели, адаптированной под все экраны!
На официально сайте можно посмотреть демо, а в статье подробно рассказывается, как ее создать и настроить.
Ссылка на статью
Ссылка на официальный сайт
#react
👍1👎1
Fast Node Manager
Иногда для проектов требуются разные версии Node.js.
Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих.
Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними.
В статье рассказывается, как использовать Fast Node Manager.
Ссылка на статью
#nodejs
Иногда для проектов требуются разные версии Node.js.
Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих.
Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними.
В статье рассказывается, как использовать Fast Node Manager.
Ссылка на статью
#nodejs
👍2
Pebble - это коллекция бесплатных стильных иконок. Они доступны в форматах PNG и SVG, а так же в качестве React компонентов, построенных с помощью SVGR.
Ссылка на сайт
#дизайн
Ссылка на сайт
#дизайн
👍2
Шорткаты Chrome
Шорткаты или горячие клавиши упростят вашу жизнь и ускорят работу в самом часто используемом браузере — Google Chrome. В статье дается список комбинаций для Windows, Linux и MacOS.
Ссылка на статью
#статьи
Шорткаты или горячие клавиши упростят вашу жизнь и ускорят работу в самом часто используемом браузере — Google Chrome. В статье дается список комбинаций для Windows, Linux и MacOS.
Ссылка на статью
#статьи
Задержка анимации
А знали ли вы, что значение animation-delay может быть отрицательным? Это помогает сделать пошаговую анимацию более естественной.
В сегодняшней статье как раз показывается показывается пример использования отрицательной задержки анимации.
Ссылка на статью
#css
А знали ли вы, что значение animation-delay может быть отрицательным? Это помогает сделать пошаговую анимацию более естественной.
В сегодняшней статье как раз показывается показывается пример использования отрицательной задержки анимации.
Ссылка на статью
#css
👍2
Стрелочные функции
Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис.
Но они имеют недостатки, что в некоторых случаях их не стоит использовать. Например, в методах объектов.
О всех недостатках и случаях, читайте подробнее в статье.
Ссылка на статью
#js
Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис.
Но они имеют недостатки, что в некоторых случаях их не стоит использовать. Например, в методах объектов.
О всех недостатках и случаях, читайте подробнее в статье.
Ссылка на статью
#js
Docusaurus — это генератор статических сайтов, который позволяет создавать красивые сайты с документацией без особых усилий. Он основан на React и его богатой экосистеме.
Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов.
Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем.
Ссылка на официальный сайт
#инструменты
Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов.
Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем.
Ссылка на официальный сайт
#инструменты
👍7👎1
Remotion - это библиотека для создания видео в React приложениях. Она позволяет создавать визуальные эффекты с помощью canvas, CSS, SVG и WebGL и объединять их в видео.
Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода!
Советуем ознакомиться с документацией, чтобы понять, как это работает.
Ссылка на официальный сайт
#react
Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода!
Советуем ознакомиться с документацией, чтобы понять, как это работает.
Ссылка на официальный сайт
#react
👍4
3D карусель
Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу.
Сохраняйте в закладки!
Ссылка на CodePen
#дизайн
Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу.
Сохраняйте в закладки!
Ссылка на CodePen
#дизайн
👍5
NGINX
Как фронтенд-разработчику, вам будет полезно знать что такое NGINX.
Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс".
Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым.
Более подробно о принципе его работы читайте в статье.
Ссылка на статью
#статьи
Как фронтенд-разработчику, вам будет полезно знать что такое NGINX.
Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс".
Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым.
Более подробно о принципе его работы читайте в статье.
Ссылка на статью
#статьи
Эффект печатающей машинки
Эффект печатающей машинки - очень популярная анимация, для которой существует не мало способов создания.
В статье представлено несколько демо с реализацией:
- на чистом CSS;
- c помощью CSS и JavaScript;
- с помощью библиотек.
Ссылка на статью
#css
Эффект печатающей машинки - очень популярная анимация, для которой существует не мало способов создания.
В статье представлено несколько демо с реализацией:
- на чистом CSS;
- c помощью CSS и JavaScript;
- с помощью библиотек.
Ссылка на статью
#css
❤3