CodeRoll | Frontend
الذهاب إلى القناة على Telegram
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
إظهار المزيد4 007
المشتركون
-424 ساعات
-147 أيام
-5230 أيام
أرشيف المشاركات
4 007
Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.
Nuxt разработан на основе мощной модульной архитектуры. Более 50 разнообразных модулей сделают разработку проще и быстрее. Оптимизирует ваше приложение сразу из коробки.
#JavaScript #Vue #Node #Framework
4 007
Frontend React (удаленка part-time) 💻
#вакансия #react #удаленка #frontend #GraphQL
Формат работы: #удаленка
Занятость: part-time (от 15 часов в неделю) возможен в будущем переход на full-time
Ставка: 20$ в час
Компания: invme.com
Сервис invme.com - это афиша и соцсеть. Здесь можно узнавать о ближайших мероприятиях в своем городе, искать и создавать события, приглашать на них других пользователей.
Задачи:
• Проектирование и разработка сложных веб-интерфейсов (desktop & mobile);
• Интеграция с backend частью;
• Рефакторинг кода;
• Использовать актуальные подходы к разработке и современные технологии;
• Принимать архитектурные решения;
• Постоянные деплои и обновления продукта.
Что нужно от вас:
• Опыт коммерческой разработки на React.js от трех лет;
• Умение писать понятный код;
• Самостоятельность в работе и ответственность за качество своего кода;
• Умение работы с типизацией.
Стек технологий:
FrontEnd: React (NextJs) + Hooks, Redux (Saga), Apollo GraphQL, Styled-components, React-Intl.
Присылайте на lk@invme.com или @looklk резюме с небольшим письмом. Просьба посмотреть проект, перед связью со мной.
4 007
OverAPI - огромная коллекция шпаргалок и подсказок по различным языкам программирования и технологиям. Очень удобный и полезный сервис.
#Инструменты
4 007
📖 JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание
Автор: Кириченко А. В.
О книге: 2020 год, 320 страниц, Русский язык, 29.9Mb
Содержание: Данная книга посвящена тому, как на языке JavaScript создавать хороший код для фронтенда (и не только). В книге последовательно затронуты все аспекты производства JavaScript-кода: от выбора архитектуры и конструирования кода до покрытия модульными тестами, отладки, интеграционного тестирования, сборки и непрерывной поставки вашего кода.
#Книги
4 007
SQLBolt - сервис интерактивных уроков и упражнений, призванных помочь вам быстро изучить SQL.
Существует множество популярных баз данных SQL, включая SQLite, MySQL, Postgres, Oracle и Microsoft SQL Server. Все они поддерживают общий стандарт языка SQL, которому этот сервис будет обучать, но каждая реализация может отличаться дополнительными функциями и типами хранения, которые она поддерживает.
#Курсы
4 007
Экспериментальная рубрика, в которой будем рассказывать Вам о новых и малоизвестных фичах в веб-разработке.
Фича 1. Функция max() в CSS
Функция
max() принимает одно или несколько значений, разделённых запятыми, и возвращает наибольшее из них. Эту функцию используют для того, чтобы зафиксировать минимальное значение, которое может принимать CSS-свойство.
В следующем примере нам нужно, чтобы ширина элемента составляла бы как минимум 500px.
.element {
width: max(50%, 500px);
}
Если 50% ширины области просмотра больше 500px — для настройки ширины элемента будет использовано именно это значение
Браузеру нужно выбрать максимальное значение из 50% и 500px. Выбор зависит от ширины области просмотра. Если 50% ширины области просмотра — это меньше, чем 500px, браузер это значение проигнорирует и использует значение 500px.
Если же 50% ширины области просмотра больше 500px, тогда ширина элемента будет установлена равной этому значению.
#Фичи #CSS4 007
Активно слежу за всем, что связано с кибербезопасностью. Всегда было интересно как за нами следят соц. сети и почему стоит сказать хоть что-то рядом с телефоном, а реклама уже крутится в инстаграм.
Ольга ведет классный канал paradiSEcurity, где делится своим опытом и рассказывает о том, как можно отключить интернет по всей стране, как взламывают крупные компании и как избежать слежки в сети.
Там действительно классные статьи, которые высоко оцениваются на таких ресурсах как Habr, Medium и Хакер. Сами посмотрите: @paradisecurity
4 007
CodeCombat - это многопользовательская игра, позволяющая научиться программировать.
Этот проект с полностью открытым исходным кодом. CodeCombat работает в Docker и Вы можете легко начать работу в своей локальной среде, следуя руководству Docker.
4 007
Candy Color Button Animation - замечательная коллекция анимированных кнопок на чистом CSS. Такой набор будет классно смотреться в любом проекте.
#HTML #CSS
4 007
Gaming Icons - 3 высококачественных дизайнерских иконки в игровом стиле. В комплекте доступен png и svg формат.
#Графика
4 007
Alpine.js — легковесный фреймворк с удобным синтаксисом.
Alpine.js предлагает реактивный и декларативный характер как в больших фреймворках, таких как Vue или React, но с гораздо меньшим размером.
Вы можете сохранить свой DOM и вносить изменения в поведение по своему усмотрению.
Особенности данного фреймворка:
- Он весит очень мало! 7.2kB в сжатом виде.
- Знакомый и простой синтаксис основанный на директивах.
- Не использует виртуальный DOM
- Подключения возможно как через CDN (по задумке авторов должно быть основным использованием), так и через npm.
Пример базового кода
<div x-data="{ msg: 'Hello, Habr!' }">
<input type="text" x-model="msg" />
<p x-text="msg"></p>
</div>
#JavaScript4 007
🚀 Что такое Виртуальный DOM?
Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.
Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.
В реальности с виртуальным DOM чаще работают через фреймворки, а не взаимодействуют с ним напрямую. Фреймворки, такие как React и Vue, используют концепцию виртуального DOM для более производительных обновлений DOM.
#Статьи
4 007
🔥 Лучшее на канале за последнюю неделю
1) CSS3 Loader & Spinners - Крутой набор анимированных прелоадеров на CSS
2) HTML для JS разработчиков - бесплатный видео-курс от Алекса Лущенко подойдет тем, кто ворвался в js разработку и нуждается в хорошей базе HTML.
3) BLOBS — онлайн генератор красивых шейп объектов.
4) FilePond - библиотека JavaScript, которая предназначена для загрузки файлов.
5) Gradihunt — простой и удобный онлайн генератор градиентов.
Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки!
#Лучшее
4 007
Solid - это декларативная библиотека JavaScript, аналог React, для создания пользовательских интерфейсов. Он не использует виртуальную модель DOM. Вместо этого он предпочитает компилировать свои шаблоны до реальных узлов DOM.
#JavaScript
4 007
Разбор теста
Проверочный код
let foo = 1
foo = (foo++ , foo = addNum(foo), foo *= 1, foo += 2, foo -= 3)
function addNum(num){
return num + 1
}
console.log(foo)
Сначала мы увеличиваем foo до 2, затем мы вызываем функцию addNum(2) и присваиваем результат foo новому значению, foo будет равен 3. После этого мы умножаем текущее значение foo на 1, обновленное значение foo будет 3. Затем мы прибавляем к foo 2 и обновленное значение будет равно 5. И, наконец, мы вычитаем от foo 3, теперь значение foo будет равно 2.4 007
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
4 007
BLOBS — онлайн генератор красивых шейп объектов для вашего проекта с экспортом в SVG, а также возможностью копирования кода SVG объекта.
#Инструменты
4 007
💡 Что такое MVP и для чего это нужно?
Концепция минимально жизнеспособного продукта (MVP, minimum viable product) - это ранняя версия продукта, решающая, по крайней мере, одну задачу потенциального клиента. Главная ценность MVP заключается в том, что вы можете потратить совсем немного времени на дизайн и разработку и очень быстро получить отзывы от ваших пользователей. Все это поможет понять, в какую сторону вам нужно двигаться и что следует улучшать.
MVP – это такая версия продукта, которая имеет самый необходимый минимум возможностей, чтобы проверить его жизнеспособность на рынке. На этом этапе еще нет дополнительных или второстепенных функций, а есть только то, что составляет суть сервиса.
Для заказчика MVP - это способ быстро проверить идею. Очень часто собственник вкладывает большие деньги в разработку проекта, даже толком не проверив идею.
#Статьи
