Frontend разработчик
11.7K subscribers
1.75K photos
489 videos
44 files
2.7K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
加入频道
Подборка JavaScript библиотек для построения диаграмм

По мере того, как увеличиваются объёмы и сбор данных, необходимость визуализации этих данных становится всё более актуальной. Разработчики ищут способы объединять миллионы записей баз данных в красивые диаграммы, чтобы пользователи могли быстро и интуитивно воспринимать информацию.
Подробнее
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация при прокрутке, сделанная при помощи библиотеки Babel.js

https://codepen.io/ste-vg/pen/GRooLza
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Создание эффекта многоуровневого скроллинга с помощью чистого кода CSS в Chrome

Код CSS — это мощный инструмент, который вы можете использовать для создания многих продвинутых функций пользовательского интерфейса. В прошлом эти функции использовали библиотеки JavaScript.

В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице.

Подробнее
👍4👎2
Что будет выведено в консоль? 👇
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Stick Hero with Canvas

Игра сделанная с использованием CSS, JavaScript и Canvas

https://codepen.io/HunorMarton/pen/xxOMQKg
👍11
Forwarded from Frontend Советы
Как сделать размытие изображения в css?

Сделать размытие изображения в CSS можно следующим образом:

<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="путь к картинке" />
</body>


@frontend_sovet

#css
👍14👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Tilting Maze game

Игра "Лабиринт", сделанная с использованием CSS и JavaScript.

https://codepen.io/HunorMarton/pen/VwKwgxX
👍21🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Parallax layers with GSAP


Вся сцена - это одна большая svg картинка, которая анимируется при прокрутке при помощи библиотеки gsap.

https://codepen.io/cassie-codes/pen/abwNoya
👍13🔥1
Ищем проблемные места в node.js-приложениях

https://youtu.be/n_65k_uSq2w
👍3
Flex и Grid наглядное объяснение

https://ishadeed.com/article/learn-box-alignment/
👍15🔥1
Thomas Watson о дебаге nodejs через дампы памяти и снепшоты

https://youtu.be/dyaux-pqq7o
Как убрать лишние пробелы из строки в javascript?

Как вариант использовать регулярные выражения, пример:

var stringTest = " I am Test String ";
// IamTestString
console.log(stringTest.replace(/\s+/g, ''));



Второй вариант это разбить на массив по пробелы и потом соединить строку снова:

var stringTest = " I am Test String ";
// IamTestString
console.log(stringTest.split(' ').join(''));


#javascript

Подписывайтесь на канал 👉@coddy_academy
👍6
Подборка каналов для IT специалистов 🎯


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

Системное администрирование 📌
https://yangx.top/i_DevOps Все для DevOps
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 Чат системных администраторов

Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека 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 GameDev: разработка игр

Программирование, Биг дата, книги 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
https://yangx.top/coddy_academy Академия кода

Шутки программистов 📌
https://yangx.top/itumor 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 Новости криптовалют
👍3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Smoke Ring > Speedometer
Спидометр сделанный с использованием Canvas, SVG и библиотеки GSAP.js

https://codepen.io/creativeocean/pen/QWdpzPg
👍6🔥4
Сервисы для тестировании html-верстки

iloveadaptive — уникальный сервис по разработке и тестированию адаптивной HTML-верcтки под все устройства.

BrowserStack и lambdatest — SAAS-платформа для тестирования frontend на эмуляторах реальных устройств, запущенных в виртуальной машине сервиса.
🔥8👍2
Всем привет!
Ребята создали чат-бота, который рассылает релевантные Frontend вакансии без спама.
Настрой бота за 1 минуту и получай предложения отобранные по твоим предпочтениям
@MasterHuBot
👍1
Knockout - JavaScript библиотека MVVM (Model-View-View Model)

Упрощает создание интерактивных пользовательских интерфейсов для веб-сайтов и веб-приложений. Использует наблюдателей, чтобы ваш UI автоматически синхронизировался с моделью базы данных.

Особенности / преимущества:
✔️Автоматическое обновление интерфейса при изменении модели данных
✔️Просто связывать элементы DOM с данными модели
✔️Отслеживание зависимостей
✔️Быстрое создание шаблонов UI
✔️Открытый исходный код
✔️Лёгкий вес (66КБ)
✔️Простой API
✔️Поддерживает все основные браузеры (IE 6+, Firefox 3.5+, Chrome, Opera, Safari)

Сайт: https://knockoutjs.com/
Гит: https://github.com/knockout/knockout
👍3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
3D Orange Switch (Pure CSS)

Анимированный переключатель, сделанный на чистом CSS.

https://codepen.io/ykadosh/pen/jOwjmJe
🔥19👍5