#frontend #tools

Браузер заточенный специально для отладки адаптивности. Может пригодится!

https://manojvivek.github.io/responsively-app/

Ormolu is a formatter for #haskell source code. The project was created with the following goals in mind:

- Using GHC's own parser to avoid parsing problems caused by haskell-src-exts.
- Let some whitespace be programmable. The layout of the input influences the layout choices in the output. This means that the choices between single-line/multi-line layouts in each particular situation are made by the user, not by an algorithm. This makes the implementation simpler and leaves some control to the user while still guaranteeing that the formatted code is stylistically consistent.
- Writing code in such a way so it's easy to modify and maintain.
- Implementing one “true” formatting style which admits no configuration.
- That formatting style aims to result in minimal diffs while still remaining very close to “conventional” Haskell formatting people use.
- Choose a style compatible with modern dialects of Haskell. As new Haskell extensions enter broad use, we may change the style to accomodate them.
- Idempotence: formatting already formatted code doesn't change it.
- Be well-tested and robust to the point that it can be used in large projects without exposing unfortunate, disappointing bugs here and there.

https://github.com/tweag/ormolu

Как работает JavaScript

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

Статья рассказывает о принципиальной схеме самого популярного движка JavaScript - V8, а также немного о сути интерпретации и компиляции кода и о JIT-компиляции.

Вкратце:
1. Парсер разбирает код на значимые части.
2. Строится абстрактное синтаксическое дерево (AST).
3. Интерпретатор создает байт-код, который сразу же начинает выполняться в браузере, чтобы пользователь не ждал.
4. Одновременно профайлер и компилятор работают над оптимизацией кода.
5. Как только готова оптимизированная версия, она заменяет временный байт-код.

Подробнее: https://nuancesprog.ru/p/4553/

#javascript #v8 #engine #browser

#pwa #tips

Как превратить любой сайт в PWA

PWA - это прежде всего:
1. Адаптивность
2. Работа в оффлайн
3. Возможность установить как приложение
4. Высокая скорость приложения

В статье описано как добавить манифест, подключить сервис воркер и превратить свой сайт в PWA
(4 минуты)

#js

Делаем круги на CSS

В статье вы узнаете как делать круги с помощью:

Border Radius
SVG
Clip Path
Radial Gradient

Научитесь:

центрировать контент внутри круга
обрезать контент на html + css
обрезать с помощью svg
размещать текст внутри круга
размещать текст по кругу

(ссылки ведут на codepen с примером)

#css #svg

#js #tools #frontend Eloquent для JS O_o

Javel — Добавляем Eloquent в Javascript
Работаем в яваскрипте с объектами так же легко, как в Ларавел
#english
https://lorisleiva.com/introducing-javel/

#nuxt #Vue #tools

​​Introducing @nuxt/content

The content/ directory for your #nuxt app, acting as a git-based headless CMS.

- #vue components in Markdown
- Powerful QueryBuilder API
- Handles MD, CSV, YAML, JSON
- Blazing fast hot reload in dev
- Syntax highlighting

https://content.nuxtjs.org/

#js #ts

#spa #js #tips

Оптимизация вашего SPA для Google Search

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

Ссылка: https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly/#0

#seo

▪️ Скринкасты - алгоритмы на JavaScript

1. Траспиляция из async/await в генераторы - Смотреть
2. JavaScript for-loops are… complicated - Смотреть
3. Y-комбинатор на JavaScript - Смотреть
4. JavaScript реализация throttle на пальцах - Смотреть

@itlecture

#vuejs #tips

Управление состоянием (state) с помощью Composition API

https://webdevblog.ru/upravlenie-sostoyaniem-state-s-pomoshhju-composition-api/

#vuejs #tips

Разбираемся с аутентификацией с помощью Vue, используя RESTful API

https://css-tricks.com/tackling-authentication-with-vue-using-restful-apis/

Лучшие практики итерации массивов в JavaScript

https://vgpena.github.io/js-arrays/

#css #tips