​Прокачиваем навыки владения JavaScript всего за 30 дней

Если вы хотите быстро освоиться с JavaScript, но вам не хватает мотивации или вдохновения для выдумывания себе задач, то обратите внимание на челлендж javascript30. Здесь вы бесплатно сможете поучаствовать в 30-дневном испытании, которое ежедневно будет предоставлять вам новое задание.

Если хотите проверить свои силы в короткий срок, то вам сюда:

https://javascript30.com/

#javascript

​Использование PostCSS с медиазапросами

Медиа-запросы предоставляют разработчикам мощный способ обеспечить оптимальное взаимодействие с веб-сайтом для посетителей независимо от типа или размера устройства пользователя. Используя PostCSS, можно реализовать медиазапросы ещё более эффективно. PostCSS может выполнять множество задач, таких как анализ CSS, преобразование будущего синтаксиса CSS, отображение встроенных изображений и поддержка миксинов и переменных.

Подробнее:

https://blog.logrocket.com/using-postcss-media-queries-level4/

#фронтенд #css #postcss

​​Как выглядит any в TypeScript:

​Как попасть в IT, не становясь программистом

В новом выпуске подкаста Frontend Weekend Андрей Смирнов встретился с Артёмом Малышевым, автором другого популярного подкаста «Мы обречены». Артём невероятно креативен и талантлив – вместе с Филом Ранжиным они придумали множество шоу, в которых Артём как продюсер грамотно реализовал потенциал людей вокруг себя.

Смотрим и слушаем тут:

https://www.youtube.com/watch?v=WQI3pT1gQlY

#подкаст

​Создание, тестирование и деплой одностраничного приложения с помощью Vue 3 + Vite и Pinia

В этом руководстве подробно описаны шаги по созданию функционального примера одностраничного приложения книжного магазина с использованием Vue 3 и запуска его с помощью Vite. Оно также включает подробности о том, как добавить управление состоянием с помощью Pinia (альтернатива Vuex) и маршрутизацию с помощью Vue Router .

https://dev.to/andreirusu_/create-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia-5097

#vue #spa #pinia #vite

​11 исходных программ JavaScript, предоставляющих шаблоны проектирования

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

В этой статье вы найдёте 11 исходных программ, содержащих полезных шаблонов, которые пригодятся вам в самых разных ситуациях:

https://nuancesprog.ru/p/15565/

#javascript

​Вот чего вы не знали о :where()

На первый взгляд использование :where() может оказаться надуманным и усложняющим разработку. В неумелых руках этот псевдокласс действительно может сделать читаемость стилей хуже. Однако, есть ряд ситуаций, когда он оказывается действительно кстати. Подробности в статье:

https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/

#фронтенд #css

Это пока клиенты тоже человеки

​Devices.css — полезная библиотека для демонстрации мобильных продуктов

Эта небольшая библиотека, использующая чистый CSS позволит продемонстрировать возможности мобильного приложения прямо у вас на сайте. Она добавляет блок с внешним видом мобильного устройства, в котором можно разместить необходимые изображения или даже встроить приложение.

Подробнее можно узнать на странице проекта:

https://github.com/picturepan2/devices.css

#библиотека #css

​Где учить React в 2022 году

Начав изучать React, вы можете столкнуться с тем, что объяснения в официальной документации могут быть не всегда достаточно понятными, а при попытке найти альтернативные источники может пойти кругом голова от их обилия. Тем более стоит учитывать, что далеко не все материалы могут оказаться полезными, а иногда и вовсе могут навредить, заложив неправильный фундамент.

В этой статье вы найдёте качественные источники, проверенные временем и опытными разработчиками, не только по React, но и по JavaScript, а также по смежным технологиям:

https://blog.openreplay.com/where-to-learn-react-js-in-2022-a-list-of-resources-for-new-developers

#javascript #react

​Formik — лёгкий способ создать сложную форму обратной связи

Formik является наиболее популярной библиотекой с открытым исходным кодом для React и React Native. Она позволяет создавать самые разные формы с возможностью отслеживания значений, ошибок или посещённых полей, а также организации проверки и отправки данных.

Подробности:

https://formik.org/

#библиотека #react

​Пятница: *наступает*
Я:

​Пишем NFT модульный синтезатор на JavaScript

Вы ещё не работали с NFT? Тогда мы идём к вам! А точнее предлагаем вам статью, которая поможет узнать NFT не понаслышке, получить новый опыт, а может, кто знает, и новый источник дохода.

Все подробности тут:

https://habr.com/ru/post/645467/

#nft #javascript

​Что плохого в react-router?

На сегодняшний день react-router — это, можно сказать, монополист в мире React. Если в проекте нужен роутинг, то скорее всего выбор падет именно на эту библиотеку. Однако, автору этой статьи не давали покоя некоторые его нюансы, поэтому он решил написать собственное решение, которое продолжает успешно применять и сегодня.

О том, чем же react-router всё-таки не угодил и как быть с этим, читайте в статье:

https://habr.com/ru/post/599347/

#react

JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap

Если вам необходимо создать диаграмму, то DgrmJS отличный вариант. Он прост, выполнен на vanillaJS, имеет открытый исходный код, а весит при этом меньше bootstrap.

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

https://habr.com/ru/post/648759/

#javascript #svg

​Библиотека ng2-charts для Angular

Продолжаем знакомить вас с полезными библиотеками на все случаи жизни. На очереди у нас библиотека, имеющая более двух тысяч звёзд на GitHub, которая даёт необходимые директивы для создания шести видов графиков на основе Chart.js.

Познакомиться подробнее можно тут:

https://valor-software.com/ng2-charts/

#библиотека #angular

​Современные методы получения данных API в React

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

Это руководство рассматривает современные способы извлечения данных в React, а также их обработки:

https://blog.logrocket.com/modern-api-data-fetching-methods-react/

#react #api

Красивая SVG-анимация страницы 404

Предлагаем вашему вниманию вариант оформления страницы 404, выполненный с помощью SVG. Посмотреть, как реализован этот проект можно тут:

https://codepen.io/brookjordan/pen/XNgmGq

#codepen

​Команды и сочетания клавиш NPM, которые нужны каждому JavaScript-разработчику

Знаете ли вы, что с помощью NPM можно выполнять удивительные действия, которые помогут вам ускорить разработку вашего приложения? Если хотите лучше разбираться в NPM и его возможностях, то вам сюда:

https://blog.bitsrc.io/the-most-pertinent-npm-commands-and-shortcuts-you-should-know-as-javascript-developer-d84e34f6fe32

#npm #javascript