CodeRoll | Frontend

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 резюме с небольшим письмом. Просьба посмотреть проект, перед связью со мной.

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

📖 JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание Автор: Кириченко А. В. О книге: 2020 год, 320 страниц, Русский язык, 29.9Mb Содержание: Данная книга посвящена тому, как на языке JavaScript создавать хороший код для фронтенда (и не только). В книге последовательно затронуты все аспекты производства JavaScript-кода: от выбора архитектуры и конструирования кода до покрытия модульными тестами, отладки, интеграционного тестирования, сборки и непрерывной поставки вашего кода. #Книги

SQLBolt - сервис интерактивных уроков и упражнений, призванных помочь вам быстро изучить SQL. Существует множество популярных баз данных SQL, включая SQLite, MySQL, Postgres, Oracle и Microsoft SQL Server. Все они поддерживают общий стандарт языка SQL, которому этот сервис будет обучать, но каждая реализация может отличаться дополнительными функциями и типами хранения, которые она поддерживает. #Курсы

Экспериментальная рубрика, в которой будем рассказывать Вам о новых и малоизвестных фичах в веб-разработке. Фича 1. Функция max() в CSS Функция max() принимает одно или несколько значений, разделённых запятыми, и возвращает наибольшее из них. Эту функцию используют для того, чтобы зафиксировать минимальное значение, которое может принимать CSS-свойство. В следующем примере нам нужно, чтобы ширина элемента составляла бы как минимум 500px. .element {     width: max(50%, 500px); } Если 50% ширины области просмотра больше 500px — для настройки ширины элемента будет использовано именно это значение Браузеру нужно выбрать максимальное значение из 50% и 500px. Выбор зависит от ширины области просмотра. Если 50% ширины области просмотра — это меньше, чем 500px, браузер это значение проигнорирует и использует значение 500px. Если же 50% ширины области просмотра больше 500px, тогда ширина элемента будет установлена равной этому значению. #Фичи #CSS

Активно слежу за всем, что связано с кибербезопасностью. Всегда было интересно как за нами следят соц. сети и почему стоит сказать хоть что-то рядом с телефоном, а реклама уже крутится в инстаграм.  Ольга ведет классный канал paradiSEcurity, где делится своим опытом и рассказывает о том, как можно отключить интернет по всей стране, как взламывают крупные компании и как избежать слежки в сети.  Там действительно классные статьи, которые высоко оцениваются на таких ресурсах как Habr, Medium и Хакер. Сами посмотрите: @paradisecurity

CodeCombat - это многопользовательская игра, позволяющая научиться программировать. Этот проект с полностью открытым исходным кодом. CodeCombat работает в Docker и Вы можете легко начать работу в своей локальной среде, следуя руководству Docker.

Candy Color Button Animation - замечательная коллекция анимированных кнопок на чистом CSS. Такой набор будет классно смотреться в любом проекте. #HTML #CSS

Gaming Icons - 3 высококачественных дизайнерских иконки в игровом стиле. В комплекте доступен png и svg формат. #Графика

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> #JavaScript

🚀 Что такое Виртуальный DOM? Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево. Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью. В реальности с виртуальным DOM чаще работают через фреймворки, а не взаимодействуют с ним напрямую. Фреймворки, такие как React и Vue, используют концепцию виртуального DOM для более производительных обновлений DOM. #Статьи

🔥 Лучшее на канале за последнюю неделю 1) CSS3 Loader & Spinners - Крутой набор анимированных прелоадеров на CSS 2) HTML для JS разработчиков - бесплатный видео-курс от Алекса Лущенко подойдет тем, кто ворвался в js разработку и нуждается в хорошей базе HTML. 3) BLOBS — онлайн генератор красивых шейп объектов. 4) FilePond - библиотека JavaScript, которая предназначена для загрузки файлов. 5) Gradihunt — простой и удобный онлайн генератор градиентов. Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки! #Лучшее

Solid - это декларативная библиотека JavaScript, аналог React, для создания пользовательских интерфейсов. Он не использует виртуальную модель DOM. Вместо этого он предпочитает компилировать свои шаблоны до реальных узлов DOM. #JavaScript

Разбор теста Проверочный код 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.

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

BLOBS — онлайн генератор красивых шейп объектов для вашего проекта с экспортом в SVG, а также возможностью копирования кода SVG объекта. #Инструменты

💡 Что такое MVP и для чего это нужно? Концепция минимально жизнеспособного продукта (MVP, minimum viable product) - это ранняя версия продукта, решающая, по крайней мере, одну задачу потенциального клиента. Главная ценность MVP заключается в том, что вы можете потратить совсем немного времени на дизайн и разработку и очень быстро получить отзывы от ваших пользователей. Все это поможет понять, в какую сторону вам нужно двигаться и что следует улучшать. MVP – это такая версия продукта, которая имеет самый необходимый минимум возможностей, чтобы проверить его жизнеспособность на рынке. На этом этапе еще нет дополнительных или второстепенных функций, а есть только то, что составляет суть сервиса. Для заказчика MVP - это способ быстро проверить идею. Очень часто собственник вкладывает большие деньги в разработку проекта, даже толком не проверив идею. #Статьи

Tailwind CSS – тонко настраиваемый низкоуровневый CSS фреймворк, который предоставляет все необходимые строительные блоки для создания персонализированного дизайна без лишней борьбы с переопределением раздражающих встроенных стилей Особенности: - Полностью адаптивный. - Расширяемый компонентами. - Легко настраиваемый. #CSS #Framework