💡 Подборка советов по уменьшению времени загрузки сайта

▫️ Минимизируйте ресурсы

▫️ Уменьшайте число вызовов сервера

▫️ Удаляйте ненужные пользовательские шрифты

▫️ Сжимайте файлы

▫️ Оптимизируйте изображения

▫️ Применяйте ленивую загрузку

▫️ Кэширование

▫️ Используйте префетчинг

WebDEV #подборка #советы

💡 Подборка инструментов

▫️ Unminify позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS, HTML, XML, JSON) в удобный для восприятия вид.

▫️ ExtractCSS применяется для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов.

▫️ Web Developer Checklist — расширение, которое анализирует любую веб-страницу на предмет нарушения передовых практик.

▫️ GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты.

▫️ Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройствах.

▫️ Compressor можно использовать для оптимизации изображений.

WebDEV #подборка #инструменты

💡 Подборка видео

▫️ CSS Flexbox. Полный курс

▫️ React Testing Library

▫️ HTML за 100 секунд

▫️ ПРОДАКТ В IT

▫️ CSS за 100 секунд

▫️ PHP за 100 секунд

WebDEV #подборка #видео

💡 Подборка советов по коду в JS

▫️ Оператор опциональной последовательности

▫️ Оператор нулевого слияния

▫️ Spread syntax

▫️ Деструктуризация массива

▫️ Проверка палиндрома в одну строку

▫️ Превращаем атрибуты объекта в массив атрибутов

▫️ Избегайте множественных ИЛИ (||) условий

▫️ Облегчаем доступ к глубоким свойствам объекта

WebDEV #подборка #советы #coding #js

💡 Подборка инструментов

▫️ Stylestage — современная витрина CSS, оформленная открытым сообществом.

▫️ Halfmoon — интерфейсный фреймворк со встроенным тёмным режимом и полной настраиваемостью с использованием переменных CSS.

▫️ Spirit Studio — браузерный инструмент анимации, помогающий дизайнерам и разработчикам создавать свои анимации и управлять ими в режиме реального времени.

▫️ Meanderer — маленькая библиотека JavaScript для создания отзывчивых траекторий анимации.

▫️ Happy Hues — палитры отобранных цветов, которые будут уместны в определённом контексте.

▫️ MoreToggles — библиотека на чистом CSS со множеством приятных глазу переключателей.

WebDEV #подборка #инструменты

💡 Подборка видео за 100 секунд

▫️ D3.js за 100 секунд

▫️ Vite за 100 секунд

▫️ React Query за 100 секунд

▫️ React Native за 100 секунд

WebDEV #подборка #видео

💡 Подборка советов по ревью верстки. Распространённые ошибки

▫️ Копипаста есть, комментариев нет: Часть 1 | Часть 2

▫️ Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss: Часть 1 | Часть 2 | Часть 3

▫️ Не используйте миксины, когда можно использовать миксины

▫️ Ошибка: беспорядок в медиазапросах: Часть 1 | Часть 2

▫️ Ошибка: не интересоваться UX-проектированием

▫️ Ошибка: все в пикселях, даже font-size

▫️ Ошибка: не думать о переполнении и предельных значениях: Часть 1 | Часть 2

WebDEV #подборка #советы #вёрстка #html #css #web

💡 Подборка советов по массивам в js

▫️ Инициализация массивов

▫️ Получение длины массива

▫️ Проверка массива с использованием метода every()

▫️ Проверка массива с использованием метода some()

▫️ Создание массива на основе существующего массива с использованием метода map()

WebDEV #подборка #советы #coding #js

💡 Подборка инструментов

▫️ JavaScript30 — 30-дневный челлендж по VanillaJS.

▫️ DrawKit — на данном ресурсе можно находить бесплатные векторные изображения для своих проектов.

▫️ Devchallenges — участвуйте в крутых испытаниях и развивайте свои навыки, создавая веб-сайты.

▫️ Meanderer — маленькая библиотека JavaScript для создания отзывчивых траекторий анимации.

▫️ frontendpractice — поднимите свои навыки во фронтенде на новый уровень, воссоздавая реальные веб-сайты.

▫️ Happy Hues — палитры отобранных цветов, которые будут уместны в определённом контексте.

WebDEV #подборка #инструменты

💡 Подборка советов по массивам в js

▫️ Фильтрация массива с помощью метода filter()

▫️ Метод reduce()

▫️ Перебор массива с помощью метода forEach()

▫️ Перебор массива с использованием оператора for...of

▫️ Добавление элементов в конец массива

▫️ Добавление элементов в начало массива

WebDEV #подборка #советы #coding #js

💡 Подборка инструментов

▫️ roadmap.sh — если нужны дорожные карты и образовательные материалы по различным технологиям – вам сюда!

▫️ LabmdaTest — с помощью этой облачной платформы можно тестировать любое веб-приложение почти на всех современных браузерах.

▫️ Small Dev Tools — сайт с классными штуками для разработчиков, где можно найти различные: кодировщики или декодировщики, форматеры HTML/CSS/JavaScript, модификаторы, генераторы данных и прочую полезную функциональность.

▫️ resume — если хотите создать себе профессиональное резюме – то вам сюда.

▫️ daily dev — новостной агрегатор из мира IT, собирающий лучшие публикации с разнообразных медиа и публикующий их в ленте.

▫️ Showwcase — соцсеть, аналог LinkedIn, но только для айтишников.

WebDEV #подборка #инструменты

💡 Подборка советов по массивам в js

▫️ Поиск элементов в массиве

▫️ Получение фрагмента массива

▫️ Сортировка массива

▫️ Получение строкового представления массива

▫️ Создание копий массивов

▫️ Методы pop/push

WebDEV #подборка #советы #coding #js

💡 Подборка инструментов

▫️ CSS-Tricks — ресурс, ежедневно публикующий полезные материалы о технологиях, связанных с веб-разработкой

▫️ Medusa — бесплатный опенсорсный аналог Shopify с настраиваемым headless-движком, полезный для всех, кто работает в сфере электронной коммерции.

▫️ Katalon Studio — инструмент для автоматизации тестирования веб-приложений, API, мобильных и настольных приложений.

▫️ Searchcode — сервис для простого поиска кода. Помогает вам найти реальные примеры функций, API и библиотек на 243 языках в 10+ общедоступных источниках кода.

▫️ Clockify — трекер рабочего времени, который помогает следить, сколько часов уходит на проекты, насколько вы продуктивны в промежутке времени и даже прикидывать зарплату.

▫️ Invision Inspect — помогает подготовить дизайны к разработке.

WebDEV #подборка #инструменты

💡 Подборка советов

▫️ Методы shift/unshift

▫️ Не торопитесь: это марафон, а не спринт

▫️ Немного о «length»

▫️ Двигайтесь медленно, но уверенно

▫️ Немного о «length»

▫️ Умейте быстро находить решения

WebDEV #подборка #советы

💡 Подборка инструментов

▫️ Layoutit CSS Grid — простой и гибкий генератор grid-сеток.

▫️ Solid book — интерактивная книга, которая поможет освоить пять основных принципов проектирования в объектно-ориентированном программировании.

▫️ Mail Studio — сервис для создания адаптивных электронных писем.

▫️ DaFont — большая коллекция из более чем пятидесяти тысяч бесплатных шрифтов на любой вкус.

▫️ Roadmap — полезный ресурс, где можно найти готовые карты для развития во Frontend, React, Backend и ещё в нескольких направлениях.

WebDEV #подборка #инструменты

💡 Подборка советов

▫️ Метод new Array()

▫️ Подкрепляйте теорию практикой

▫️ Метод new Array()

▫️ Будьте готовы к неудачам

▫️ Многомерные массивы

WebDEV #подборка #советы

💡 Подборка инструментов

▫️ Keyframes App — инструмент, который поможет создавать простую и сложную анимацию при помощи визуального онлайн-редактора с временной шкалой.

▫️ SpinKit — простая коллекция загрузочных спиннеров, анимированные с помощью CSS.

▫️ Google Sites — простой, удобный и бесплатный сервис от Google для быстрого создания сайтов на бесплатном хостинге.

▫️ Spirit — инструмент для создания анимации, который поможет вам создавать и управлять анимацией в браузере в реальном времени.

▫️ Coderbyte — платформа с более 200 задачами, которые вы можете решать напрямую в режиме онлайн на одном из 10 языков программирования.

▫️ Mazwai — сервис, где вы найдёте много стоковых видео для использования в своих целях.

WebDEV #подборка #инструменты

💡 Подборка советов

▫️ Никогда не прекращайте учиться

▫️ Перебрать все элементы и получить новый изменённый массив

▫️ Придерживайтесь методологии и комментируйте

▫️ Перебрать все элементы и выполнить действие

▫️ Отфильтровать массив

▫️ Найти значение, аккумулирующее значения элементов массива

WebDEV #подборка #советы

💡 Подборка инструментов

▫️ ZenPen — минималистичный текстовый редактор.

▫️ Hubspot Blog Topic Generator — сервис, который поможет вам найти идею для новой статьи, от вас требуется лишь набрать несколько ключевых слов.

▫️ Jotform — сервис позволяет создавать разнообразные формы с широким функционалом - от простого опросника до сбора платежей.

▫️ Free Section of Creative Market — бесплатные свежие работы от профессиональных дизайнеров по понедельникам от Creative Market.

▫️ gtmetrix — сервис для анализа и оптимизации производительности любого веб-сайта.

WebDEV #подборка #инструменты

💡 Подборка советов

▫️ Проверить, содержит ли массив значение

▫️ Проверить, подходит ли условию каждый элемент массива

▫️ Меню навигации на Vue.js #1

▫️ Меню навигации на Vue.js #2

▫️ Встроенный редактор на Vue.js

WebDEV #подборка #советы