This media is not supported in your browser
VIEW IN TELEGRAM
Примеры использования WebShare API
https://blog.logrocket.com/implementing-advanced-features-navigator-share-api/
https://blog.logrocket.com/implementing-advanced-features-navigator-share-api/
👍24
Создание SVG через код
25 примеров, которые помогут вам ближе познакомиться с созданием SVG через код. Автор проведет вас через все функциональные возможности от простого к сложному.
https://svg-tutorial.com/
25 примеров, которые помогут вам ближе познакомиться с созданием SVG через код. Автор проведет вас через все функциональные возможности от простого к сложному.
https://svg-tutorial.com/
👍13🔥7
Вам не нужен JS для этого
Несколько примеров того, когда стоит применять правило использования более простых технологий:
▫️переключатель чекбокса
▫️ввод с подсказкой
▫️аккордеон
и еще несколько случаев, когда можно обойтись без JS.
https://www.htmhell.dev/adventcalendar/2023/2/
Статья кстати из HTML Hell адвент календаря, где каждый день декабря выходит новая статья о веб разработке.
Несколько примеров того, когда стоит применять правило использования более простых технологий:
▫️переключатель чекбокса
▫️ввод с подсказкой
▫️аккордеон
и еще несколько случаев, когда можно обойтись без JS.
https://www.htmhell.dev/adventcalendar/2023/2/
Статья кстати из HTML Hell адвент календаря, где каждый день декабря выходит новая статья о веб разработке.
👍31❤1
Как работают JS Promise
Туториал для начинающих.
https://www.freecodecamp.org/news/javascript-promise-object-explained/
Туториал для начинающих.
https://www.freecodecamp.org/news/javascript-promise-object-explained/
🔥9👍4
Eleventy vs NextJS
Сравниваем 2 фреймворка для генерации статических сайтов: перфоманс, сложность работы, фичи и другие аспекты.
https://blog.logrocket.com/eleventy-vs-next-js-static-site-generation/
Сравниваем 2 фреймворка для генерации статических сайтов: перфоманс, сложность работы, фичи и другие аспекты.
https://blog.logrocket.com/eleventy-vs-next-js-static-site-generation/
👍15🤣5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем сложную анимацию на ThreeJS
Красивый эффект реагирующий на движение мыши.
Demo | Github
https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/
Красивый эффект реагирующий на движение мыши.
Demo | Github
https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/
👍28👎2❤1
Пример реализации инпута для одноразовых паролей
https://chriscoyier.net/2023/12/04/html-css-for-a-one-time-password-input/
https://chriscoyier.net/2023/12/04/html-css-for-a-one-time-password-input/
👍19❤1
16 впечатляющих игр на чистом CSS
Демо и исходники прилагаются.
https://www.frontendplanet.com/css-game-examples/
Демо и исходники прилагаются.
https://www.frontendplanet.com/css-game-examples/
👍16
10 советов по оптимизации производительности приложений
Краткие советы с ссылками на подробные ресурсы.
https://calendar.perfplanet.com/2023/ten-optimisation-tips-for-an-initial-web-performance-audit/
Краткие советы с ссылками на подробные ресурсы.
https://calendar.perfplanet.com/2023/ten-optimisation-tips-for-an-initial-web-performance-audit/
❤12👍5
Используем CSS Subgrid для создания продвинутой разметки
https://blog.logrocket.com/designing-advanced-layouts-with-css-subgrid/
https://blog.logrocket.com/designing-advanced-layouts-with-css-subgrid/
👍13❤1
Линтер Oxlint
Простой линтер, не требующий конфигурации, основная цель которого поиск ошибочного или неиспользуемого кода.
https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
Простой линтер, не требующий конфигурации, основная цель которого поиск ошибочного или неиспользуемого кода.
https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
🔥14👍2🤔2❤1🤡1
Тестирование JavaScript c помощью Jest
Вводный курс за 1 час.
https://www.youtube.com/watch?v=IPiUDhwnZxA&ab_channel=freeCodeCamp.org
Вводный курс за 1 час.
https://www.youtube.com/watch?v=IPiUDhwnZxA&ab_channel=freeCodeCamp.org
💩10👍5👎2
TypeScript фичи, которые повысят уровень вашей разработки
https://medium.com/@hamsterhomka/e40a3424fa50
https://medium.com/@hamsterhomka/e40a3424fa50
❤16🤨1
HTML и CSS ошибки, влияющие на доступность
4 статья из цикла про разработку приложений с учетом опыта незрячих пользователей.
https://habr.com/ru/companies/ruvds/articles/776392/
4 статья из цикла про разработку приложений с учетом опыта незрячих пользователей.
https://habr.com/ru/companies/ruvds/articles/776392/
👍13❤4
Используем Github Pages для хостинга NextJs приложения
Простой туториал по конфигурации Github Pages и NextJs.
https://www.viget.com/articles/host-build-and-deploy-next-js-projects-on-github-pages/
Простой туториал по конфигурации Github Pages и NextJs.
https://www.viget.com/articles/host-build-and-deploy-next-js-projects-on-github-pages/
❤10👍3
Веб компонент снежинок
Честно говоря, веб компоненты используются не особо широко в современной разработке из-за своей сложности и проблем с поддержкой.
Но на простом примере, как этот, можно посмотреть кейсы, где их удобно применять и как реализовывать.
https://www.zachleat.com/web/snow-fall/
Честно говоря, веб компоненты используются не особо широко в современной разработке из-за своей сложности и проблем с поддержкой.
Но на простом примере, как этот, можно посмотреть кейсы, где их удобно применять и как реализовывать.
https://www.zachleat.com/web/snow-fall/
👍19❤1🥰1
Псевдоклассы :user-valid и :user-invalid
Улучшаем нативную валидацию полей при помощи селекторов псевдоклассов, которые применяются к полям, которые были изменены пользователем, в отличии от :valid и :invalid.
https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes?hl=ru
Улучшаем нативную валидацию полей при помощи селекторов псевдоклассов, которые применяются к полям, которые были изменены пользователем, в отличии от :valid и :invalid.
https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes?hl=ru
👍29❤3🌭2🔥1
Пишем змейку на JS
Начинаем год с разработки браузерной змейки в ретро стиле на JS + CSS.
https://www.youtube.com/watch?v=uyhzCBEGaBY
Начинаем год с разработки браузерной змейки в ретро стиле на JS + CSS.
https://www.youtube.com/watch?v=uyhzCBEGaBY
❤25🔥9👍1
Архитектурный паттерн Dependency Injection в React-приложении
В статье рассказывается какой профит можно получить, используя паттерн DI и как его внедрить в свое приложение.
https://habr.com/ru/companies/tinkoff/articles/540662/
В статье рассказывается какой профит можно получить, используя паттерн DI и как его внедрить в свое приложение.
https://habr.com/ru/companies/tinkoff/articles/540662/
👍15💩7❤3❤🔥1