Принципы SOLID в JavaScript

SOLID-принципы - это набор из пяти правил для создания качественного кода.

👉 S- Single Responsibility. Класс (Функция) должен делать только одну вещь. Например, не стоит смешивать логику и представление.
👉 O - Open-Closed. Классы нужно проектировать так, чтобы для добавления новой функциональности не нужно было изменять уже написанный код.
👉 L - Liskov Substitution. Дочерние классы всегда и везде могут замещать родительские.
👉 I - Interface Segregation. В интерфейсе должны быть лишь те методы, которые клиент действительно использует.
👉 D - инверсия зависимостей. Все в проекте должно зависеть только от абстракций, а не от конкретных реализаций.

Смотреть: https://prglb.ru/562ve

В видео - подробный разбор каждого принципа, а также их применение на практике в JavaScript.

#bestpractices #solid

​CSS триггеры

Большая табличка, в которой собраны почти все CCS-свойства и информация об изменениях, которые они вызывают в разных браузерах.

Ссылка: https://csstriggers.com/

- Layout - перерасчет макета, вычисление геометрии элементов. Обычно выполняется для всего документа целиком, так как изменение одного элемента влияет на все последующие.

- Paint - прорисовка макета, заполнение пикселей. Всегда выполняется после Layout, а также без Layout, если изменяются свойства, связанные с цветом. Часто является самым длительным этапом представления веб-страницы.

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

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

#css #performance #browser

Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript.
Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, ведь на нем написано большинство сайтов, которые вы посещаете каждый день.

Для тех, кто хочет погрузиться в разработку сайтов и веб-приложений SkillFactory запустили курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 6 проектов; дополнительный модуль про soft skills поможет подготовиться к собеседованиям.

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

⏰Последний день распродажи — не упустите скидку на обучение 50%: https://clc.to/yLEakw

Чтобы React «заиграл»: 8 инструментов разработки

Если для создания веб-приложений вы избрали React, вам также будут полезны инструменты стилизации, управления состоянием и тестирования. Рассказываем о них в нашей подборке.

Читать: https://proglib.io/p/chtoby-react-zaigral-8-instrumentov-dlya-razrabotki-2020-04-26

#tools #frameworks #react

Сможет ли Vue.js превзойти React в 2020 году?

Смертельная битва двух гигантов продолжается!

Читать: https://prglb.ru/488o6

#tools #frameworks

Замыкания, каррирование и крутые абстракции

Разбираемся в непростых концепциях JavaScript на практике

Читать: https://prglb.ru/1r4xj

#javascript #core

For Web, кладезь годноты для фронтендеров → @forwebdev

Каждый день с 2014 года публикуют свежие статьи, видеокурсы, инструменты, книги и многое другое.

Подписаться → @forwebdev

Юнит-тестирование фронтенда без фреймворка

Модульные тесты своими руками.

Читать: https://prglb.ru/4c1ph

#testing

Как правильно использовать анимацию в дизайне интерфейсов

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

Читать: https://proglib.io/p/kak-pravilno-ispolzovat-animaciyu-v-dizayne-interfeysov-2020-04-29

#interface #animation

Мы теперь есть в Яндекс.Мессенджере. Присоединяйтесь:

https://yandex.ru/chat/#/join/627c55a9-89c7-4d27-86ed-287d33a5ce7d

Обработка null и undefined в JavaScript

В вебе часто приходится сталкиваться с необязательными (опциональными) значениями. Разбираемся, как правильно их обрабатывать.

Ссылка: https://prglb.ru/23bpu

#javascript #bestpractices

За два года спрос на профи в Data Science вырос вдвое. По сведениям hh дата-сайентисты получают от 100 тыс. руб./мес. Но обычно знания приходится собирать по крупицам. К счастью, Geekbrains подготовили курс по машинному обучению:

💎 65 часов контента с практикой к каждому занятию,
💎 30 онлайн-уроков с живыми преподавателями,
💎 5 проектов – всё по-взрослому.

Курс длится 5 месяцев, занятия ведут дата-сайентисты, работающие в крупных компаниях. Подробнее: https://proglib.io/w/d90d2e3f

Полное руководство по Data-атрибутам

Все, что вы хотели знать об использовании data-атрибутов в HTML, CSS и JS.

Читать: https://prglb.ru/5ou8h

Redux Toolkit

Набор инструментов для разработки с использованием библиотеки Redux.

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

✔️ создание и конфигурация хранилища
✔️ создание редьюсеров
✔️ создание action creators

Библиотека по умолчанию реализует лучшие практики Redux. Ее можно использовать как в новом проекте, так и подключить к существующему.

Библиотека: https://redux-toolkit.js.org/

#tools #library #redux

Валидация форм с помощью Vuelidate

Простая проверка пользовательского ввода в приложениях на Vue.js.

Читать: https://prglb.ru/3wkru

#tools #frameworks #library #vue

Объяснение

Вызов функции Array(5) создает пустой массив без единого элемента, только со свойством length, равным 5.

Метод map итерирует объект по ключам, но так как ключей нет, коллбэк никогда не вызовется.

В итоге, в массиве arr нет ни одного элемента.

Подробнее: Вот почему создание массива через map не работает в JS

Круговое меню на HTML, CSS и JS

Верстаем симпатичное меню с помощью базовых знаний HTML, CSS, JS и геометрии 😲

Смотреть и повторять: https://www.youtube.com/watch?v=RR1Ag4SQ54E&feature=youtu.be

#code #video

Бесплатные курсы!!

Много 👉 БЕСПЛАТНЫХ материалов для начинающих веб-разработчиков и JS-фуллстеков!

Начать учиться: https://prglb.ru/3g1md

#javascript #html #css #beginners

​Полезные плагины Google Chrome

Небольшой список расширений, которые могут быть полезны для веб-разработчика:

➡️ SVG-grabber для быстрой загрузки svg с любого сайта
➡️ Colorzilla для удобной работы с цветами
➡️ WhatFont для моментального определения шрифтов