GraphicsJS — JS библиотека для работы с графикой

Библиотека основанная на технологии SVG (VML для старых версий IE), позволяет создавать интерактивную и анимированную графику.

Особенности / преимущества:
✔️Открытый исходный код
✔️Небольшой вес
✔️Гибкий API
✔️Поддержка IE 6.0+, Safari 3.0+, Firefox 3.0+, Opera 9.5+ и Chrome 1.0+
✔️Виртуальный DOM

Сайт: http://www.graphicsjs.org/
GitHub: https://github.com/AnyChart/GraphicsJS

‍Работа с часовыми поясами в JavaScript

Недавно я работал над задачей добавления часовых поясов в JS-библиотеку календаря, которую ведёт моя команда. Мне было хорошо известно о никудышной поддержке часовых поясов в JavaScript, но я надеялся, что абстрагирование имеющихся объектов данных позволит легко решить большинство трудностей.

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

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

Памятка по современному JavaScript.

Этот репозиторий представляет из себя памятку по JavaScript и насчитывает множество ссылок на изучение языка для разного уровня и примеры кода, необходимые в реальной разработке.

https://github.com/mbeaudru/modern-js-cheatsheet/blob/master/translations/ru-RU.md

React Hooks простыми словами

В этой статье мы не сделаем великого открытия. Наша цель другая – рассказать про React Hooks настолько подробно и просто без трудной терминологии, насколько это возможно. Чтобы после прочтения статьи каждый понял про хуки всё. Эта статья будет полезна как начинающим React-разработчикам, так и тем, кто хочет, не уходя в глубины документации, получить практическую информацию в сжатом виде.


#React #Hooks #frontend

33 CSS генераторов, библиотек и тулзов упрощающих работу с CSS


1. glassmorphism.com - генератор эффекта глассморфизма (эффект матового стекла)

2. nighteye.app/dark-css-generator/ - генератор тёмных CSS. Вставляем URL сайта - получаем тёмную тему для своей страницы

3. neumorphism.io - создаёт градиенты и тени в стилистике неоморфизма.

4. shapedivider.app - генератор волн, кривых, стрелок и других загогулин

5. utopia.fyi - элегантное масштабирование шрифтов без breakpoints

6. transition.style - генерация Drop-in переходов

7. MoreToggles.css - нужно боооооольше переключателей

8. cssscanpro.com - удобный Devtools позволяющий стянуть понравившиеся CSS с любого сайта

9. shadows.brumm.af - генерация теней

10. stylestage.dev - витрина CSS стилей, попадаются интересные stylesheet

11. spiritapp.io - генерация анимации прямо в браузере

12. border-radius - генерация разных радиусов

13. 10015.io - комбайн, бекграунды, тени, градиенты, кривые, треугольники

14. larsenwork.com/easing-gradients/ - нелинейные градиенты

15. cssgrid-generator.netlify.app - Grid generator

16. accordionslider.com - генерация аккордеон-слайдеров

17. bennettfeely.com/clippy/ - обрезка картинок по трафарету

18. getwaves.io - генерация svg-вектора с заливкой волнообразной формы

19. Background - генератор бекграундов

20. pixelmap.amcharts.com - генератор карт

21. enjoycss.com - комбайн

22. cssfilters.co - фильтры инстаграмма на CSS

23. tridiv.com - 3D-редактор для создания объёмных моделей на чистом CSS

24. howtocenterincss.com - генератор стилей для центрирования

25. javier.xyz/img2css - преобразует изображения в CSS-код

26. pattle.github.io/simpsons-in-css/ - Simpsons чистом CSS 🤭

27. icons8.com/cssload/ru/spinners - подборка индикаторов загрузки

28. bennettfeely.com/flexplorer/ - площадка для демонстрации возможностей модели Flexbox

29. css3d.net/ribbon-generator/ - генератор красивых 3D ленточек

30. border-image.com - генератор CSS3 свойства border-image

31. bestcssbuttongenerator.com - генератор CSS3 кнопок

32. jonassebastianohlsson.com/specificity-graph/ - создание графов для стилей

33. new.s-sd.ru/ - генератор длинных теней

Подборка каналов для IT специалистов 🎯

Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.

GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub

CodePen 📌
https://yangx.top/codepen_1 Сообщество пользователей CodePen

Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных

Вакансии для программистов 📌
https://yangx.top/progjob

Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском

Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка

Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков

Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов

БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию

QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности

Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров

Английский 📌
https://yangx.top/UchuEnglish Английский с нуля

Математика 📌
https://yangx.top/Pomatematike Канал по математике

Арбитраж трафика 📌
https://yangx.top/partnerochkin CPA и арбитраж трафика

Крипта 📌
https://yangx.top/bitkoinoff Новости криптовалют

DeepFake 📌
https://yangx.top/deepfakenow Публикуем deepfake видео

Мир технологий 📌
https://yangx.top/mir_teh Видео из мира технологий

Создание лейаутов и сеток с помощью Angular CDK и Angular Material

В данной статье приведу пример решения с использованием размеров и устройств, которые предлагает Angular CDK.

#Angular #frontend

Наглядная статистика по JavaScript технологиям

Из гифки видно динамику изменения с 2016 года по 4 основным категориям:
- удовлетворение
- интерес
- использование
- осведомленность информацией

Например, программисты все меньше удовлетворены JS фреймворками и их развитием
Интерес к альтернативным фреймам, типа Svelte возрастает
Использование Angular на уровне, и разумеется он не мертв

И прочие интересные моменты.
Подробней можете посмотреть на сайте

Код жизни: что можно узнать о себе по дате рождения и как пофиксить баги в собственной жизни?

— «Ген программиста» идет в паре с трудоголизмом. Как поддерживать уровень энергии и избежать выгорания именно Вам? 🚀

— Больше половины вашего времени занимает работа. Как повысить уровень благополучия, самочувствия и удовлетворенности жизнью? 😻

— Гиперответственность и давление из-за сроков. Как замечать первые признаки стресса Вашего типа и правильно из него выходить? 🔥🙈

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

— Поговорим и деньгах и о том, как Вам их заработать 💸

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

Хотите чувствовать себя уверенней? Подписывайтесь на канал «Путь в тысячу ли» и получайте прогнозы каждый день!

Бегущая лошадь с эффектом замедления при клике.

#codepen #scss

Функция fetch()

Функцию Fetch API fetch() можно использовать для создания запросов. Принимая дополнительные аргументы, запрос можно настроить. Например, изменить тип запроса, заголовки, указать тело запроса и многое другое.

#javascript

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

10 особенностей Angular 13, которые должен знать каждый разработчик

https://javascript.plainenglish.io/10-features-of-angular-13-every-developer-should-know-5814c754f771

#Angular #frontend

Как подключиться к базе данных с помощью CSS

https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html

#css #frontend

Popper.js - JS библиотека, для реализации всплывающих подсказок на сайтах и web приложениях.

Особенности / преимущества:
✔️Легкая библиотека размером около 3 КБ
✔️Расширенная возможность настройки
✔️Легко интегрировать в проект
✔️Удобный API
✔️Открытый исходный код

Оф. сайт: https://popper.js.org/
Гит: https://github.com/popperjs/popper-core

#библиотеки #js

CSS-выражения от контейнера для дизайнеров

При работе над дизайном для веба приходится иметь дело с макетами для разных размеров экрана. Опираясь на эти макеты, разработчик определяет ширину или высоту окна браузера медиазапросами, а затем, исходя из этого, меняет макет. Именно так мы верстали веб последние 10 лет, и вот-вот всё станет еще лучше. У меня для вас хорошие новости.


CSS-выражения от контейнера — долгожданная для веб-разработчиков фича — скоро появится в CSS и с ней уже можно поэкспериментировать в Chrome Canary. В этой статье мы познакомимся с этой фичей поближе, и узнаем, как она повлияет на вашу работу как дизайнера, и не только. Неважно, пишете ли вы код или нет, если увидите какой-то незнакомый CSS, то можете полностью игнорировать его и идти дальше.

#css #frontend

🚀Toп 6 CSS фреймворков для ReactJS🖥️

1. Material UI - React компоненты для быстрой и легкой веб-разработки. Создайте свой собственный дизайн или начните с Material Design.
[https://material-ui.com/ru/]

2. AntD - Система дизайна для продуктов корпоративного уровня. Создайте эффективный и приятный опыт работы.
[https://ant.design/]

3. React-Bootstrap - Самый популярный интерфейсный фреймворк
Перестроен для React.
[https://react-bootstrap.github.io/]

4. Semantic UI - Semantic - это среда разработки, которая помогает создавать красивые, гибкие макеты с использованием удобного для человека HTML.
[https://semantic-ui.com/]

5. React ToolBox - это набор компонентов React, реализующий спецификацию Google Material Design. Он построен на основе самых модных предложений, таких как модули CSS (написанные на SASS), Webpack и ES6. Библиотека гармонично интегрируется с вашим рабочим процессом Webpack, она легко настраивается и очень гибкая.
[http://react-toolbox.io/#/]

6. Elemental UI - Набор инструментов пользовательского интерфейса для веб-сайтов и приложений React.js
[http://elemental-ui.com/]

Прими участие в масштабном онлайн-хакатоне «Moscow City Hack 2022» от Агентства инноваций Москвы!

Тебя ждут:
🏆 Призовой фонд 3 400 000 ₽;
💻 Задачи по разработке сервисов для мотивации студентов, привлечения волонтеров, цифрового маркетинга, импортозамещения и разоблачения fake news;
🧐 Эксперты от крупного бизнеса и Правительства Москвы;
🎓 Образовательная программа с мастер-классами и интенсивами;
🎁 Красочный мерч, подарки от партнеров и много крутых активностей 🔥

📅 Хакатон пройдет 10-13 июня 2022 года

Регистрируйся уже сейчас!
https://bit.ly/3LTgbLr
Узнать подробности и найти команду можно в нашем Telegram-чате t.me/MoscowCityHack

‍JavaScript: делаем селфи с помощью браузера

В этой статье я покажу вам, как делать селфи в браузере.

Мы разработаем простое приложение со следующим функционалом:
- при инициализации приложение запрашивает у пользователя разрешение на захват медиапотока (далее также — поток) из видеокамеры его устройства;
- захваченный поток передается в элемент video;
- из потока извлекается видеотрек (далее также — трек), который передается в интерфейс для захвата изображений;
- из экземпляра интерфейса извлекается список поддерживаемых возможностей (capabilities) и настроек (settings) для фото;
- из трека также извлекается список поддерживаемых возможностей и настроек;
- формируется список диапазонных полей (<input type="range">) для установки настроек для фото;
- пользователь имеет возможность снимать фото (take photos) и захватывать фреймы (grab frames);
- фото выводится в элемент img, генерируется ссылка для его скачивания;
- фрейм инвертируется и отрисовывается на холсте (canvas), генерируется ссылка для его скачивания.

#js #frontend

3D Room - Pure CSS
3D комната, сделанная с помощью PUG и SCSS
#codepen #scss
Подпишись👉 @codepen_1

Подборка инструменты отладки JavaScript

👉 Инструменты для веб-разработчика в браузерах: Chrome developer tools, Firefox developer tool, Safari Develop Menu, Edge Developer Tools. Стандартно, понятно, базово, пользуемся, тем что удобнее.

👉 ng-inspector — Кросс-браузерное расширение для отладки приложений на AngularJS, поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.

👉 Augury — расширение для Google Chrome и отладки приложений на Angular 2. Позволяет напрямую анализировать структуру приложения и рабочие характеристики, а также обнаружить изменения.

👉 debugger — Инструмент отладки для Chrome и Firefox от команды разработчиков Firefox. Позволяет переключаться между браузерами чтобы убедиться, что ваше приложение работает правильно. Легко настраивается.

👉 ESLint — Линтер для JavaScript. анализирует код по мере его написания и выявляет синтаксические ошибки. Доступен как пакет Node, также как плагин для Sublime Text 3 и VS Code.

👉 JS Bin — Позволяет тестировать и отлаживать код в команде, увидеть все изменения в реальном времени и добавлять библиотеки.

👉 JSON Formatter and Validator — Позволяет быстро сканировать сжатый объект JSON и выявить ошибки или ключи с неверными значениями.

👉 SessionStack — Набор инструментов для мониторинга. Они собирают данные на стороне клиента и помогают точно выяснить, что пользователи делают на веб-сайте. Предоставляет воспроизведение видео, чтобы помочь разработчикам воспроизвести пользовательские проблемы и ошибки.

👉 Raygun Error Monitoring — Помогает найти и оценить влияние ошибок JavaScript и выявить проблемы с производительностью. Легко и быстро настраивается.

👉 Postman — Предназначен для проверки запросов с клиента на сервер и получения ответа от бэкенда.

👉 Node Debug library — библиотека для реализации Node Inspector.

👉 Webpack — Предоставляет статистические данные. Webpack Analyze Web App, позволяет визуализировать статистику, генерируемую из Webpack.

Пишете на HTML, CSS и JS, но чувствуете, что для серьёзных проектов пока не хватает навыков?

Тимлиды ВКонтакте записали свой курс по современному фронтенду для junior и middle разработчиков.

Здесь упор будет сделан на практику — на протяжении 5 месяцев вы будете заниматься разработкой собственного новостного портала. Вы начнёте с создания статичных HTML-страниц и постепенно будете добавлять в свой проект новые фичи — админку, локализацию и тёмную тему.

Попутно вы разберётесь с деплоем, CI/CD, кэшированием и серверной оптимизацией — и в результате получите адаптивное и доступное приложение с production-ready сервисом, мониторингом и автотестами.

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

Переходите по ссылке и записывайтесь на курс до 18 мая — по промокоду FRONTEND1 действует скидка 10%.

Кстати, на сайте можно пройти бесплатную демоверсию.