...посмотреть мой компьютер? Что-то греться стал

​Как создать многопользовательскую игру в реальном времени с нуля

Для этого нам понадобится немного HTML и CSS, горстка JavaScript-кода, охапка библиотек и Svelte в качестве вишенки на торте. Если все ингредиенты у вас готовы, то дело за малым — открывайте статью и следуйте рецепту:

https://www.smashingmagazine.com/2021/10/real-time-multi-user-game/

#html #css #javascript #svelte

​6 принципов создания производительных веб-приложений

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

Подробнее об этих и других аспектах создания производительного сайта тут:

https://nuancesprog.ru/p/14998/

​Организация отступов в вёрстке

Первое на чём спотыкается неопытный фронтенд-разработчик во время вёрстки — организация отступов для элементов сайта. Правильное обращение с margin и padding играет очень большую роль в этом деле.

Эта статья поможет вам разобраться в главных принципах организации отступов:

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

#фронтенд

​Библиотека Floating UI

Эта легковесная JavaScript-библиотека позволит вам без труда настроить позиционирование самых разных всплывающих элементов — от тултипов до дропдаунов. Забирайте к себе в закладки и используйте с удовольствием.

https://floating-ui.com/

#библиотека

JavaScript, что ты такое?!

​Бесплатный курс по 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