Серия из 51 обучающего видео про основы JavaScript от разработчиков из Microsoft:

https://tprg.ru/FxV0

Видео короткие. Удобно для тех, кто хочет не нырять в обучение с головой и получать новые знания дозировано:

#javascript

Визуализируем кодовую базу с помощью сервиса CodeSee

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

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

Попробовать можно тут:

https://www.codesee.io/

​С сегодняшнего дня Vue 3 становится версией по умолчанию

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

Что именно меняется и на что может повлиять, можно узнать здесь:

https://blog.vuejs.org/posts/vue-3-as-the-new-default.html

#фронтенд #vue

​Методы обхода защиты приложений VueJS

К сожалению, VueJS не идеален и имеет свои недостатки. Один из них — уязвимость для XSS атак. В этой статье вы узнаете какими способами обычно обходят защиту, чтобы своевременно устранить возможные уязвимости:

https://webdevblog.ru/metody-obhoda-zashhity-prilozhenij-vuejs/

#фронтенд #vue

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

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

Для этого нам понадобится немного 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