CodeRoll | Frontend

Новости от команды Лектрума 🔥 14 апреля в 19:30 по Киеву/Москве пройдёт онлайн-воркшоп на тему «Продвинутый React-разработчик 2021». 🏋️‍♂️ Разберёмся с MobX, TypeScript и другими инструментами на практике 💪 ⚠️ Записи не будет. Регистрация через сайт. ⬇️ Программа: 🎯 Состояние сегодняшней экосистемы React 🎯 Создание мини-приложения на React и TypeScript 🎯 Извлечение пользы от применения TypeScript 🎯 Правильное применение Redux и MobX 🎯 Развеивание мифов о Redux, MobX 🎯 Точки роста зарплаты в 2021-м году Для кого: ✔️ Веб-разработчиков, которые работают с устаревшими инструментами ✔️ Новичков, которые хотят разрабатывать React-приложения ✔️ Самоучек, которые запутались на своём пути

Blueprint - это набор инструментов пользовательского интерфейса на основе React. Он оптимизирован для создания сложных веб-интерфейсов с высокой плотностью данных для настольных приложений, работающих в современных браузерах и IE11. #react

CSSBattle - соревновательная игра с кодом CSS, Используйте свои навыки CSS для реализации целей с минимально возможным кодом. Кто лаконичнее написал работоспособный код — тот и победил! #css

Хороший сайт — тот, который приносит вебмастеру доход💰 8 апреля в 14:00 на бесплатном вебинаре «Проверенные способы монетизации сайта» разбираемся, как монетизировать сайт и выгодно продавать рекламу. Эксперты из RTBSape и LuckyAds расскажут про плюсы и минусы работы с медийной и нативной рекламой, поделятся лайфхаками и успешными кейсами. Спикеры: 🔸Сергей Самонин — CEO RTBSape, спикер конференций РИФ+КИБ, ECOM Expo и др. 🔸Павел Тычков — руководитель отдела по работе с вебмастерами LuckyAds Приходите на вебинар и узнайте, как получать максимальный доход с сайта в любое время! Для участия необходимо зарегистрироваться по ссылке.

🔥 Лучшее на канале за последнюю неделю 1) Creative Wave Button - креативная реализация кнопки с эффектов волны без применения javascript.  2) CSS: полное руководство по функции calc(). 3) Popmotion - библиотека функциональной и реактивной анимации 4) Simple Vue 8 Puzzle - реализация интерактивных пазлов в стиле "15 - пятнашки" на Vue. 5) Pure - набор небольших адаптивных модулей CSS, которые можно использовать в каждом веб-проекте. Всем успешной разработки! #Лучшее

​​Ты тоже сможешь сверстать собственный YouTube, если выполнишь все задания! Нас часто просят помочь начинающим разработчикам в освоении вёрстки. Поэтому мы решили запустить движуху, на которой за 4 дня можно сделать полноценный проект в портфолио. Не банальный лендинг, а популярный видеохостинг. Программа интенсива для тех, кто любит больше подробностей: ✔️ День 1 — Достанем из макета графику и шрифты  — Создаем папку с проектом и делаем каркас  ✔️ День 2 — Пишем разметку на HTML — Создаем стили для сайта на CSS  ✔️ День 3 — Делаем настройки сайта для мобильных  — Проверяем стили нашего сайта на смартфоне  — Проводим тесты через BrowserStack  ✔️ День 4 — Оживляем сайт с помощью JavaScript  — Добавляем CSS анимацию  Переходи по ссылке и получи приглашение: https://telegram.me/gloacademy_bot?start=6068c06b810d841ae1dace0e

Rubber Icons — большой пак иконок для интерфейсов. Набор содержит более 570 иконок, в трех начертаниях, двух размерах 24px и 32px и форматах Figma, Sketch, SVG, PNG. #графика

Popmotion - библиотека функциональной и реактивной анимации, весит всего 11 килобайт. Позволяет разработчикам создавать анимацию, создавать действия, представляющие собой потоки значений, которые можно запускать и останавливать и создавать с помощью CSS, SVG, React, three.js и любого API, принимающего число в качестве входных данных. #javascript

Ответ на логическую задачку. Для раздела имеющихся лошадей необходимо заимствовать еще одну, после чего их общее количество станет 18. Раздел этого количества даст 2, 6 и 9 лошадей, которых в сумме окажется 17. Одна лошадь из 18 оказалась как бы «лишней» — это заимствованная лошадь, которую следует вернуть владельцу после раздела имущества. Можно решить головоломку и арифметическим способом: пропорцию 1/2 : 1/3 : 1/9 достаточно умножить на 18 и получится тот же результат. Ответ: 2, 6 и 9 лошадей.

React Select - гибкий и красивый элемент управления Select Input для ReactJS с поддержкой множественного выбора, автозаполнения, асинхронности и создания. #react

Creative Wave Button - креативная реализация кнопки с эффектов волны без применения javascript. Забираем в коллекцию! #codepen

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

Cockpit - простая платформа контента для управления любым структурированным контентом. Cockpit идеально подходит, если вы хотите поддерживать несколько устройств или вам нужен пользовательский интерфейс управления контентом для конструкторов статических сайтов. #cms

Doom scroller - необычная библиотека JavaScript, которая поможет вам избежать бесконечного скроллинга страницы. #javascript

Ackee - самостоятельный аналитический инструмент на основе Node.js для тех, кто заботится о конфиденциальности. Ackee работает на вашем собственном сервере, анализирует трафик ваших веб-сайтов и предоставляет полезную статистику в минималистичном интерфейсе.  Основные особенности: - Данные сделаны красивыми. - Безопасно и анонимно. - Ackee на 100% имеет открытый исходный код и размещается самостоятельно, что обеспечивает полную прозрачность. - Собирайте данные с помощью централизованного API GraphQL или создайте свой собственный интерфейс и сервис на основе Ackee. #node

Pure - набор небольших адаптивных модулей CSS, которые можно использовать в каждом веб-проекте. Pure основан на Normalize.css и предоставляет макет и стиль для собственных элементов HTML, а также наиболее распространенные компоненты пользовательского интерфейса. Это то, что вам нужно, без лишнего мусора. #css #html

CSS: полное руководство по функции calc(). Функция calc() — это средство для работы с числовыми свойствами Вот пример её использования: .main-content {   /* Вычесть 80px из 100vh */   height: calc(100vh - 80px); } Единственное место, где можно использовать функцию calc() — это значения CSS-свойств. В выражениях, вычисляемых с помощью calc(), можно использовать операторы +, -, * и /. Но в их применении есть некоторые особенности. #статьи #css

Simple Vue 8 Puzzle - реализация интерактивных пазлов в стиле "15 - пятнашки" на Vue. Забираем в коллекцию! А кому не надо, можете просто позалипать) #vue #codepen

Vite - это новый вид инструментов сборки для веб-разработки. Подумайте о предварительно сконфигурированном dev-сервере + сборщик, но более компактном и быстром. Он использует встроенную в браузер поддержку ES модулей и инструменты, такие как esbuild, для быстрого и современного опыта разработки. #инструменты

🔥 Лучшее на канале за последнюю неделю 1) Rico's cheatsheets - огромнейшая коллекция шпаргалок на все случаи жизни для разработчика. 2) Vue Hover Responsive Parallax Cards - красивая реализация карточек. 3) TweenJS - это простая, но мощная библиотека JavaScript для анимации HTML элементов. 4) Лучшие движки для разработки игр, которые были рассмотрены на нашем канале. 5) Tails - это онлайн инструмент для создания перетаскиваемых страниц, созданный для работы с TailwindCSS. Всем успешной разработки! #Лучшее