CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Какое свойство CSS создаёт псевдоэлемент, который является первым потомком выбранного элемента. Часто используется для добавления дополнительного содержимого в элемент с помощью свойства content.
Anonymous Quiz
7%
:hover
32%
:after
56%
:before
3%
:focus
2%
:left
Как в JS удалить свойство (ключ: значение) c:3 из объекта obj? let obj = {a: 1, b: 2, c:3}
Anonymous Quiz
50%
delete obj.c
24%
remove obj.c
8%
obj = Object(remove c)
6%
obj.c = delete 3
11%
remove c['3']
Gurufy - отличный и удобный сервис для изучения React.js и его экосистемы. Осваивайте front-end быстро и легко!

Экосистема еще в процессе разработки, но основу уже можете начать изучать.

#react
🔥 Лучшее на канале за последнюю неделю

1) Gurufy - отличный и удобный сервис для изучения React.js и его экосистемы.
2) Vue 3. Основы для Начинающих - авторский онлайн-курс по Vue.js 3 от Владилена Минина.
3) Основные этапы разработки сайта под ключ.
4) CSS Animations: Obvious CTA Buttons - забираем в коллекцию крутые кнопки с анимацией на CSS.
5) Rubicons - pixel perfect иконки для пользовательского интерфейса.

Всем успешной разработки!

#Лучшее
Taskade — таск-менеджер для командной работы. Taskade выглядит как простой список задач, но на самом деле это база данных с древовидной структурой, которую можно преобразовать в любые рабочие процессы.

#инструменты
Honeycomb - это настраиваемая, в первую очередь мобильная, гибкая среда scss для создания веб-сайтов и веб-приложений, которые корректно реагируют на экран любого размера. В отличие от традиционных фреймворков, где размеры шрифтов и промежутки привязываются к фиксированному размеру на основе точек, Honeycomb изменяет размеры всех этих элементов в соответствии с окном просмотра пользователя, чтобы пользовательский интерфейс отлично смотрелся на устройстве любого размера.

#css #html
Markmap — библиотека JS, которая помогает визуализировать документы Markdown, с помощью создания интеллект-карт. Из текстового файла .md она берет всю информацию и визуализирует её в виде схем.

#javascript
Какой метод JS используется для клонирования елемента на странице?
Anonymous Quiz
3%
cloneDom()
51%
cloneElement()
8%
cloneHTML()
33%
cloneNode()
5%
cloneContent()
Ikonate - отличный пак настраиваемых векторных иконок для вашего проекта. Настроить можно толщину линий, цвет, размер.

#графика
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Image Effect - отличная реализация ховер-эффектов для изображений с применением clip-path. Забираем в коллекцию!

#html #css
SentinelJS - это крошечная библиотека JavaScript, которая упрощает настройку функции наблюдения, которая будет уведомлять вас каждый раз, когда в DOM добавляется новый узел, соответствующий заданному правилу CSS.

#javascript
Браузерные стили по умолчанию.

CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Каскадность — один из основных принципов CSS. 

Необходимо помнить, что у браузера всегда есть свои стили по умолчанию. Они загружаются до пользовательских стилей, что позволяет проще переопределять текущие значения.
Стили по умолчанию отличаются от браузера к браузеру, но именно они — причина того, что:

- заголовки имеют разные размеры;
- цвет текста — чёрный;
- маркеры списков — жирные точки;
- у всех элементов есть какое-то значение свойства display(например, block или inline).

Этот список огромен. Даже если у сайта всего одна таблица стилей, она всё равно смешивается с браузерными стилями по умолчанию. Самый простой способ избавиться от этих стилей - выполнить их сброс.

Пример 1 | Пример 2

#статьи #css
Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.


#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
CSS 3D Blend Mode Buttons - такая реализация кнопок в стиле Cyberpunk, станет украшением любого проекта. Кнопки сделаны на чистом CSS с использованием keyframes.

#css
Функциональное программирование на JavaScript. Как улучшить код JavaScript-программ.

Автор: Кайл Симпсон
О книге: 2018 год, 304 страницы, Русский язык, 125.46Mb

Содержание: Эта книга призвана научить вас применять методики функционального программирования в своем коде, используя стандарт ECMAScript 6 языка JavaScript. Она написана для разработчиков, имеющих хотя бы основные понятия об объектно-ориентированных программах и общее представление о тех трудностях, которые представляет разработка современных веб-приложений на JavaScript. 

#книги
Checkbot - протестируйте SEO / скорость / безопасность 100 страниц в один клик! Проверьте неработающие ссылки, HTML / JavaScript / CSS, перенаправления URL-адресов, повторяющиеся заголовки...

#расширения #сhrome
Как в HTML сформировать ссылку-якорь в атрибуте href?
Anonymous Quiz
14%
anchor
3%
$anchor
6%
&anchor
74%
#anchor
2%
*anchor
2%
~anchor
🔥 Лучшее на канале за последнюю неделю

1) CSS Image Effect - отличная реализация ховер-эффектов для изображений с применением clip-path.
2) Honeycomb - это настраиваемая, в первую очередь мобильная, гибкая среда scss для создания веб-сайтов и веб-приложений, которые корректно реагируют на экран любого размера. 
3) Checkbot - протестируйте SEO / скорость / безопасность 100 страниц в один клик
4) Ikonate - отличный пак настраиваемых векторных иконок для вашего проекта. 
5) Книга - Функциональное программирование на JavaScript. Как улучшить код JavaScript-программ.

Всем успешной разработки!

#Лучшее
Визуализация промисов и Async/Await.

Хорошая статья, которая помогает детально разобраться с промисами и Async/Awai. Промисы были представлены в ES6 и заняли важную часть в повседневной разработке.

#статьи #javascript
CSSeffects Snippets – замечательная коллекция CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.

#vue