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

WebDEV #инструменты #css

💡 Используйте Content Delivery Network

Когда пользователь географически находится далеко от сервера, задержка ответа растет. Более того, загрузка запроса также может повлиять на время обслуживания контента.

Скорость загрузки содержимого фронтенда, включая HTML-страницы, таблицы стилей, файлы JavaScript и изображения, может быть оптимизирована при помощи CDN.

Content delivery network (CDN) (англ. «сеть доставки содержимого») — это группа серверов, распределенных по нескольким географическим локациям. На этих серверах хранятся кэшированные версии контента, которые можно быстро отправить пользователю.

CDN перенаправляет запросы пользователя на ближайший сервер.

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

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Modern CSS: Master the Key Concepts of CSS for Modern Web Development.

2. CSS Scan сильно упрощает просмотр ваших любимых веб-сайтов.

3. Используйте Content Delivery Network.

WebDEV #test #typescript

Выберите правильный вариант 👇🏼

💡 Итог советов по оптимизации времени загрузки сайта

Золотое правило: 80-90% времени, которое требуется на ответ конечному пользователю, тратится на загрузку таких компонентов фронтенда, как изображения, таблицы стилей, скрипты и т. п.

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

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

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

WebDEV #советы #web

React Testing Library

В данном видеокурсе рассматривается тестирование React-компонентов с помощью библиотеки react-testing-library. Разбирается её философия, плюсы и минусы. А так же основные отличия от Enzyme в подходе к тестированию.

📺 YouTube

WebDEV #видео #React

🛠 Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне. Вместо того чтобы писать код для нескольких произвольных брейкпоинтов (контрольных точек), возможно создать дизайн, где элементы масштабируются плавно и пропорционально.

WebDEV #инструменты #web

💡 Что такое стиль оформления кода

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

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

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

WebDEV #советы #js

🔥 Лучшее на канале за неделю

1. React Testing Library.

2. Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне.

3. Итог советов по оптимизации времени загрузки сайта.

WebDEV #test #typescript

Выберите правильный вариант 👇🏼

💡 Важность стилей

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

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

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

WebDEV #советы #js

📖 Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
🖋 Bruce Johnson, 2019

Visual Studio Code, бесплатный кросс-совместимый редактор исходного кода с открытым исходным кодом, является одним из самых популярных вариантов для веб-разработчиков. Он быстрый, легкий, настраиваемый и содержит встроенную поддержку расширений JavaScript, Typescript и Node.js для других языков, включая C++, Python и PHP. Такие функции, как возможность отладки, встроенный элемент управления Git, выделение синтаксиса, сниппеты кода и поддержка интеллектуального автозавершения кода IntelliSense помогают сделать Visual Studio Code впечатляющим готовым решением. Данная книга поможет вам освоиться и стать наиболее продуктивным в работе с VS Code.

💾 Скачать книгу

WebDEV #book #VSCode

🛠 Glassmorphism — эффект основан на размытии фона с прозрачностью и для демонстрации глубины и контекста интерфейса использует уложенные слои.

WebDEV #инструменты #web

💡 Стандарты написания кода

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

Крупные организации публикуют свои стандарты для общего пользования. Два самых известных стандарта написания JavaScript-кода — от Google и от AirBnb.

Стили, которых я придерживаюсь, очень напоминают стили AirBnb, поскольку именно к ним я привык в компаниях, в которых работал. Если вы предпочитаете другой стандарт, используйте его. Главное — придерживаться какого-то одного набора правил в рамках одного проекта.

Вы также можете использовать такие инструменты, как ESLint или Prettier. Они обнаруживают нарушения правил, определенных в настройках, и принудительно приводят код в соответствие со стандартом.

WebDEV #советы #js

🔥 Лучшее на канале за неделю

1. Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers.

2. Glassmorphism — эффект основан на размытии фона с прозрачностью и для демонстрации глубины и контекста интерфейса использует уложенные слои.

3. Стандарты написания кода.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Стили написания имен методов, функций и переменных

Имена функций и переменных могут писаться в разных стилях.

Наиболее известны следующие:

— camelCase («верблюжий регистр»). Слова, из которых состоит имя переменной, пишутся слитно, без пробелов, а каждое отдельное слово пишется с большой буквы. Самая первая буква имени остается строчной. Например, функцию для управления аккаунтом можно назвать accountManagement.
— PascalCase. Здесь тоже все слова объединяются и каждое новое пишется с заглавной буквы. Но, в отличие от camelCase, первая буква тоже заглавная. Имя той же функции для управления аккаунтом, написанное в PascalCase, будет AccountManagement.
— snake_case (змеиный регистр»). Все слова пишутся строчными буквами и разделяются символами подчеркивания. Имя нашей функции-примера в змеином регистре будет account_management.

Продолжение следует...

WebDEV #советы #js

HTML in 100 Seconds

Готовы создать свой первый веб-сайт? HTML — один из основных строительных блоков Интернета. Изучите историю HTML и то, как он используется для структурирования веб-страницы.

📺 YouTube

WebDEV #видео #html