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. Забираем в коллекцию!

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

Основные преимущества:
- Удобное асинхронное серверное программирование благодаря встроенному Fibers.
- Отлично спроектированная абстракция для работы с данными через коллекции.
- Абстракция для вызова серверных методов, выглядящая как вызов асинхронной функции с callback'ом.
- Удобный деплой приложений.
- Протокол DDP, призванный заменить REST API. Это очень простой но мощный протокол, основанный на EJSON (расширенный JSON). DDP поддерживает RPC и двустороннюю передачу данных, работает поверх WebSockets и SockJS.
- Best practices enforcement. HTML, CSS, LESS или coffeescript должны быть валидными (иначе проект не скомпилируется), чёткое разделение между шаблонами (spacebars — наследник handlebars), css и js.

#javascript #framework
Web Developer - это не просто расширение для Chrome, а целый набор полезных инструментов для управления элементами сайта — например, для анализа веб-ресурсов и макетов, тестирования кода и мгновенного изменения параметров и внешнего вида страницы.

#Инструменты
Подготовили для Вас небольшой чек-лист по оптимизации проекта для более быстрой загрузки.

Основные советы по оптимизации:
- Включите gzip-сжатие, если это возможно.
- Используйте оптимизацию изображений.
- Минимизируйте CSS и JavaScript
- Удалите неиспользуемый код CSS и JavaScript
- Используйте CDN
- Отложите загрузку низкоприоритетного контента, используя функцию ленивой загрузки.
- Уменьшить количество запросов, удалив то, что не влияет на работу сайта.
- Протестируйте Ваш сервер, его работа тоже влияет на время загрузки
- Проверьте время загрузки внешних скриптов и если они долго загружаются, добавьте им параметр async

#Статьи
Памятка по современному JavaScript

В этом документе собраны возможности языка JavaScript, с которыми вы наверняка столкнетесь в современных проектах и примерах кода.

Цель этого руководства — не обучить вас JavaScript с нуля, а помочь разработчикам с базовыми знаниями, которые при изучении современных кодовых баз (или, скажем, React) сталкиваются со сложностями из-за использованных в них концепций JavaScript.

#javaScript
Parcel — маленький и быстрый бандлер, позиционируется как решение для маленьких проектов.

Основные особенности:
- Невероятно быстрое время сборки - многоядерная компиляция и кеш файловой системы для быстрого восстановления даже после перезапуска.
- Готовая поддержка JS, CSS, HTML, файловых ресурсов и т. д. - никаких плагинов для установки.
- Автоматически преобразует модули, используя Babel, PostCSS и PostHTML, когда это необходимо - даже 
node_modules.
- Разделение кода нулевой конфигурации с помощью динамических import() операторов.
- Встроенная поддержка горячей замены модуля
- Удобный способ регистрации ошибок - выделенные синтаксисом кодовые фреймы помогают выявить проблему.

#Инструменты
Effector - стейт-менеджер, который активно развивается и поддерживает множество фреймворков. Одни из них React, React Native, Vue, Svelte.

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

#Инструменты
Выберите правильный ответ ниже. Данный тест предоставил нам подписчик. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Bree - лучший планировщик заданий для Node.js и JavaScript с cron , date , ms , later и удобной поддержкой.

Работает в Node v10+ и браузерах (благодаря полифилу bthreads), использует рабочие потоки (Node.js) и веб-воркеры (браузеры) для создания изолированных процессов, а также поддерживает async / await, стратегии повтора для неудачных операций, регулирование, параллелизм и отменяемые задания с плавным завершением работы.

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

1) Памятка по современному JavaScript.
2) Sal.js - ориентированная на производительность, легкая библиотека анимации прокрутки.
3) Web Developer - набор полезных инструментов для управления элементами сайта.
4) Squircley - это онлайн инструмент, который умеет создавать красивые геометрические формы.
5) Vectry Icons - высококачественный бесплатный набор интерфейсных иконок для Вашего проекта.

Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки!

#Лучшее
Shoelace - передовая библиотека веб-компонентов.

Основные особенности:
- Работает со всеми фреймворками
- Работает с CDN
- Полностью настраивается с помощью CSS
- Включает официальную темную тему
- Создан с учетом доступности
- Открытый исходный код

#CSS #Framework
This media is not supported in your browser
VIEW IN TELEGRAM
Scale - генеративный способ создания цветовых шкал. Гибкая и удобная настройка почти любого параметра. А еще есть возможность развернуть себе такой же проект с GitHub.

#Инструменты
15 языков программирования, знание которых гарантирует самые высокие зарплаты в IT.

В списке указана средняя зарплата за год в мире. Начнем от меньшей зп к большей.

15. C ++ — $55,3 тыс./год
14. JavaScript — $55,6 тыс./год
13. Python — $56,6 тыс./год
12. TypeScript — $57,4 тыс./год
11. Kotlin — $58,1 тыс./год
10. C# — $58,4 тыс./год
9. Prolog — $60,6 тыс./год
8. R — $61,6 тыс./год
7. Pascal — $62,7 тыс./год
6. Swift — $65,1 тыс./год
5. Objective-C — $66,6 тыс./год
4. Ruby — $72,1 тыс./год
3. Go — $72,6 тыс./год
2. Scala — $77,1 тыс./год
1. Perl — $84 тыс./год

#Статьи
React Hooks - Полный Курс.

Полный курс по React Hooks от Владилена Минина. Внутри расскажи про: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer. В конце курса узнаете как можно создавать свои собственные хуки.

#Курсы
Lineicon — 1000+ векторных иконок бесплатно.
Загрузите бесплатные иконки SVG и PNG Line для веб-сайтов, веб-приложений, программного обеспечения и веб-дизайна.

#Графика
Web Developer Checklist - замечательное расширение для веб-разработчиков, которые хотят быть уверенными в том, что они следуют лучшим практикам. Это расширение позволяет очень легко обнаруживать проблемные области на вашем веб-сайте.

Данное расширение является дополнением к уже рассмотренному раннее сервису по проверке проекта к запуску.

#Инструменты
Зачем изучать JavaScript в 2020 году?

Язык JavaScript прост в освоении даже для начинающего программиста. Он главный помощник для HTML и CSS, они взаимосвязаны между собой, как лучшие друзья. С помощью JavaScript есть возможность создавать скрипты, которые автоматизируют операции, требующие ручного исправления.

Основные плюсы:
- Работа внутри страницы браузера
- Взаимодействие с тегами html
- Корректирование CSS стилей страницы
- Корректировка кода любой страницы в HTML
- Перемещение любых элементов на странице
- Возможность запросить данные у пользователя и отправить их в базу данных
- Не требуется установки на компьютер
- Автоматическое приведение типов данных
- Широкая область применения

На сегодняшний день, средний заработок специалиста JavaScript варьируется от 1000$ до 3500$.

#Статьи
Ant Design — это полноценная дизайн-система, визуальный язык. Со своими принципами, стайлгайдами и библиотекой компонентов.

Основные особенности:
- Пользовательский интерфейс корпоративного класса, разработанный для веб-приложений.
- Набор качественных компонентов React из коробки.
- Написано на TypeScript с предсказуемыми статическими типами.
- Полный пакет дизайнерских ресурсов и средств разработки.
- Поддержка интернационализации для десятков языков.
- Мощная настройка темы в каждой детали.

#React #TypeScript
Currency.js -  это легковесная библиотека JavaScript для работы с валютами. Она решает проблемы с плавающей точкой в JavaScript и позволяет вам выполнять все основные арифметические операции не беспокоясь о точности дробей. Она работает с разными видами вводных данных: строчными, числовыми, десятичными и денежными единицами.

#JavaScript