Улучшаем производительность сайта с помощью CSS
Всем привет, я Кирилл, frontend разработчик компании Usetech. Сегодня я бы хотел поговорить о том, как можно улучшить производительность сайта с помощью обычных CSS свойств и на что стоит обращать внимание. Но прежде чем приступим к улучшению производительности сайта, давайте поговорим о том, какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый <link> и @ import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
Следующие советы помогут вам оптимизировать ваш CSS код.
https://habr.com/ru/companies/usetech/articles/718200/
👉 @frontend_1
Всем привет, я Кирилл, frontend разработчик компании Usetech. Сегодня я бы хотел поговорить о том, как можно улучшить производительность сайта с помощью обычных CSS свойств и на что стоит обращать внимание. Но прежде чем приступим к улучшению производительности сайта, давайте поговорим о том, какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый <link> и @ import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
Следующие советы помогут вам оптимизировать ваш CSS код.
https://habr.com/ru/companies/usetech/articles/718200/
👉 @frontend_1
👍10
Полное понимание асинхронности в браузере
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.
https://habr.com/ru/companies/yandex/articles/718084/
👉 @frontend_1
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.
https://habr.com/ru/companies/yandex/articles/718084/
👉 @frontend_1
👍8
Три атрибута для создания лучших веб-форм
Формы в Интернете - это возможность значительно улучшить пользовательский опыт, приложив при этом совсем немного усилий. Эти усилия могут заключаться в добавлении небольшого количества скромных HTML-атрибутов. Но в результате пользователь может получить эффект ускорения, позволяющий ему быстрее справиться с поставленной задачей.
Это особенно актуально для мобильных устройств, где людям приходится заполнять формы с помощью виртуальной клавиатуры. Любое улучшение, которое можно внести в процесс заполнения, заслуживает внимания. Но не волнуйтесь: вам не нужно добавлять сложную библиотеку JavaScript или писать запутанный код. Хорошо написанный HTML поможет вам в этом.
https://adactio.com/journal/19842
👉 @frontend_1
Формы в Интернете - это возможность значительно улучшить пользовательский опыт, приложив при этом совсем немного усилий. Эти усилия могут заключаться в добавлении небольшого количества скромных HTML-атрибутов. Но в результате пользователь может получить эффект ускорения, позволяющий ему быстрее справиться с поставленной задачей.
Это особенно актуально для мобильных устройств, где людям приходится заполнять формы с помощью виртуальной клавиатуры. Любое улучшение, которое можно внести в процесс заполнения, заслуживает внимания. Но не волнуйтесь: вам не нужно добавлять сложную библиотеку JavaScript или писать запутанный код. Хорошо написанный HTML поможет вам в этом.
https://adactio.com/journal/19842
👉 @frontend_1
Adactio
Three attributes for better web forms
Better UX through better HTML: inputmode, enterkeyhint, and autocomplete.
👍4
Эксперименты с сборщиком мусора JavaScript
Утечки памяти в веб-приложениях широко распространены и, как известно, трудны для отладки. Если мы хотим избежать их, необходимо понять, как сборщик мусора решает, какие объекты можно собирать, а какие нет. В этой статье мы рассмотрим несколько сценариев, в которых его поведение может вас удивить.
https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3
👉 @frontend_1
Утечки памяти в веб-приложениях широко распространены и, как известно, трудны для отладки. Если мы хотим избежать их, необходимо понять, как сборщик мусора решает, какие объекты можно собирать, а какие нет. В этой статье мы рассмотрим несколько сценариев, в которых его поведение может вас удивить.
https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3
👉 @frontend_1
👍5
12 важнейших сайтов для освоения CSS
Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов.
Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.
Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода. Эти ресурсы предоставят вам инструменты и знания, необходимые для создания красивых, функциональных веб-страниц. К тому же большинство из них абсолютно бесплатны.
Так что пристегните ремни и приступайте к написанию кода!
Rus https://habr.com/ru/companies/ruvds/articles/719892/
Eng https://medium.muz.li/13-must-visit-websites-to-learn-and-master-css-in-2023-2b0f41a727e0
👉 @frontend_1
Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов.
Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.
Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода. Эти ресурсы предоставят вам инструменты и знания, необходимые для создания красивых, функциональных веб-страниц. К тому же большинство из них абсолютно бесплатны.
Так что пристегните ремни и приступайте к написанию кода!
Rus https://habr.com/ru/companies/ruvds/articles/719892/
Eng https://medium.muz.li/13-must-visit-websites-to-learn-and-master-css-in-2023-2b0f41a727e0
👉 @frontend_1
👍5🔥2👎1
Forwarded from GitHub Сообщество
Front End Documentation 2023 🚀
Список обучающих материалов, статей и ресурсов для изучения фронтенда
https://github.com/codesandtags/front-end-documentation
👉 @Githublib
Список обучающих материалов, статей и ресурсов для изучения фронтенда
https://github.com/codesandtags/front-end-documentation
👉 @Githublib
👍6🤡2❤1
⚡️Коллекция советов, которые помогут вам стать профессионалом в области CSS 🦾
https://github.com/AllThingsSmitty/css-protips
👉 @frontend_1
https://github.com/AllThingsSmitty/css-protips
👉 @frontend_1
👍9
Orama
🌌 Быстрый полнотекстовый и векторный поисковый движок, написанный на TypeScript, работающий в памяти и устойчивый к опечаткам.
https://github.com/oramasearch/orama
👉 @frontend_1
🌌 Быстрый полнотекстовый и векторный поисковый движок, написанный на TypeScript, работающий в памяти и устойчивый к опечаткам.
https://github.com/oramasearch/orama
👉 @frontend_1
👍9
Все возможности JavaScript и TypeScript за последние 3 года
В этой статье рассматриваются практически все изменения, произошедшие за последние 3 года (а некоторые и раньше) в JavaScript / ECMAScript и TypeScript.
Не все из перечисленных ниже возможностей будут для вас актуальны или даже практичны, но они должны служить для того, чтобы показать, что возможно, и углубить ваше понимание этих языков.
https://betterprogramming.pub/all-javascript-and-typescript-features-of-the-last-3-years-629c57e73e42
👉 @frontend_1
В этой статье рассматриваются практически все изменения, произошедшие за последние 3 года (а некоторые и раньше) в JavaScript / ECMAScript и TypeScript.
Не все из перечисленных ниже возможностей будут для вас актуальны или даже практичны, но они должны служить для того, чтобы показать, что возможно, и углубить ваше понимание этих языков.
https://betterprogramming.pub/all-javascript-and-typescript-features-of-the-last-3-years-629c57e73e42
👉 @frontend_1
👍3
Forwarded from React
Media is too big
VIEW IN TELEGRAM
Скажем нет “мерцающему” UI: useLayoutEffect и браузерная отрисовка
Как изменять элементы на основе измерений DOM: в чем проблема с useEffect, как ее решает useLayoutEffect, что такое браузерная отрисовка и какую роль здесь играет SSR.
https://www.developerway.com/posts/no-more-flickering-ui
✍️ @React_lib
Как изменять элементы на основе измерений DOM: в чем проблема с useEffect, как ее решает useLayoutEffect, что такое браузерная отрисовка и какую роль здесь играет SSR.
https://www.developerway.com/posts/no-more-flickering-ui
✍️ @React_lib
👍3
Однострочники JavaScript, которые можно использовать в каждом проекте
JavaScript - это мощный язык, который может многое сделать с помощью очень небольшого количества кода.
В некоторых случаях объем кода, который необходимо написать, не превышает одной строки, поэтому их называют однострочными.
Давайте рассмотрим 10 важнейших однострочников, которые стоит использовать практически в каждом создаваемом JavaScript-проекте.
https://www.freecodecamp.org/news/javascript-one-liners-to-use-in-every-project/
👉 @frontend_1
JavaScript - это мощный язык, который может многое сделать с помощью очень небольшого количества кода.
В некоторых случаях объем кода, который необходимо написать, не превышает одной строки, поэтому их называют однострочными.
Давайте рассмотрим 10 важнейших однострочников, которые стоит использовать практически в каждом создаваемом JavaScript-проекте.
https://www.freecodecamp.org/news/javascript-one-liners-to-use-in-every-project/
👉 @frontend_1
freeCodeCamp.org
JavaScript One-Liners to Use in Every Project
JavaScript is a powerful language that can do a lot with very little code. In some cases, the amount of code you need to write doesn't exceed more than a single line, which is why they are known as one-liners. Let's go through 10 essential one liners...
👍4😁1
Есть много способов сделать это: Vue 3 и взаимодействие компонентов
Vue 3 принёс в жизнь разработчиков возможность организации более гибкой структуры приложений. Всё чаще я стал замечать, что разные команды, а порой и разработчики внутри одной, используют целый зоопарк сомнительных подходов для организации взаимодействия между компонентами. Применяются какие-то крайности, либо всё в state manager, либо в composable (composition API), либо мутация props внутри дочерних компонентов!
Хотелось бы поднять эту тему и рассмотреть варианты взаимодействия компонентов доступные нам во Vue 3.
https://habr.com/ru/articles/668072/
👉 @frontend_1
Vue 3 принёс в жизнь разработчиков возможность организации более гибкой структуры приложений. Всё чаще я стал замечать, что разные команды, а порой и разработчики внутри одной, используют целый зоопарк сомнительных подходов для организации взаимодействия между компонентами. Применяются какие-то крайности, либо всё в state manager, либо в composable (composition API), либо мутация props внутри дочерних компонентов!
Хотелось бы поднять эту тему и рассмотреть варианты взаимодействия компонентов доступные нам во Vue 3.
https://habr.com/ru/articles/668072/
👉 @frontend_1
👍4
💻 БЕСПЛАТНЫЕ КУРСЫ ПРОГРАММИРОВАНИЯ ДЛЯ ШКОЛЬНИКОВ 8-11 КЛАССОВ И КОЛЛЕДЖИСТОВ
ДОСТУПНЫЕ ПРОГРАММЫ ОБУЧЕНИЯ:
⭐ Разработка на Python
⭐ Разработка на C++
⭐ Разработка на JavaScript
⭐ Разработка на Java
⭐ Разработка многостраничного сайта на PHP
⭐ Разработка мобильного приложения на Java
IT-разработка - точно то, что нужно, если:
✔️ Школьник увлекается играми
✔️ Школьнику интересно устройство гаджетов
✔️ Школьнику нравятся всевозможные роботы и конструкторы
Для получения подробной информации переходите по ссылке
Реклама. Университет «Синергия» ИНН 7729152149
ДОСТУПНЫЕ ПРОГРАММЫ ОБУЧЕНИЯ:
⭐ Разработка на Python
⭐ Разработка на C++
⭐ Разработка на JavaScript
⭐ Разработка на Java
⭐ Разработка многостраничного сайта на PHP
⭐ Разработка мобильного приложения на Java
IT-разработка - точно то, что нужно, если:
✔️ Школьник увлекается играми
✔️ Школьнику интересно устройство гаджетов
✔️ Школьнику нравятся всевозможные роботы и конструкторы
Для получения подробной информации переходите по ссылке
Реклама. Университет «Синергия» ИНН 7729152149
👍3
Топ-8 инструментов для Angular-разработки
Angular — это популярный фреймворк с открытым исходным кодом, широко используемый для создания динамических и масштабируемых веб-приложений на основе JavaScript. Благодаря обширному набору функций и поддержке сообщества Angular стал одним из самых популярных фреймворков в области веб-разработки.
Однако нелегко создавать высококачественные Angular-приложения без подходящего набора инструментов. Поэтому стоит обратить внимание на 8 лучших инструментов для Angular-разработки в 2023 году.
https://blog.bitsrc.io/top-8-tools-for-angular-development-in-2023-a99d9f3a2e4e
👉 @frontend_1
Angular — это популярный фреймворк с открытым исходным кодом, широко используемый для создания динамических и масштабируемых веб-приложений на основе JavaScript. Благодаря обширному набору функций и поддержке сообщества Angular стал одним из самых популярных фреймворков в области веб-разработки.
Однако нелегко создавать высококачественные Angular-приложения без подходящего набора инструментов. Поэтому стоит обратить внимание на 8 лучших инструментов для Angular-разработки в 2023 году.
https://blog.bitsrc.io/top-8-tools-for-angular-development-in-2023-a99d9f3a2e4e
👉 @frontend_1
👍1
6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)
Привет! Меня зовут Наташа Калачева. Я Frontend-разработчик в компании AGIMA. Vue — один из самых популярных фреймворков JS, его используют для разработки SPA и PWA. А его главные плюсы — это понятная, четкая документация, готовая структура и низкий порог входа.
Тем не менее, Frontend сегодня — это сложные приложения, которые содержат не только красивые элементы интерфейса, но и большую часть логики и функциональности всего продукта. Это требует от нас тщательного планирования и организации проекта, чтобы сделать его масштабируемым и простым.
В этой статье поделюсь правилами, которых придерживаюсь в работе и которые помогают упростить поддержку и расширение приложения. Мы рассмотрим, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.
Следуя этим рекомендациям, вы сможете создавать более эффективные проекты.
https://habr.com/ru/companies/agima/articles/722332/
👉 @frontend_1
Привет! Меня зовут Наташа Калачева. Я Frontend-разработчик в компании AGIMA. Vue — один из самых популярных фреймворков JS, его используют для разработки SPA и PWA. А его главные плюсы — это понятная, четкая документация, готовая структура и низкий порог входа.
Тем не менее, Frontend сегодня — это сложные приложения, которые содержат не только красивые элементы интерфейса, но и большую часть логики и функциональности всего продукта. Это требует от нас тщательного планирования и организации проекта, чтобы сделать его масштабируемым и простым.
В этой статье поделюсь правилами, которых придерживаюсь в работе и которые помогают упростить поддержку и расширение приложения. Мы рассмотрим, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.
Следуя этим рекомендациям, вы сможете создавать более эффективные проекты.
https://habr.com/ru/companies/agima/articles/722332/
👉 @frontend_1
👍3🥱3
Media is too big
VIEW IN TELEGRAM
5 суперполезных свойств CSS, которым не уделяется достаточно внимания
⌚ Timestamps
00:00 - Introduction
00:25 - isolation: isolate
05:00 - inset
07:13 - CSS counters
09:57 - Filters
13:37 - CSS contain
источник
👉 @frontend_1
⌚ Timestamps
00:00 - Introduction
00:25 - isolation: isolate
05:00 - inset
07:13 - CSS counters
09:57 - Filters
13:37 - CSS contain
источник
👉 @frontend_1
👍10
6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)
Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.
https://habr.com/ru/companies/agima/articles/722568/
👉 @frontend_1
Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.
https://habr.com/ru/companies/agima/articles/722568/
👉 @frontend_1
👍3🤔1