​Практический пример использования CSS Layer

Держите понятный пример правильного использования CSS Layer. Теперь вы будете наверняка знать, когда его стоит применить:

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

#фронтенд #css

​React Drag & Drop: «Игра в бутылки»

Да, на праздниках многие играют в другую игру с бутылками, но и с пользой проводить время тоже нужно. Держите руководство по созданию головоломки из Гарри Поттера на React. Вы сможете реализовать не только логику игры, но и красивый дизайн и интересный UI.

https://habr.com/ru/company/kts/blog/647241/

#react

И ведь не пофиксишь

​Резиновая вёрстка: универсальная сетка под все брейкпоинты, примеры и правила

Благодаря этой статье дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. А верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток. Убедитесь сами:

https://tproger.ru/articles/rezinovaja-verstka-universalnaja-setka-pod-vse-brejkpointy-primery-i-pravila/

#фронтенд

​Как использовать nextTick() в Vue

Изменение данных компонента Vue (реквизиты или состояние) не сразу отражается в DOM. Скорее, Vue обновляет DOM асинхронно. Вы можете поймать момент, когда Vue обновляет DOM, используя Vue.nextTick() или vm.$nextTick() функции. 

Давайте подробно рассмотрим, как работают эти функции:

https://dmitripavlutin.com/vue-next-tick/?utm_campaign=how-to-use-nexttick-in-vuenexttick

#vue

Легаси-код в наследство

​Как наглядно понять работу Kubernetes?

Ну, например, можно настроить управление им в Minecraft и смотреть какие процессы при этом происходят на примере окружения и животных. Звучит безумно? А выглядит ещё безумнее:

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

#видео #devops #kubernetes

​Как инженеру не умереть со скуки во фронтенде?

В новом выпуске подкаста Frontend Weekend Андрей Смирнов пообщался с Полиной Гуртовой, фронтенд-разработчиком компании «Злые Марсиане» и обсудил, сложный ли фронтенд или его просто усложняют ради веселья разрабов, а также остановился ли он в своём развитии и имеет ли ещё место быть Hype Driven Development.

Смотрим:

https://youtu.be/5e2Pma2b2yQ

#видео #подкаст

​NoJS — делаем калькулятор с использованием только чистого HTML и CSS

Самый логичный способ создания калькулятора, работающего на веб-странице — JavaScript, верно? Но автор этой статьи явно не ищет легких путей, поэтому сделал калькулятор с помощью чистых HTML и CSS (даже без препроцессоров), используя радио-кнопки, хитрость и немного магии.

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

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

Анимация логотипа GitHub на CSS

Эта анимация выполнена без использования JavaScript. Вместо этого все элементы написаны на HTML-препроцессоре Pug, а сама анимация настроена в CSS-препроцессоре Stylus.

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

https://codepen.io/toshiya-marukubo/pen/qBPryZb

#codepen #css

​Мой типичный рабочий день:

​Является ли Bun следующим значительным достижением после WebPack?

Недавно был представлен новый игрок экосистемы инструментов JavaScript  —  bun. Он призван сделать разработку JavaScript еще быстрее. Этот инструмент можно назвать всеобъемлющим: он не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование.

Обзор этого многообещающего инструмента тут:

https://nuancesprog.ru/p/15623/

#bun #javascript

​3 способа стилизации эффектов CSS с помощью box-shadow

В настоящее время недостаточно того, чтобы веб-сайт выполнял свою работу — он должен отправлять пользователя в путешествие, эстетически приятное путешествие по оттенкам, шрифтам и всему остальному. И тени играют в этом важную роль! В этой статье вы познакомитесь с возможностями свойства box-shadow и научитесь создавать слоистые, неоновые и неоморфные тени:

https://blog.logrocket.com/three-ways-style-css-box-shadow-effects/

#css #фронтенд

​Как использовать математические функции CSS

Логические функции CSS calc(), clip(), min() и max() поддерживаются всеми современными веб-браузерами. Но, несмотря на то, что они легко доступны, простой поиск на GitHub говорит нам о том, что внедрение этих функций идет медленно.

Давайте познакомимся с ними ближе, чтобы начать использовать в своих проектах:

https://stackdiary.com/css-math-functions/

#css

​Как в JavaScript добавляются новые функции

JavaScript не принадлежит какой-то одной организации или юридическому лицу. ECMA (Европейская ассоциация производителей компьютеров) — это организация, которая продвигает стандарты информационных технологий и бытовой электроники. TC39, является частью ECMA. Именно они отвечают за стандартизацию и поддержку JavaScript. В него входят разработчики, ученые, сотрудничающие с сообществом.

Но добавить новый стандарт — только полдела, необходимо, чтобы он был внедрён во все браузеры и платформы. О том, как это всё реализовано, читайте в статье:

https://tprg.ru/97dg

#javascript

А когда обратно уменьшаешь, то становится только хуже

​​Улучшение Visual Studio Code для новичков

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

Но иногда расширения могут быть излишними, ведь VSCode обладает гибкими настройками, которые при должном умении сильно расширяют базовые возможности.

Подробнее обо всём в статье:

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

#vscode

10 антипаттернов React, которых следует избегать

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

В этом руководстве вы рассмотрите 10 антипаттернов в React, а также советы и рекомендации по улучшению вышего кода.

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

#видео #react

​Динамическая типизация — вещь непредсказуемая: