JavaScript *

Некоторые проекты зачастую требуют специфичные версии локально установленных программ. Это может быть как определенная версия node.js или npm (например, npm@7 с поддержкой workspaces), так и определенная база данных, менеджер пакетов и другие утилиты, которые нельзя установить из npm. Зачастую команды фиксирую версии в чатиках, readme или вики.

npm позволяет задекларировать в package.json файле необходимые версии node и npm, но никак не проверяет их. Чтобы исправить это и расширить список инструментов был написан небольшой npm пакет engine-version. Пакет работает очень просто: сначала он считывает описание необходимого софта из package.json, а затем смотрит установлена ли программа и совпадает ли установленная версия описанной. И если проверки прошли неудачно, отображается список ошибок.

Всем привет! Идеологически Quarkly – это проект, который призван упростить жизнь веб-разработчикам и веб-дизайнерам. В этом посте я коротко расскажу, за счет чего это возможно.

Прежде всего, давайте посмотрим, как выглядит типичный цикл разработки веб-приложения в 2020 году? Есть команда. В этой команде есть дизайнер и разработчик. Первый создает дизайн-спецификацию в Figma. Второй, на основе дизайн-спецификации, создает компоненты, переносит тему. Результат своей работы программист показывает дизайнеру в Storybook. Дизайнер его проверяет и утверждает проект, если всё хорошо. Далее он начинает создавать макеты, а разработчик верстает их при помощи компонентов из спецификации.

Популярность Typescript растет день ото дня. Javascript нетипизированный язык(или слабо типизированный, если точнее), и одна и та же переменная способна принимать и строку, и число, и даже объект. С одной стороны, это делает язык гибким, с другой, потенциально ведет к многочисленным ошибкам. Typescript создан, чтобы решить эту проблему. Vue старается не отставать от моды, и в новой версии фреймворка была значительно улучшена поддержка языка. Теперь переход на Typescript проще и приятнее, чем был раньше. Хороший повод научиться чему-то новому, тем более, что в требованиях к вакансиям он встречается все чаще и чаще.

В этой статье мы перепишем тестовое задание, которое я разбирал ранее, на Vue 3 и Typescript и вдобавок используем обновленные Vue-Router и Vuex(критики, вы были услышаны).

Update: код в статье был улучшен в соответствии с пожеланиями.

Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" от Malcolm Laing.

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

Есть два способа знакомиться с программой конференции. Если открыть официальные описания докладов, будет информативно: узнаешь, о чём каждый из них. А если дёрнуть за рукав людей из программного комитета, получится неформальное обсуждение, где и общие тренды выделят, и посмеются в процессе.

До HolyJS осталось меньше месяца, её программа сформирована, и мы решили рассказать вам о ней обоими способами сразу. Для тех, кому важна информативность, под катом есть официальные описания всех докладов. А для тех, кому хочется неформальнее и аналитичнее, добавили также видеозапись нашего youtube-шоу «Тяжёлое утро с HolyJS»: там как раз участники ПК разбираются в более свободной форме (вплоть до закадрового смеха).

Воркшопы и фреймворки, Дэн Абрамов и Виталий Фридман — всё это ниже:

1. Кто такой фронтендер и чем он занимается?
2. С чего начать и что читать? Чек-лист обучения
3. Какие трудности могут быть? Ошибки в начале пути
4. Подготовка к собеседованию на Junior-разработчика

Vuex — это официальная библиотека для управления состоянием приложений, разработанная специально для фреймворка Vue.js.

Vuex реализует паттерн управления состоянием, который служит централизованным хранилищем данных для всех компонентов приложения.

По мере роста приложения такое хранилище разрастается и данные приложения оказываются помещены в один большой объект.

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

Работая над проектом CloudBlue Connect и создавая очередной модуль, мы поймали себя на мысли, что пишем один и тот же шаблонный код снова и снова, меняя лишь эндпоинт:

1. Репозиторий, в которой содержится логика взаимодействия с бекендом;
2. Модуль для Vuex, который работает с репозиторием;
3. Юнит-тесты для репозиториев и модулей.

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

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

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

В своей прошлой статье на Хабре я писал про библиотеку Jsqry, которая предоставляет простой и удобный язык запросов (DSL) к объектам JSON. С тех пор прошло много времени и библиотека тоже получила свое развитие. Отдельный повод для гордости — библиотека имеет 98% покрытие кода тестами. Однако в этой статье речь не совсем о ней.

Думаю, многие из вас знакомы с инструментом jq, который является практически стандартом де-факто для работы с JSON в командной строке и скриптах. Я тоже являлся её активным пользователем. Но меня все время беспокоила неоправданная сложность и неинтуитивность синтаксиса запросов этой утилиты. И не меня одного, вот лишь несколько цитат с hacker news:

I have been using jq for years and still can't get it to work quite how I would expect it to.

I have the same issue with jq. I need to use my google fu to figure out how to do anything more than a simple select.

I don't know what the term would be, mental model, but I just can't get jq to click. Mostly because i only need it every once in a while. It's frustrating for me because it seems quite powerful.

I know I might be a dissenting opinion here, but I can never wrap my head around jq. I can manage jq ., jq .foo and jq -r, but beyond that, the DSL is just opaque to me.

Let's just say it: jq is an amazing tool, but the DSL is just bad.

Yeah, I find jq similar to writing regexes: I always have to look up the syntax, only get it working after some confusion why my patterns aren't matching, then forget it all in a few days so have to relearn it again later.

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

Программисты делятся на две категории: те, которые используют отладчик при разработке, и те, которые обходятся без него. В этом посте я попытался обобщить, какие типы сущностей можно выявить в исходном коде JS-программы, и как эти типы выглядят под отладчиком. JS-программисты из первой категории могут дополнить, если я упустил какой-либо тип сущностей, а JS-программисты из второй категории могут посмотреть на то, чего, возможно, никогда не видели.

1. ResizeObserver
2. IntersectionObserver
3. MutationObserver

1. * Создание root application из вашего существующего проекта, добавление в него 3 микро-приложения (vue, react, angular)
2. Общение между микро-приложениями
3. Работа с git (deploy, обновления)

1. Общая часть
2. Зачем это нужно
3. Создание root контейнера (определение см. ниже) из вашего монолита
4. Создаем микро-приложение VUE (vue-app)
5.  Создаем микро-приложение REACT (react-app)
6.  Создаем микро-приложение ANGULAR (angular-app)

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

И поэтому мы подумали о создании «живого окна», которое показывает погоду и её изменение. Мы решили создать веб-приложение, которое будет показывать нынешние погодные условия, используя природный ландшафт, созданный путём вычислений, но в то же время эстетично. Другими словами, при помощи генеративного искусства.