Начало работы с Next.js

https://www.smashingmagazine.com/2020/10/getting-started-with-next-js/

10 быстрых вопросов для собеседования по Vue

https://medium.com/javascript-in-plain-english/10-quick-fire-vue-interview-questions-3c16d14a3b51

Обзор инструментов JavaScript и TypeScript

Огромная подборка полезных инструментов и сервисов, разделенных по категориям. Срочно в закладки!

https://prglb.ru/my5a

#tools

10 советов для эффективного использования Vue.js

Автор статьи делится основными фичами фреймворка, среди которых:

— Сокращённый синтаксис слотов.
— Функция $on(‘hook:’) для определения слушателя событий в хуке.
— Валидация props.
— Динамические аргументы директивы.
— Повторное использование компонента для одного и того же маршрута.
— Все свойства от родителя ребёнку.
— Все слушатели событий от родителя ребёнку.
— $createElement для создания виртуальных узлов.
— Использование препроцессора JSX.
— Настройка v-model.

Рекомендации сопровождаются понятными примерами:
https://tprg.ru/640V

#фронтенд #vuejs

🦉 Использование фреймворка Nightwatch.js для автоматизации тестирования

Пошаговое руководство к Nightwatch.js для автоматизации браузерного тестирования: https://prglb.ru/37xla

#testing #javascript

Как локализовать приложение на Vue.js с помощью vue-i18n и Localazy

https://dev.to/localazy/how-to-localize-vue-js-app-with-vue-i18n-and-localazy-50p7

24 современных сниппетов ES6 для решения практических задач JavaScript

https://medium.com/swlh/24-modern-es6-code-snippets-to-solve-practical-js-problems-3609f301859e

Эффективное тестирование верстки

Как эффективно и правильно тестировать верстку и писать для неё тесты, чтобы они были полезны, а дедлайны не горели.

https://prglb.ru/cnon

Техника ворона: на шаг ближе к Container Queries

https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/

#codepen дня
#css #3d #transform

Сегодня в топ попал довольно необычный пример. Он сложен с математической точки зрения, но довольно прост с точки зрения кода. И это — взгляд изнутри на трёхмерный куб. Без WebGL.

Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.

Практической пользы у этого примера, в общем, нет, но полученные знания пригодятся всем, кто интересуется 3D-эффектами с минимальными усилиями.

https://codepen.io/ge1doot/pen/yLJwBrm

Новые фичи в вебе за 2020, которые вы могли пропустить:

— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)

#browser_api #css

К статье(eng)

Такая литература будет вечной

Структуры и алгоритмы обработки данных

Авторы: Павлов Л.А., Первова Н.В.

Год издания: 2020

Скачать книгу

#algorithms #русский

Обзор JavaScript Symbol

— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив

#javascript #symbol

К статье(rus)

Декораторы JavaScript с нуля

Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности

#javascript #decorator

К статье(rus)

CSS clip-path Editor

Полезный инструмент при создании clip-path фигур, который наглядно демонстрирует, как будет выглядеть элемент на странице. Можно воспользоваться готовыми пресетами или настроить по своему желанию, после чего просто скопировать готовый код в свой проект.

https://tprg.ru/sKF5

#фронтенд #css

Vue.js: Up and Running

Автор: Callum Macrae
Год издания: 2017

Скачать книгу pdf
Скачать книгу epub

#vue #english

Микро-фронтенды с Vue и single-spa

Практическое руководство по настройке микрофронтендовой архитектуры из нескольких приложений на Vue и роутера single-spa.

https://prglb.ru/k0zb

#vue #microfrontend

Как создать сервер GraphQL в Next.js

В туториале рассматривается пример подключения GraphQL в Next.js приложение с помощью apollo-server-micro

#graphql #nextjs

К статье(eng)

Наборы иконок для веб-разработчиков

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

https://www.flaticon.com содержит полностью редактируемые векторные изображения.

https://jam-icons.com это набор из 896 иконок, сделанных вручную.

https://iconmonstr.com В коллекции Iconmonstr вы найдете больше четырех тысяч иконок.

http://www.entypo.com это набор svg-иконок. Иконки превосходны; если говорить о бесплатных, то они точно лучшие.

https://evil-icons.io/ это очень объемный набор, в котором вы найдете и SVG, и исходные файлы.