Кодинг — умер. Пора переходить на простые способы обучения.
Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, курсы учат проё*ывать деньги.
Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые статейки и часовые видео.
Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста.
Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках.
Короче, держите и изучайте, потом себе спасибо скажете: @it_guides
Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, курсы учат проё*ывать деньги.
Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые статейки и часовые видео.
Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста.
Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках.
Короче, держите и изучайте, потом себе спасибо скажете: @it_guides
💡 Подборка советов по уменьшению времени загрузки сайта
▫️ Минимизируйте ресурсы
▫️ Уменьшайте число вызовов сервера
▫️ Удаляйте ненужные пользовательские шрифты
▫️ Сжимайте файлы
▫️ Оптимизируйте изображения
▫️ Применяйте ленивую загрузку
▫️ Кэширование
▫️ Используйте префетчинг
WebDEV #подборка #советы
▫️ Минимизируйте ресурсы
▫️ Уменьшайте число вызовов сервера
▫️ Удаляйте ненужные пользовательские шрифты
▫️ Сжимайте файлы
▫️ Оптимизируйте изображения
▫️ Применяйте ленивую загрузку
▫️ Кэширование
▫️ Используйте префетчинг
WebDEV #подборка #советы
🔥 Лучшее на канале за неделю
1. CSS Flexbox. Полный курс.
2. DrawKit помогает находить бесплатные векторные изображения для ваших проектов.
3. Используйте префетчинг.
1. CSS Flexbox. Полный курс.
2. DrawKit помогает находить бесплатные векторные изображения для ваших проектов.
3. Используйте префетчинг.
💡 Используйте префетчинг
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
Предварительная выборка ссылок
Link prefetching позволяет браузеру собрать ресурсы, которые, вероятно, понадобятся пользователю в ближайшем будущем. То есть разработчики могут предположить, в каком месте пользователю может захотеться посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кэшируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Когда пользователь запрашивает контент, который хостится по определенному IP-адресу, в DNS осуществляется поиск доменного имени, которому принадлежит адрес.
DNS Prefetching позволяет браузеру заранее провести поиск в DNS по ссылкам, которые есть на странице, просматриваемой пользователем. Таким образом, когда пользователь кликнет на какую-то из этих ссылок, ему не придется ждать поиска в DNS.
WebDEV #советы #web
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
Предварительная выборка ссылок
Link prefetching позволяет браузеру собрать ресурсы, которые, вероятно, понадобятся пользователю в ближайшем будущем. То есть разработчики могут предположить, в каком месте пользователю может захотеться посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кэшируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Когда пользователь запрашивает контент, который хостится по определенному IP-адресу, в DNS осуществляется поиск доменного имени, которому принадлежит адрес.
DNS Prefetching позволяет браузеру заранее провести поиск в DNS по ссылкам, которые есть на странице, просматриваемой пользователем. Таким образом, когда пользователь кликнет на какую-то из этих ссылок, ему не придется ждать поиска в DNS.
WebDEV #советы #web
📖 Modern CSS: Master the Key Concepts of CSS for Modern Web Development
🖋 Joe Attardi, 2020
Книга представляет из себя учебник по каскадным таблицам стилей. Вы начнете с самых основ CSS: блочной модели, цветов и селекторов. Затем постепенно перейдете к более продвинутым темам - стилизация текста, позиционирование, Z-индекс и наложение, градиенты, границы, и ближе к концу книги к самым сложным элементам, таким как преобразования, переходы, анимация, flexbox и CSS grid. Некоторые фичи из книги доступны только в современных браузерах (Chrome, Edge, Safari и Firefox), поэтому автор упоминает о совместимости с IE11 везде, где необходимо.
💾 Скачать книгу
WebDEV #book #css
🖋 Joe Attardi, 2020
Книга представляет из себя учебник по каскадным таблицам стилей. Вы начнете с самых основ CSS: блочной модели, цветов и селекторов. Затем постепенно перейдете к более продвинутым темам - стилизация текста, позиционирование, Z-индекс и наложение, градиенты, границы, и ближе к концу книги к самым сложным элементам, таким как преобразования, переходы, анимация, flexbox и CSS grid. Некоторые фичи из книги доступны только в современных браузерах (Chrome, Edge, Safari и Firefox), поэтому автор упоминает о совместимости с IE11 везде, где необходимо.
💾 Скачать книгу
WebDEV #book #css
🛠 CSS Scan сильно упрощает просмотр ваших любимых веб-сайтов. Наведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры. Скопируйте, экспортируйте или доработайте их с помощью интуитивно понятного редактора CSS.
WebDEV #инструменты #css
WebDEV #инструменты #css
💡 Используйте Content Delivery Network
Когда пользователь географически находится далеко от сервера, задержка ответа растет. Более того, загрузка запроса также может повлиять на время обслуживания контента.
Скорость загрузки содержимого фронтенда, включая HTML-страницы, таблицы стилей, файлы JavaScript и изображения, может быть оптимизирована при помощи CDN.
Content delivery network (CDN) (англ. «сеть доставки содержимого») — это группа серверов, распределенных по нескольким географическим локациям. На этих серверах хранятся кэшированные версии контента, которые можно быстро отправить пользователю.
CDN перенаправляет запросы пользователя на ближайший сервер.
Есть еще особый вид CDN — сеть доставки изображений. Это отличный вариант оптимизации картинок. С помощью этой сети можно добиться уменьшения размера файлов на 40-80%. С учетом того, что больше половины веса страницы обычно приходится на изображения, интеграция CDN для картинок даст вам существенный прирост производительности.
WebDEV #советы #web
Когда пользователь географически находится далеко от сервера, задержка ответа растет. Более того, загрузка запроса также может повлиять на время обслуживания контента.
Скорость загрузки содержимого фронтенда, включая 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.
1. Modern CSS: Master the Key Concepts of CSS for Modern Web Development.
2. CSS Scan сильно упрощает просмотр ваших любимых веб-сайтов.
3. Используйте Content Delivery Network.
💡 Итог советов по оптимизации времени загрузки сайта
Золотое правило: 80-90% времени, которое требуется на ответ конечному пользователю, тратится на загрузку таких компонентов фронтенда, как изображения, таблицы стилей, скрипты и т. п.
Поэтому оптимизация загрузки этих данных очень важна для снижения показателя отказов и увеличения количества времени, которое пользователь проводит на сайте.
В этой серии советов мы разобрали несколько способов оптимизировать загрузку данных фронтенда. Надеемся, вам они пригодятся.
Просмотреть все посты по данной теме вы можете по тегу #советы, просматривая все последние публикации.
WebDEV #советы #web
Золотое правило: 80-90% времени, которое требуется на ответ конечному пользователю, тратится на загрузку таких компонентов фронтенда, как изображения, таблицы стилей, скрипты и т. п.
Поэтому оптимизация загрузки этих данных очень важна для снижения показателя отказов и увеличения количества времени, которое пользователь проводит на сайте.
В этой серии советов мы разобрали несколько способов оптимизировать загрузку данных фронтенда. Надеемся, вам они пригодятся.
Просмотреть все посты по данной теме вы можете по тегу #советы, просматривая все последние публикации.
WebDEV #советы #web
React Testing Library
В данном видеокурсе рассматривается тестирование React-компонентов с помощью библиотеки react-testing-library. Разбирается её философия, плюсы и минусы. А так же основные отличия от Enzyme в подходе к тестированию.
📺 YouTube
WebDEV #видео #React
В данном видеокурсе рассматривается тестирование React-компонентов с помощью библиотеки react-testing-library. Разбирается её философия, плюсы и минусы. А так же основные отличия от Enzyme в подходе к тестированию.
📺 YouTube
WebDEV #видео #React
YouTube
React Testing Library. Полный курс
#YauhenK #webDev #ReactTestingLibrary #testing
Всех приветствую в курсе «React Testing Library».
В данном видеокурсе мы с вами рассмотрим тестирование React-компонентов с помощью библиотеки react-testing-library. Разберём её философию, плюсы и минусы. А…
Всех приветствую в курсе «React Testing Library».
В данном видеокурсе мы с вами рассмотрим тестирование React-компонентов с помощью библиотеки react-testing-library. Разберём её философию, плюсы и минусы. А…
🛠 Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне. Вместо того чтобы писать код для нескольких произвольных брейкпоинтов (контрольных точек), возможно создать дизайн, где элементы масштабируются плавно и пропорционально.
WebDEV #инструменты #web
WebDEV #инструменты #web
💡 Что такое стиль оформления кода
Стиль оформления кода — это не что иное, как соглашение, которое вы заключаете с вашей командой и самим собой относительно правил оформления, которым будете следовать в проекте.
Заранее определенный стиль позволяет получить согласованный, понятный и простой в поддержке код.
Даже если вы работаете над личным проектом, все равно следует соблюдать определенные стандарты. Поначалу это не кажется важным. Но когда через несколько месяцев после окончания проекта вам захочется внести в него изменения, вы будете благодарны самому себе за то, что писали код единообразно. То же самое касается случаев, когда над проектом начинает работать другой человек.
WebDEV #советы #js
Стиль оформления кода — это не что иное, как соглашение, которое вы заключаете с вашей командой и самим собой относительно правил оформления, которым будете следовать в проекте.
Заранее определенный стиль позволяет получить согласованный, понятный и простой в поддержке код.
Даже если вы работаете над личным проектом, все равно следует соблюдать определенные стандарты. Поначалу это не кажется важным. Но когда через несколько месяцев после окончания проекта вам захочется внести в него изменения, вы будете благодарны самому себе за то, что писали код единообразно. То же самое касается случаев, когда над проектом начинает работать другой человек.
WebDEV #советы #js
🔥 Лучшее на канале за неделю
1. React Testing Library.
2. Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне.
3. Итог советов по оптимизации времени загрузки сайта.
1. React Testing Library.
2. Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне.
3. Итог советов по оптимизации времени загрузки сайта.
💡 Важность стилей
В работе программиста важны и творческий подход, и настойчивость, и опыт. Например, стену можно покрасить так, чтобы она была идеально гладкой, а все вокруг осталось чистым. А можно покрасить неровно, оставив отпечатки пальцев и пятна краски на полу.
Так же бывает и в программировании. Причем подходы к работе приобретают тем большее значение, чем больше программистов изменяют один и тот же код. Если каждый применяет свои собственные правила, результат будет таким же, как у нерадивых маляров.
Неопытные программисты часто не заботятся о стиле, так как еще не осознают его важность. Кстати, именно по таким мелочам руководители команд будут оценивать ваш опыт.
WebDEV #советы #js
В работе программиста важны и творческий подход, и настойчивость, и опыт. Например, стену можно покрасить так, чтобы она была идеально гладкой, а все вокруг осталось чистым. А можно покрасить неровно, оставив отпечатки пальцев и пятна краски на полу.
Так же бывает и в программировании. Причем подходы к работе приобретают тем большее значение, чем больше программистов изменяют один и тот же код. Если каждый применяет свои собственные правила, результат будет таким же, как у нерадивых маляров.
Неопытные программисты часто не заботятся о стиле, так как еще не осознают его важность. Кстати, именно по таким мелочам руководители команд будут оценивать ваш опыт.
WebDEV #советы #js