CodeRoll | Frontend

Superhero.js Сайт, на котором собрано множество статей о создании, тестировании и поддержке больших приложений JavaScript. В них объясняется синтаксис JavaScript, организация проектов, тестирование кода и многое другое. Кстати, у сайта зачетный дизайн! Ссылка на ресурс #javascript

Вкладывание тэгов Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами. Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой. Очень важно, чтобы разметка сайта была валидна! Поэтому, если есть сомнения, проверьте на данном сайте. Ссылка на сайт #html

Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇 https://t.me/+kx7oWHPduEI5Y2Zi #реклама

Скинуть секретный архив с платными материалами и книгами для программистов? Хм, давай - 36 👍👍👍👍👍👍👍👍 69% Ещё не знаю - 16 👍👍👍👍 31% 👥 52 человека уже проголосовало.

Странный web Статья посвящена странному вебу, а именно сайтам без какой-либо конкретной задумки. Некоторые из них и вправду интересные и залипательные.  Иногда полезны и вот такие бессмысленные творения веба, хотя бы просто для того, чтобы снять напряжение и повеселиться! В статье, вы найдете ссылки на эти сайты и краткое описание. Ссылка на статью #статьи

Шаблоны верстки Делимся ресурсом, на котором собраны шаблоны с готовым кодом HTML и CSS для верстки различных элементов: - кастомных чекбоксов и радио-баттонов, - переключателей, - "липкого" хэдэра и футера, - аккордиона,  и многого другого! Ссылка на ресурс #дизайн

npm пакет Часто разработчики из проекта в проект копируют различные части кода.   Например, в React повторяются одни и те же компоненты в разных проектах. И чтобы постоянно не заниматься копипастом, можно создать npm пакет для необходимого React компонента и в дальнейшем просто его устанавливать. Статья как раз на эту тему! Читать статью #nodejs

React Form В интернет-магазинах часто используются многоэтапные формы для сбора всей необходимой информации о пользователе для оформления заказа.  И вы можете научиться создавать такие формы в React! Для этого советуем прочитать данную статью и повторить все этапы создания многоэтапной формы. Читать статью #react

Omatsuri Еще один полезный ресурс в вашу копилку! Здесь вы найдете: - генератор треугольников - генератор теней - генератор градиентов - конвертер SVG в JSX - конвертер картинок в формат Base64 и еще многое другое. Ссылка на ресурс #инструменты

QR code Для генерации кодов существует не мало сторонних ресурсов, но всегда полезно знать, как можно реализовать подобную вещь самому. Делимся обучающей статьей, как с помощью JavaScript создать генератор QR кода. Ссылка на статью #js

CSS градиент Для создания красивого градиента, порой недостаточно указать только два цвета. Например, при создании сине-желтого градиента, можно заметить по середине размытую и сероватую зону. О CSS градиентах и о том, как избежать подобных несовершенств подробно в статье! А если вы не совсем хотите вникать в данную тему, в конце статьи вы найдете ссылку на генератор градиентов. Ссылка на статью #css

Пишете на Python или Go и хотите работать в Яндексе? Или хотите перейти на них с другого языка программирования? Тогда приглашаем 26–27 февраля на Fast Track для бэкенд-разработчиков. На мероприятии, которое пройдет в онлайн-формате, вы сможете за пару дней получить оффер в команду, которая разрабатывает FinOps платформу Яндекса. FinOps платформа — это внутренняя высоконагруженная финансово-операционная система, через которую проходят денежные транзакции всех сервисов Яндекса. Приходите работать с нами, задачи сложные, но действительно интересные. Регистрируйтесь, решайте отборочный тест и до встречи 26 и 27 февраля! #реклама

Emmet - это расширение для редакторов кода, которое упрощает и повышает скорость написания кода за счет использования сниппетов. Например, написав div>ul>li*3, вы можете создать вот такой блок: <div>  <ul>    <li></li>    <li></li>    <li></li> </ul> </div>. И сэкономить прилично времени!  Если вы еще не освоили emmet, то сейчас самое время. Быстрый мини-курс из статьи поможет вам в этом!  Ссылка на статью #статьи

Портфолио У вас есть готовые работы для портфолио, но вы никак не можете собрать их все в одном месте? Для вас бесплатный шаблон для сайта-портфолио разработчика! Он многостраничный и адаптирован под разные экраны. В демо-версию встроен color picker, для возможности подбора цвета основной темы. Пользуйтесь на здоровье! Ссылка на демо-версию Ссылка на GitHub репозиторий #дизайн

Динамическое автозаполнение При вводе в строку запроса Google, сразу предлагаются варианты для поиска и с вводом каждого нового символа генерируются новые варианты. Это и есть динамическое автозаполнение строки поиска. Как реализовать подобную вещь с помощью Node.js и React подробно описано в статье. Ссылка на статью #react #nodejs

React Animation Иногда хочется оживить сайт и добавить немного анимации. Здесь на помощь приходят специальные библиотеки для этой цели. В статье представлен обзор трех библиотек анимаций для React: - React Transition Group - React Reveal - React Spring Ссылка на статью #react

По каким критериям рекламодатель выбирает сайт, которому заплатит за размещение? Какие факторы необходимо учитывать вебмастеру? Какой контент привлекает интересную рекламодателю аудиторию на сайт? Узнаем на бесплатном вебинаре от RTBSape 17 февраля в 14:00. СЕО RTBSape Сергей Самонин поделится исследованием предпочтений рекламодателей и расскажет, как сделать свой сайт привлекательным для размещения рекламы и кратно увеличить прибыль от монетизации. Контент-продюсер Tilda Publishing Сергей Болисов раскроет секреты работы с контентом сайта для разных аудиторий. На вебинаре обсудим: 🔹По каким принципам рекламодатели выбирают площадки; 🔹Как попасть в WhiteList крупных рекламодателей; 🔹Как работать с рекламными сетями;  🔹Как 99% рекламодателей анализируют качество трафика на сайте; 🔹Как контент помогает таргетироваться на нужную ЦА; 🔹Работа с контентом для разных сегментов, на что обратить внимание. #реклама

Vuestic UI Vuestic UI - это UI библиотека, содержащая более 50 многофункциональных компонентов. Она позволяет настраивать компоненты глобально через конфигурации и переменные CSS. Пользовательский интерфейс Vuestic совместим с Vue.js 3.0, готов к работе с i18n и поддерживает все современные браузеры. Ссылка на официальный сайт #инструменты

Контент псевдоэлемента У псевдоэлементов ::before и ::after есть свойство content, куда можно записать текст, символ Unicode и даже CSS функцию attr(данная функция возвращает значение атрибута, указанного в элементе). В статье показан пример, как с помощью JavaScript можно получить значение CSS свойства content. Ссылка на статью #js

CSS тест Небольшой тест на знание CSS. Определите ваши пробелы! Ссылка на тест  #сss