Jest - фреймворк для тестирования в JavaScript

Фреймворк разработан для проверки правильности работы любого JavaScript кода.

Особенности:
👉 Не требует дополнительных настроек
👉 Тесты выполняются параллельно
👉 Простая установка
👉 Работает с проектами, использующими Babel, TypeScript, Node, React, Angular, Vue и т.д
👉 Удобный API

Сайт: https://jestjs.io/

#полезно #инструменты

👉 @frontend_mind

Переключатель тёмной темы, реализованный на CSS и JS

#codepen #css #js

👉 @frontend_mind

Инструменты сборки и автоматизации JavaScript

1. Grunt - инструмент для автоматизации повторяющихся и трудоёмких задач. Cуществует более 6000 плагинов.

2. Gulp - определяет задачи в JavaScript как функции, также GUl автоматизирует задачи, предлагая более 2700 плагинов, обеспечивает прозрачность и контроль над процессом.

3. Brunch.io - быстрый и простой, инструмент автоматически создаёт карту JS-файлов с CSS, что упрощает процесс отладки.

4. Webpack - модульный упаковщик, анализирует зависимости между модулями и образовывает ассеты, упаковывает модули в один или несколько маленьких пакетов для загрузки браузером.

5. Browserify - позволяет разработчикам ПО использовать модули NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.

6. Yeoman - служит для разработки веб-приложений и позволяет создавать новые проекты, не забывая об обслуживании уже существующих. Существует более 6200 плагинов.

#полезно #подборки_инструментов

👉 @frontend_mind

Кнопка "Отправить", сделанная с помощью CSS и JavaScript

#codepen #css #js

👉 @frontend_mind

OctoLinker - расширение, для упрощения навигации в GitHub

Обеспечивает быструю навигацию по коду благодаря превращению элементов кода (например, include, require или import) в кликабельные ссылки.

Особенности:
👉 Доступно на Chrome, Safari, Edge, Firefox, Opera
👉 Поддержка частных репозиториев
👉 Ссылается на документы API
👉 Связывает зависимости и файлы в pull request
👉 Распознаёт зависимости
👉 Получает древовидную структуру репозитория

Сайт: https://octolinker.vercel.app/
Гит: https://github.com/octolinker/octolinker

#полезно #инструменты

👉 @frontend_mind

Эффект печатной машинки, сделанный с помощью библиотеки Babel.js и SCSS

#codepen #scss #js

👉 @frontend_mind

Tingle.js - JS библиотека для создания всплывающих окон.

Особенности / преимущества:
✔️Интеграция CSS3 трансформаций
✔️Легко настраивается
✔️Легкая библиотека размером около 2 КБ
✔️Легко интегрировать в проект
✔️Удобный API
✔️Поддерживает медиафайлы
✔️Адаптирована под мобильные устройства

Сайт: https://tingle.robinparisi.com/
Гит: https://github.com/robinparisi/tingle

#библиотеки #полезно #js

👉 @frontend_mind

Анимированые Radio Buttons, сделанные с помощью SCSS

#codepen #scss

👉 @frontend_mind

Диагональ в двумерном массиве

Функция получает двумерный массив (5x5) случайных целых чисел. На диагонали все отрицательные целые числа должны быть изменены на 0, а остальные должны быть изменены на 1 (примечание: 0 здесь считается неотрицательным).

( Вы можете изменить ввод, если хотите, но лучше не изменять ввод )

Пример:

Входной массив

[
[-1, 4, -5, -9, 3 ],
[ 6, -4, -7, 4, -5 ],
[ 3, 5, 0, -9, -1 ],
[ 1, 5, -7, -8, -9 ],
[-3, 2, 1, -5, 6 ]
]
Выходной массив

[
[ 0, 4, -5, -9, 3 ],
[ 6, 0, -7, 4, -5 ],
[ 3, 5, 1, -9, -1 ],
[ 1, 5, -7, 0, -9 ],
[-3, 2, 1, -5, 1 ]
]

#codewars #легко #js

👉 @frontend_mind

Примеры эффектов при наведении на фотографию, сделанные с помощью SCSS

#codepen #scss

👉 @frontend_mind

Haiku Animator - инструмент для создания анимации.

Позволяет создавать высокоточные анимации на временной шкале для приложений и веб-сайтов.

Особенности:
👉 Временная шкала
👉 Открытый исходный код
👉 Работает со всеми основными браузерами и интегрируется с любым веб-кодом с поддержкой React, Vue и Angular.
👉 Анимация с помощью кода
👉 Кроссплатформенность
👉 Управление версиями

Оф.Сайт: https://www.haikuanimator.com/
Гит: https://github.com/HaikuTeam/

#полезно #инструменты

👉 @frontend_mind

Анимированная кнопка "Оформить заказ", сделанная с помощью SCSS и JS.

#codepen #scss #js

👉 @frontend_mind

Frontend дайджест за прошедшую неделю

👉 Доступен Firefox 90. В этой версии улучшили SmartBlock, была удалена встроенная реализация протокола FTP, устранен ряд уязвимостей и исправлены баги.

👉 Релиз Node.js 16.5.0. Главное нововведение - экспериментальная поддержка Web Streams API.

👉 Релиз Deno 1.12. Добавлена поддержка веб-сокетов и тредов в WebAssembly, REPL теперь поддерживает TypeScript.

👉 Анонс Ember 4.0. В новой версии будут удалены старые API, больше не поддерживается ни одна версия Internet Explorer. Релиз ожидается 20 сентября.

👉 Релиз пятой мажорной версии NoSQL СУБД MongoDB.

👉 Анонс Laravel 8.50. В новую версию будет добавлена отмена уведомлений, возможность иметь модели "Prunable", поддержка CommonMark.

👉 Вышла бета Deno Deploy. Отмечается, что используется собственная инфраструктура — никаких AWS и Cloudflare, — что позволяет добиться быстрых деплоев.

#frontend_дайджест

👉 @frontend_mind

Карусель фотографий, реализованная с помощью SCSS и библиотеки Babel.js

#codepen #scss #js

👉 @frontend_mind

Программист из Google выкладывает тесты и задачи по JavaScript -> @js_tests

Зайди и посмотри сколько сможешь решить

Flatpickr.js - JS библиотека для выбора даты и времени.

Особенности / преимущества:
✔️ Лёгкая и мощная библиотека
✔️ Независимая библиотека
✔️ Простой UX
✔️ Выбор диапазона
✔️ Возможность выбрать несколько дат
✔️ Удобный API
✔️ 8 тем оформления
✔️Отображает даты в удобном формате

Сайт: https://flatpickr.js.org/
Гит: https://github.com/flatpickr/flatpickr

#библиотеки #полезно #js

👉 @frontend_mind

Страница стилизованная под газету, с помощью свойства Grid.

#codepen #scss

👉 @frontend_mind

17 Лучших плагинов для Sublime Text

1. Package Control - Менеджер пакетов для Sublime

2. Emmet - Преобразовывает простые аббревиатуры в полноценные блоки кода

3. GitGutter - Добавляет возможность просматривать статус файла и отслеживать изменения прямо в редакторе.

4. Sublime Linter - Проверяет код на синтаксические ошибки.

5. Tabnine - Индексирует весь ваш проект, имея эти данные, он может предсказывать длинные имена файлов.

6. Auto-save - Автоматически сохраняет текущий файл после каждой модификации

7. JSHint - Добавляет возможности отладки JavaScript

8. ColorPicker - Плагин добавит возможность выбирать и подбирать цвет из круговой палитры в hex-формате

9. Bracket Highlighter - Этот плагин делает более читаемым подсвечивание скобок и тегов

10. Git Hubinator - Позволяет увидеть выделенные строки в удаленном репозитории GitHub или BitBucket.

11. Alignment - Позволяет быстро выравнивать свой код, чтобы сделать его более удобным для чтения.

12. Terminal - оптимизирует использование функций терминала

13. Doc Blockr - Упрощает документирование кода

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

15. Side Bar Enhancements - Улучшает боковую панель, добавляет файлы и папки

16. SFTP - Удаленное редактирование

17. LiveReload - обновляет браузер каждый раз, когда вы вносите изменения в файл

#полезно #подборки_инструментов

👉 @frontend_mind

Текст анимированный, с помощью Pug и Stylus.

#codepen #css

👉 @frontend_mind