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
🔥 Лучшее на канале за последнюю неделю

1) 13 бесплатных хостингов в 2021 году.
2) HtmlReference.io - это бесплатное руководство по HTML. В нем есть все элементы и атрибуты.
3) Algolia Places – библиотека JavaScript для автоматического заполнения форм.
4) Kolumna - отличный онлайн-инструмент, который пригодится как для верстальщиков, так и для дизайнеров. 
5) GEE! ME - это отличный набор бесплатной flat графики, 100 персонажей и более 400 самых крутых объектов.

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

#Лучшее
This media is not supported in your browser
VIEW IN TELEGRAM
Vue Hover Responsive Parallax Cards - красивая реализация карточек. При наведении происходит параллакс эффект. Забираем в коллекцию!

#vue #codepen
TweenJS - это простая, но мощная библиотека JavaScript для анимации HTML элементов. Позволяет легко создавать сложные анимации движения путем объединения команд.

#javascript
Межсайтовый скриптинг (XSS) - тип уязвимости веб-сайта, при которой вредоносный скрипт внедряется в сайт или приложение, который затем устанавливает вредоносное ПО в браузер жертвы.

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

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

#статьи
Веб-компоненты в действии

Автор: Бен Фаррелл
О книге: 2020 год, 461 страница, Русский язык, 3.09Mb

Содержание: Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на основе компонентов. В этой книге подробно описываются рабочие процессы, которые дают вам полный контроль над стилями и поведением компонентов и существенно упрощают их создание, совместное и повторное использование в проектах. 

#книги
Tails - это онлайн инструмент для создания перетаскиваемых страниц, созданный для работы с TailwindCSS. Более 150+ компонентов, которые помогут Вашему проекту выглядеть привлекательно.

#инструменты
Evil Icons - бесплатный набор иконок SVG, созданный специально для веб-проектов. Доступен для Ruby, Node.js, Grunt / Gulp. Просто используйте имена значков со своими шаблонами и стилями - а все остальное будет сделано автоматически.

#графика
Rico's cheatsheets - огромнейшая коллекция шпаргалок на все случаи жизни для разработчика. шпаргалки как для инструментов разработки, так и для языков программирования.

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

#node
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Color/Gradient Editor - реализация ползунков с регулировкой цвета, код которого мгновенно отображается в соответствующем инпуте.

#codepen
Благодаря репозиторию RealWorld можно, без лишних сложностей, освоить базовые концепции и идеологию некоего нового фреймворка.

Рассматриваемый репозиторий позволяет выбрать любую из поддерживаемых им технологий для клиентской разработки (React, Angular 2 и многие другие), любую серверную платформу (среди них, например, Node.js и Django) и, интегрировав их друг с другом, увидеть реальный пример приложения.

#полезное
Лучшие движки для разработки игр, которые были рассмотрены на нашем канале.

1) GDevelop - это кроссплатформенный игровой движок с открытым исходным кодом на JS.
2) MelonJS - это легкий, но мощный фреймворк, разработанный с нуля, чтобы предоставить настоящую игровую платформу.
3) ImpactJS - это игровой движок JavaScript, ориентированный в основном на разработку 2D-игр.
4) Babylon.JS - Невероятно мощный движок веб-рендеринга, с помощью которого можно создавать игры, создавать объекты в 3D. 
5) PhaserJS - это отличный фреймворк для разработки игр, поддерживаемый сообществом, готовый для всех ваших настольных и мобильных нужд. 
6) PixiJS - это библиотека рендеринга, которая позволит вам создавать насыщенную интерактивную графику, кроссплатформенные приложения и игры.
7) PlayCanvas - веб-среда для разработки игр. Это означает, что вы используете их платформу для написания своего кода, его тестирования, настройки ваших сцен.

#javascript
С каким JS фреймфорком/библиотекой вы бы больше никогда не работали?
Anonymous Poll
8%
Vue
47%
jQuery
9%
React
18%
Angular
20%
Backbone
15%
Ember
13%
Svelte
17%
Polymer
23%
Ни с одним из перечисленных
🔥 Лучшее на канале за последнюю неделю

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

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

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

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Simple Vue 8 Puzzle - реализация интерактивных пазлов в стиле "15 - пятнашки" на Vue. Забираем в коллекцию! А кому не надо, можете просто позалипать)

#vue #codepen
CSS: полное руководство по функции calc().

Функция calc() — это средство для работы с числовыми свойствами
Вот пример её использования:

.main-content {
  /* Вычесть 80px из 100vh */
  height: calc(100vh - 80px);
}

Единственное место, где можно использовать функцию calc() — это значения CSS-свойств. В выражениях, вычисляемых с помощью calc(), можно использовать операторы +-* и /. Но в их применении есть некоторые особенности.

#статьи #css
Pure - набор небольших адаптивных модулей CSS, которые можно использовать в каждом веб-проекте.

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

#css #html
Ackee - самостоятельный аналитический инструмент на основе Node.js для тех, кто заботится о конфиденциальности. Ackee работает на вашем собственном сервере, анализирует трафик ваших веб-сайтов и предоставляет полезную статистику в минималистичном интерфейсе.

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

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

#javascript