Отзывчивые таблицы с минимумом CSS

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

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

#css

Переиспользование форм в Angular

Лучшие практики работы с формами в Angular.

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

#frameworks #angular

10 лучших практик создания и поддержки больших проектов на Vue.js

Пишем эффективный код, который легко поддерживать и переиспользовать.

Читать: https://prglb.ru/40thk

#frameworks #vue

​Гибкие лейауты на Flexbox

Подробное введение в свойства flexbox-модели с примерами.

Читать: https://prglb.ru/bft7

#css #beginners #layout

prefers-color-scheme

Лучшие практики создания темных тем на основе пользовательских предпочтений

Читать: https://prglb.ru/53ojy

#css #interface

Инструменты для разработчика

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

Смотреть: https://tools.lullis.ru/

#tools #digest

Введение в производительность в вебе

Понятное и подробное руководство по веб-производительности с описанием самых важных метрик.

Читать: https://calibreapp.com/blog/get-started-with-performance

#performance

Практическое руководство по Javascript Proxy

Proxy - мощный инструмент метапрограммирования в JS, обеспечивающий полный контроль при доступе к объекту. Он умеет отслеживать все основные операции (запрос значения свойства и его обновление, вызов метода, итерация, удаление свойств и т. д.)

Чтобы отслеживать какую-либо операцию, объект Proxy должен реализовать соответствующую "ловушку": метод get, set, deleteProperty и т. д.

Proxy может использоваться для реализации множества концепций:
- перегрузка операторов
- "настоящие" приватные свойства
- возвращения "нулевого значения"
- мокирование объектов
- кэширование данных и синхронизация состояний
- гибкие перечисления
- использование отрицательных индексов для поиска в массивах
- удобная работа с cookies
- реактивное изменение свойств

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

Подробнее о Proxy: https://webdevblog.ru/prakticheskoe-rukovodstvo-po-javascript-proxy/

#javascript #core

Полное руководство по ES10

Вспоминаем недавно добавленные JS-фичи - вдруг вы еще не начали их использовать 🤨

Речь пойдет о:
- больших числах
- плоских массивах
- стабильной сортировке
- стандартизированном глобальном объекте
- удалении пробелов из строк
- String.matchAll()
- Object.fromEntries()
- новых членах классов
- и еще многом другом

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

#javascript #core

Пять причин поместить функции в класс

Краткий обзор того, как работают классы в JS, и пять причин, почему стоит преобразовывать функции в объекты.

Читать: https://nuancesprog.ru/p/7552/

#javascript #bestpractices

Создавай цифровые решения будущего и получи приз!

Мы объявляем онлайн-хакатон VirusHack от Ростелекома, организованный в партнерстве с Агентством инноваций Москвы и РАЭК. В нем вы прокачаете свои навыки в разработке технологий, которые помогут людям, бизнесу и государству приспосабливаться к нестандартным условиям жизни.

Победитель реализует свой проект при поддержке крупнейших компаний страны!

Призовой фонд хакатона 2 500 000 рублей!

Онлайн-хакатон пройдет с 3 по 5 мая 2020 года — успейте зарегистрироваться на него до 30 апреля 2020-го: https://proglib.io/w/ed95e79a

Добавляйтесь в чат хакатона: https://bit.ly/2RAQgOx

​React Native vs Flutter

React Native и Flutter - инструменты для быстрого и эффективного создания мобильных приложений для разных систем с единой кодовой базой. Но какой из них лучше?

Узнать: https://blog.soshace.com/react-native-vs-flutter-which-one-would-suit-you-better/

#mobile #react #flutter #frameworks

GraphQL

Подробное ведение в GraphQL с примерами кода
https://prglb.ru/4s93s

🤩 + Интерактивный тренажер
https://prglb.ru/5muzb

#database #backend #api

Размытые рамки в CSS

Несколько CSS-трюков для создания интересного блюр-эффекта.

#css

23 полезных хоткея для VS Code

Комбинации клавиш, которые ускорят разработку.

https://prglb.ru/51xpq

#tools #editor #vscode

Tesseract.js: извлекаем текст из картинок с помощью JavaScript

Инструкция по извлечению текста из картинок с помощью OCR-библиотеки Tesseract.js. В конце статьи можно поиграть с получившимся интерактивным демо-приложением.

Читать: https://proglib.io/p/tesseract-js-izvlekaem-tekst-iz-kartinok-s-pomoshchyu-javascript-2020-04-22

#javascript #datascience

Изучаешь Javascript? Хочешь быстро прокачаться и найти работу?

Приходи 5 мая на бесплатный вебинар «Как начинающему JS-разработчику стать крутым и найти работу?» от онлайн-школы Thinknetica.

Вебинар будет полезен тем, кто хочет стать веб-разработчиком и уже знает основы javascript.

На вебинаре вы узнаете:

- Почему новичку так сложно найти работу
- Что нужно знать JS-разработчику, чтобы устроиться на работу
- Чего ждут и требуют работодатели от соискателей
- На какую зарплату можно рассчитывать
- Как гарантированно найти работу начинающему JS-разработчику
- Как быстро вырасти до middle-уровня и нормальной зарплаты

🔥А в итоге – получите план подготовки, который приведет вас к трудоустройству

Записывайся сейчас: https://clck.ru/N8mQe

Принципы 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