Шпаргалка по БЭМ. Классное объяснение как работать с CSS-препроцессорами и БЭМ. Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

#html #css

Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.

#angular

Google Chrome начнет блокировать JavaScript-редирект по кликам на ссылки.

Атрибут target=«blank» дает команду браузеру открывать ссылку в новой вкладке при клике. У этого атрибута есть известная проблема безопасности, которая позволяет злоумышленникам использовать JavaScript для перенаправления на другой URL. По этому адресу могут находиться фишинговые страницы или те, которые автоматически загружают вредоносы.

Чтобы этого не происходило, в браузер Chrome включили атрибут ссылки HTML rel=«noopener», который не позволяет новой вкладке использовать JavaScript для перенаправления.

Функция уже включена в Chrome Canary и, как ожидается, войдет в Chrome 88 в январе 2021 года.

В 2018 году Apple уже внесла подобное изменение в Safari. Там обрабатываются все ссылки с target="_blank". Если эта функция включена, даже при отсутствии у сайта атрибута rel=«nooopener» в URL-адресах браузер все равно обработает их.

#статьи

Unicons — коллекция из более чем 3300 векторных иконок в трех начертаниях для Вашего проекта. Доступны как иконки в SVG, так и веб-шрифты.

#графика

Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языково-независимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.

#инструменты

Rockpack - это простое решение для создания приложения React с рендерингом на стороне сервера, сборкой, линтингом, тестированием, ведением журнала, локализацией.

Основная цель Rockpack - сократить время настройки проекта до 5 минут.

#react

Indenticator - это расширение для VS Code, которое визуально выделяет текущую целевую глубину. Это позволяет легко различать разные уровни разных блоков кодов. Глубина отмечена маленькими точками и линиями.

#расширения #vscode

🔥 Лучшее на канале за последнюю неделю

1) HTML DOM - крутая шпаргалка по JavaScript c подробным пояснением для тех, кто работает в основном c DOM.
2) Шпаргалка по БЭМ - классное объяснение как работать с CSS-препроцессорами и БЭМ. 
3) StackBlitz - это онлайн-среда разработки, в которой вы можете создавать проекты Angular, React, Vue, Svelte
4) Davur - HTML шаблон панели администратора для заказа еды в ресторане, кафе, интернет-магазинах. 
5) Unicons — коллекция из более чем 3300 векторных иконок в трех начертаниях для Вашего проекта.

Всем успешной разработки!

#Лучшее

JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде.

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

#инструменты

Sortable - это библиотека JavaScript для переупорядочиваемых перетаскиваемых списков.

Основные особенности
- Поддерживает сенсорные устройства и современные браузеры (включая IE9).
- Можно перетаскивать из одного списка в другой или внутри того же списка.
- CSS-анимация при перемещении элементов.
- Умная автопрокрутка.
- Плавная анимация.
- Поддержка множественного перетаскивания.
- Поддержка преобразований CSS.
- Создан с использованием собственного API перетаскивания HTML5.
- Поддерживает любую библиотеку CSS, например Bootstrap.

#javascript

📖 Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress

Автор: Нейт Купер
О книге: 2019 год, 266 страниц, Русский язык, 32.0Mb

Содержание: В книге — шесть глав. Каждая из них раскрывает одну тему — что нужно для начала работы, базовые HTML-теги, настройка и подключение СSS, работа с WordPress, выбор хостинга и запуск сайта.

#книги

Sense of depth - непростая реализация вращающегося текста внутри изображения на чистом CSS при помощи свойства clip-path.

#html #css

Animated Illustrations — коллекция анимированных иллюстраций. Выберите понравившуюся иллюстрацию, выберите формат (видео или json) и разместите ее на своем веб-сайте, приложении, в социальной публикации или презентации.

#графика

Фича 5. Свойство font-style: oblique

Практически каждый раз, когда вы видите свойство font-style, оно используется в значении «normal» или «italic». Но оно также можете иметь значение «oblique».

Слово «oblique» типографский термин и представляет собой наклонный шрифт, но это не курсив.
В связи с тем, как CSS обрабатывает наклонный шрифт, он может быть взаимозаменяем с курсивом, если используемый шрифт не имеет наклонного типа.

Шрифт не может одновременно иметь наклонный вид и курсив, так как наклонный вид шрифта предполагается как замена курсива у тех шрифтов, которые его не имеют.

Пример на Codepen

#фичи #css

Umami - это простая и быстрая альтернатива Google Analytics с открытым исходным кодом для веб-аналитики.

Umami выдаёт статистику по просмотрам всех конкретных страниц, по браузерам, ОС, рефереррам, устройствам и странам. Показано количество посетителей и просмотров, девайсы и среднее время визита за сутки, неделю, месяц.

#инструменты

ImpactJS - это игровой движок JavaScript, ориентированный в основном на разработку 2D-игр. При этом есть плагины, которые вы можете добавить в Impact для имитации трехмерной среды.

Движок поставляется с несколькими добавленными инструментами, такими как редактор уровней для любой игры 2D-типа, мощными инструментами отладки и очень интересной платформой для публикации под названием Ejecta , которая позволяет публиковать данные в iPhone AppStore.

#javascript

Ubuntu Web Remix — альтернатива Chrome OS.

Ubuntu Web Remix. Его начали разрабатывать в начале лета, а сейчас он доступен для загрузки. Основа дистрибутива — Ubuntu. Но разработчик постарался следовать минимализму Chrome OS, упростив интерфейс оригинальной операционной системы. Вместо Google Chrome здесь используется браузер Firefox, несколько веб-приложений из /e/, плюс Anbox, инструмент, который дает возможность запускать Android-приложения на Linux.

Дистрибутив дает возможность установить практически любое приложение для Ubuntu при помощи apt-get, но вот Ubuntu Software Center в этой ОС нет. Вместо этого используется линк на “Open Web Store”, размещенный в таскабре. При клике по ярлыку пользователь попадает на сат, где можно найти набор приложений на все случаи жизни. После загрузки и установки они отображаются в списке приложений ОС.

Для работы каждого из эти веб-приложений используется браузер Firefox. Каждое новое запущенное приложение открывается в новой вкладке.

#инструменты

Quasar - это фреймворк на основе Vue.js с открытым исходным кодом, который позволяет вам как веб-разработчику быстро создавать адаптивные веб-сайты / приложения.

Quasar никак не ограничивает возможности Vue, в нём нет навязанных паттернов и он не тянет за собой тонны зависимостей, по крайней мере поначалу — по умолчанию модули устанавливаются по мере необходимости, но при желании можно загрузить всё и сразу.

При помощи Quasar можно создавать:
- SPA (одностраничное приложение)
- SSR (серверное приложение с рендерингом) (+ необязательная подмена клиента PWA)
- PWA (прогрессивное веб-приложение)
- BEX (расширение для браузера)
- Мобильные приложения (Android, iOS,…) через Cordova или Capacitor
- Многоплатформенные настольные приложения (с использованием Electron)

#vue

Ресурсы для обучения или закрепления знаний по CSS.

1) CSS и CSS3. Свойства для форматирования HTML элементов — Html5Book;
2) Cascading Style Sheets (CSS) — Mozilla (MDN);
3) Справочник по CSS — Webref;
4) Инструменты разработчика Chrome DevTools для просмотра стилей;
5) Вёрстка на Flexbox в CSS. Полный справочник (перевод и оригинал на CSS Tricks);
6) БЭМ Методология;
7) БЭМ для начинающих. Очевидные и неочевидные вопросы верстки.

#css

SlashData опубликовала результаты исследований языков программирования с самым большим сообществом.

Рейтинг:
— JavaScript (12.4 млн разработчиков)
— Python (9.0 млн разработчиков)
— Java (8.2 млн разработчиков)
— C/C++ (6.3 млн разработчиков)
— PHP (6.1 млн разработчиков)
— C# (6.0 млн разработчиков)
— Swift (2.4 млн разработчиков)
— Kotlin (2.3 млн разработчиков)
— Go (1.5 млн разработчиков)
— Ruby (1.5 млн разработчиков)

#статьи