Создание пиксельных эффектов на JavaScript и Canvas

00:00:00 Intro
00:00:55 Project 1 INTRODUCTION to pixel manipulation for beginners
00:02:30 How to bring image into HTML canvas project
00:05:15 How to analyze image for pixel data
00:11:58 How to turn image into grayscale
00:14:55 Project 2 BLACK AND WHITE PIXEL RAIN using image data
00:19:45 Particle system using JavaScript classes
00:25:18 Connect particle movement to pixel data
00:43:50 Project 3 PIXEL FLOW EFFECTS
00:53:12 HTML canvas gradients, filters and other experiments
01:04:48 Project 4 INTERACTIVE PARTICLE TEXT
01:13:50 Creating particles
01:21:33 Particle physics and mouse interactions
01:35:46 How to shape particles as letters
01:49:15 Constellations effect from particles.js with vanilla JavaScript

Я ❤ Фронтенд 2021

01. Максим Сальников — Автоматизируем сервис-воркер с Workbox 6
02. Артем Арутюнян — Архитектура менеджера состояния
03. Роман Дворнов — JSON: push the limits
04. Валерия Курмак — Пользовательский опыт незрячего человека
05. Андрей Печкуров — ES6-коллекции на примере V8: у ней внутре неонка
06. Василика Климова — Расширяем реальность
07. Разбор заданий Capture the flag и награждение победителей
[Воркшоп] 08. Юлия Миоцен — Палка, палка, огуречик. Рисуем персонажную анимацию на CSS
[Воркшоп] 09. Андрей Мелихов — Теория и практика dependency injection
[Воркшоп] 10. Дмитрий Николаев — Создание приложений для голосовых ассистентов
Стелим соломку для фронтенда

https://www.youtube.com/playlist?list=PLKaafC45L_SQvmgHWgtUeX_Y59NiZhmEF

Привет! У нас прекрасные новости 🥰

26 февраля мы в четвёртый раз соберёмся на конференции «Я 🧡 Фронтенд», чтобы признаться в любви к вебу, поделиться друг с другом опытом и провести время в отличной компании.

В этом году мероприятие станет ещё масштабнее: 14 февраля мы запустили две недели онлайн-активностей на любой вкус. Челленджи, воркшопы, лекции, CTF, котики, коллаборации и подкасты — каждый сможет найти себе любимое занятие. Всё бесплатно, потому что любовь к фронтенду не купишь за деньги.

Боитесь пропустить всё самое интересное? Регистрируйтесь и мы заботливо напомним о том, что интересно именно вам: ilovefrontend.ru

Публичное собеседование

Разбор технического собеседования на позицию senior front-end developer

https://www.youtube.com/playlist?list=PLLtDv0NfxtZwOkCvK2omERQDToOWuBChS

Тайна меняющейся фавиконки

Вчера на работе разработчик обратился ко мне с проблемой. Разговор шел примерно так:

Дев: Привет, Альваро! У нас проблема.
Я: Что не так?

Дев: Фавиконка на сайте неправильная. Это не наш корпоративный логотип.

Я: Что????

Дев: показывает экран

Я: .....


Rus https://habr.com/ru/post/651877/
Eng https://alvaromontoro.com/blog/67996/the-mystery-of-the-changing-favicon

404 black hole

Страница 404, реализованная на Vue.

https://codepen.io/justjspr/pen/qBZYmjY

​На курсе «Мидл фронтенд-разработчик» студенты становятся уверенными мидлами за пять месяцев, а не за полтора года. 
→ Приходите учиться, если вы разбираетесь в HTML, CSS, JavaScript — мы поможем повысить грейд. 

Выпускники смогут браться за более сложные задачи, чем одностраничные сайты или простые веб-сервисы. На курсе мы поможем глубже разобраться: 
— в алгоритмах и структурах данных; 
— в паттернах проектирования;
— в том, как работают популярные в веб-разработке технологии.
Что будет на учёбе:
⬛️ Код-ревью и обратная связь от старших разработчиков из Яндекса и других IT-компаний.
⬛️ Обучение на реальных рабочих задачах: студенты создадут мессенджер и веб-игру с нуля.
⬛️ Наставники и менторы будут делиться опытом на вебинарах и встречах один на один.
⬛️ Кураторы и дедлайны не дадут прокрастинировать.
⬛️ Карьерные консультации: наши специалисты помогут найти новый проект или сделать так, чтобы на текущей работе вам начали давать более амбициозные задачи.

→ Старт потока — 3 марта. Учёба длится пять месяцев.
→ Познакомьтесь с курсом и оцените свои силы — это бесплатно.

Подборка лучших фреймворков ReactJS💡

Next JS
Next.js дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.

Gatsby JS
Создавайте невероятно быстрые и насыщенные веб-интерфейсы, объединяющие все ваши любимые службы и контент. Создавайте сайты электронной коммерции, целевые страницы, блоги и многое другое за считанные минуты.

Remix JS
Создание продукта - это весело, но возиться с инструментами сборки и загрузкой данных - нет. Remix знакомит вас с последними достижениями в области веб-разработки (а затем и некоторых других), не оставляя позади фундаментальных принципов, которые делают ее отличной.
Remix, созданный для бессерверной эпохи и использующий наш открытый исходный код, который уже используется в миллионах проектов, дает вам прочную основу для создания лучших веб-сайтов. Вам понравятся производительность и продуктивность, которые дает вам наш новый (и традиционный) подход.


Blueprint JS

Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).

Подборка User Flow сервисов


1. Overflow - Специализированный сервис для работы с user flow. Красивый визуал, работа в команде, работает с Adobe XD, Figma, Sketch, and Photoshop

2. Figma - удобно простраивать user flow сразу на макетах. Для удобства используйте User Flow Kit

3. Mockplus - популярный онлайн инструмент для создания мокапов и user flow в одном месте

4. Wireflow.co - бесплатный онлайн-инструмент с открытым исходным кодом

5. Diagrams.net - Удобный Flowchart инструмент с возможностью сохранения на google drive, dropbox, github.

6. Flowmapp.com - создание быстрых небольших user flow. В free версии доступен только 1 проект

7. Whimsical.com - набор инструментов для совместной работы

Разыскивается Frontend-developer в Superjob! Зарплата от 120 000 руб./месяц

SuperJob — это инновационная IT Компания, которая 20 лет успешно создает технологии для подбора персонала и поиска работы помогает соискателям найти работу, а работодателям приобрести ценного сотрудника.

Присоединяйся к команде!
Пиши в телеграм: t.me/sjmusina (наш рекрутер Анастасия)

Neon реализован CSS свойством text-shadow

https://codepen.io/neilcarpenter/pen/kyLqaO

Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL.

Особенности / преимущества:
✔️Вы можете создавать различные геометрические формы, объекты, источники света, тени, загрузчики, материалы, математические элементы, текстуры и т.д.
✔️Поддержка типизированных массивов таких как: Blob, Promise, URL API, Fetch.
✔️Поддерживает Chrome 9+, Opera 15+, Firefox 4+, IE 11, Edge и Safari 5.1.

Сайт: https://threejs.org/

GitHub: https://github.com/mrdoob/three.js/

Примеры использования: https://codepen.io/search/pens?q=three.js

Медиа-запросы

Медиа-запрос используется для адаптации верстки в зависимости от различных размеров экранов. Условия проверяют размер экрана, ориентацию, разрешение и другие свойства. Если все условия соблюдаются, все правила CSS в медиа-запросе будут применены к странице. Это позволяет адаптировать страницы к различным типам устройств, таких как ноутбуки, планшеты, телефоны.

Подписывайтесь на канал 👉@coddy_academy

#css

5 причин ненавидеть то, как JavaScript работает с датами

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

Подробнее

Hat. sh - это веб-приложение, обеспечивающее безопасное шифрование локальных файлов в браузере. Оно быстрое, безопасное и использует современные криптографические алгоритмы с шифрованием/дешифрованием потока AEAD. Во второй версии hat.sh введено эффективное с точки зрения памяти внутрибраузерное шифрование больших файлов с использованием потоков с помощью libsodium.


GitHub
Сайт

Как работают React Components

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

Подробнее

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

Сайт: https://bundlephobia.com/
GitHub: https://github.com/pastelsky/bundlephobia