​Бесплатный курс по web-технологиям для тех, кто хочет научиться создавать веб-сайты

Если хотите начать разбираться в веб-технологиях, то обратите внимание на этот курс на Stepik от VK Team. Он бесплатен, при этом содержит 18 часов видеолекций, а также 61 тест и 9 интерактивных задач для закрепления знаний. Вы познакомитесь, как с вёрсткой, так и работой протоколов HTTP и серверов:

https://stepik.org/course/154/promo

#курс

​Аналоговые часы с помощью HTML-элемента <time>

Интересная статья о том, как создать программируемые аналоговые часы на CSS. Этот способ позволяет CSS получать значение времени из HTML-элемента <time>.

Как это работает можно посмотреть здесь:

https://matemarschalko.medium.com/set-the-css-only-clock-with-the-html-time-element-7c2067c02cd3

#html #css

​Валидация форм с помощью Constraint Validation API

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

Как это делать правильно и эффективно, рассказывают тут:

https://blog.openreplay.com/form-validation-using-javascript-s-constraint-validation-api

#javascript

​Изучение Vue.js в 2022 году: дорожная карта разработчика

Первое, что нужно понять, так это то, что начинать изучение Vue или его аналога стоит только тогда, когда вы будете достаточно хорошо знать JavaScript. Если вы считаете, что уже достаточно изучили и готовы к изучению фреймворка, то держите дорожную карту с разбором каждого пункта:

https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/

#vue

​Шаблоны архитектуры React для ваших проектов

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

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

https://blog.openreplay.com/react-architecture-patterns-for-your-projects

#react

​Три способа скрыть сайт от поиска Google

Зачастую сайт наоборот пытаются продвинуть как можно выше в поисковой выдачи. Но случается и так, что необходимо оставить информацию о сайте недоступной поисковому сервису. Как тогда быть?

Существует сразу несколько способов о которых рассказали в этой статье:

https://apix-drive.com/ru/blog/useful/tri-sposoba-skryt-sajt-ot-poiska-google

​Как не нужно учить TypeScript: 5 распространенных ошибок

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

О других ошибках рассказали тут:

https://proglib.io/p/kak-ne-nuzhno-uchit-typescript-5-rasprostranennyh-oshibok-2022-01-22

#typescript

​Как создать приложение вокруг Composition API во Vue 3

Уже больше года прошло с выхода Vue 3 с Composition API. Сейчас синтаксис script setup стал рекомендуемым способом создания нового проекта на Vue.

Эта статья призвана показать интересные фишки Composition API и то, как структурировать приложение вокруг него:

https://tproger.ru/articles/kak-sozdat-prilozhenie-vokrug-composition-api-vo-vue-3/

#фронтенд #vue

Создаём анимацию, привязанную к скроллу страницы на чистом JavaScript

Вы наверняка видели сайты, где при прокрутке вся страница начинает меняться прямо на глазах. Например, Apple любит делать обзор своих продуктов именно таким образом.

Здесь вы научитесь создавать страницы не хуже, чем у Apple:

https://css-tricks.com/scroll-triggered-animation-vanilla-javascript/

#фронтенд #javascript

Иконки соцсетей с всплывающими поп-апами

Проект выполнен на чистом HTML и CSS, поэтому вы можете использовать его независимо от библиотеки или фреймворка, который используете при вёрстке фронтенда. А ещё можно пойти дальше и создать готовый компонент под ваши задачи.

Изучить код проекта можно тут:

https://codepen.io/abdelrhmansaid/pen/OJRNOpQ

#codepen

​Я: собираю всю волю в кулак, чтобы продуктивно поработать и написать кучу качественно кода

Моя воля после 10 строк кода:

​Создание компонента переключения темы

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

https://web.dev/building-a-theme-switch-component/

А если не хотите читать, то можно посмотреть видеоверсию.

​Что такое Agile и какие альтернативы существуют

Если открыть HeadHunter и посмотреть, что обычно пишут в требованиях к кандидатам в разработчики, то часто можно встретить слов Agile. Для человека, который только начинает свою карьеру в IT это слово ни о чем не говорит.

Так вот, Agile — это методология, вернее даже несколько методологий, где процесс разработки организуется определённым образом. Это помогает совершать меньше ошибок, лучше распределять нагрузку и в целом позитивно влияет на работу команды.

Подробнее об Agile можно прочитать здесь:

https://doka.guide/tools/agile/

​Можно ли подключиться к базе данных с помощью CSS

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

А другой пользователь посчитал шутку не смешной и решил доказать, что это вполне возможно. Вот, что у него получилось в итоге:

https://tprg.ru/N3Kj

#css

​5 частых ошибок при использовании Promise

Промисы — это мощный и полезный инструмент, который позволяет нам удобно работать с асинхронными операциями без необходимости создавать ад коллбэков. Но и им нужно уметь пользоваться, ведь работая с асинхронным кодом неправильно, можно столкнуться с очень неожиданным поведением.

Часто можно встретить именно эти 5 ошибок:

https://www.cat-in-web.ru/5-promises-mistakes/

#javascript

И даже 10 лет спустя

​Как использовать Fetch с async/await

Хотя fetch() прост в использовании, есть некоторые нюансы, которые стоит знать. В данном случае предлагаем вам посмотреть, как работает fetch() с async/await синтаксисом.

Подробнее:

https://dmitripavlutin.com/javascript-fetch-async-await/

#javascript

Камень-ножницы-бумага на чистом CSS

Изучите возможности CSS с помощью игры камень-ножницы-бумага, созданной без использования JavaScript. При этом компьютер не будет выбирать каждый раз один и тот же вариант. Как это сделано можно узнать тут:

https://codepen.io/alvaromontoro/pen/BaaBYyz

#codepen #css

​Как тестировать компоненты React

При тестировании компонентов с помощью Jest, вы можете столкнуться с ситуацией, когда компоненты по какой-то причине выходят из строя при рендеринге. Дело в том, что для компонента в тесте необходимо находиться в определённой среде.

Как её правильно настроить для правильного тестирования компонентов без проблем, рассказали здесь:

https://javascript.plainenglish.io/how-to-test-react-components-2eff11d8cd75

#react

​Удаляем неиспользуемый CSS с помощью PurgeCSS

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

В этом случае на помощь приходит PurgeCSS — один из нескольких инструментов, которые помогают держать ваши стили под контролем. Подробнее:

https://blog.logrocket.com/purgecss-remove-unused-css-code/

#css