Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

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

https://ui.dev/why-react-renders

👉 @frontend_1

rem vs em - все, что нужно знать

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

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

В этой статье мы рассмотрим все, что связано с em и rem, их различия, когда и как их использовать, а также практические примеры использования em и rem в действии. К концу статьи вы должны иметь четкое представление об обоих значениях. Без лишних слов перейдем непосредственно к делу.

https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342

👉 @frontend_1

Шпаргалка по HTML, CSS и JavaScript

Здесь вы можете найти примеры кода HTML, CSS и JavaScript. Каждый пример имеет пояснение. Подобная шпаргалка.

https://htmlcheatsheet.com/js/

👉 @frontend_1

Theme toggles

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

https://github.com/AlfieJones/theme-toggles

👉 @frontend_1

Javascript: базовые вопросы и понятия для самых маленьких

Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?

В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.

https://habr.com/ru/companies/lanit/articles/718130/

👉 @frontend_1

JavaScript для самых маленьких. Часть 2

Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript.

https://habr.com/ru/companies/lanit/articles/733064/

👉 @frontend_1

50+ ChatGPT промтов для веб-разработчиков

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

В этой статье мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. Здесь вы найдете все, что нужно, чтобы максимально эффективно использовать ИИ в качестве веб-разработчика: от изучения концепций в качестве новичка до подготовки к собеседованиям.

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знали, что мы можем легко добавить пользовательские проверки в форме HTML 🤩

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы, что мы можем легко определить, поддерживается ли функция CSS в браузере или нет, и применить резервные стили, если они не поддерживаются? 🤩

👉 @frontend_1

11 этапов становления JavaScript Full-Stack инженера

За последний год я получил множество сообщений, в основном от новичков, только что окончивших вуз и вступивших в мир программирования. Большинство вопросов касаются того, как быстро повысить свою квалификацию, как стать Full Stack Developer или как выбрать направление карьеры.

Хотя я стараюсь отвечать каждому по отдельности, я хочу объединить свой собственный опыт и создать дорожную карту, как стать Full-Stack инженером, которой я хочу поделиться со всеми.

https://dev.to/paulknulst/11-stages-to-become-a-javascript-full-stack-engineer-ngm

👉 @frontend_1

HTML, CSS, PHP: полная шпаргалка

https://bookflow.ru/html-css-php-polnaya-shpargalka-cheat-sheet/

👉 @frontend_1

React: революция использования фигурных скобочек

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

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

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

function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}

loadClient()
}, [clientId])

return [loadedClient, isLoading]
}

https://habr.com/ru/articles/727542/

✍️ @React_lib

Экосистема JavaScript восхитительно странная

Заметьте, я не говорю, что JavaScript странный, хотя он, безусловно, странный. Но суть этой статьи не в этом.
Потерпите, вместо того чтобы начать с того, как странна экосистема JavaScript, я начну с того, почему экосистема JavaScript странная.

https://fly.io/blog/js-ecosystem-delightfully-wierd/

👉 @frontend_1

Совет по CSS 💡

Легко изменить стиль текста заполнителя 🤩

👉 @frontend_1

Совет по HTML 💡

Возможно, вы не знали об этом элементе HTML 🤩

👉 @frontend_1

Совет по производительности в Интернете 💡

Предварительная выборка ресурсов следующих возможных страниц для более быстрой навигации 🚀

👉 @frontend_1

100 современных CSS-кнопок. Все стили, которые вы можете себе представить.

https://ui-buttons.web.app/

👉 @frontend_1

Интересные трюки HTML, CSS и JS

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.

https://habr.com/ru/companies/ruvds/articles/731960/

👉 @frontend_1

Интересные трюки JS, HTML и CSS, #2

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

Предыдущая часть здесь.

В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking .com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.

https://habr.com/ru/companies/ruvds/articles/748950/

👉 @frontend_1

Расширенные функции JavaScript для повышения качества кода

В этой статье я расскажу, как использовать некоторые встроенные возможности для создания наиболее мощных функций, которые повышают производительность и делают код более красивым. Я расскажу о функциях Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit и Zip, которые можно сохранить в служебном файле/классе, чтобы оптимизировать качество кода как разработчика JavaScript.

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

https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/

👉 @frontend_1