CodeRoll | Frontend

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

CSS3 Loader & Spinners. Крутой набор анимированных прелоадеров на CSS для вашего веб-проекта. Просто копируете код и добавляете к себе на проект. #CSS #HTML

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

Что такое прогрессивное улучшение (progressive enhancement) Прогрессивное улучшение предполагает, что веб-интерфейсы должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов должен получаться законченный веб-интерфейс, который будет лучше, красивее и удобнее предыдущего. Основные этапы: 1. Семантическая разметка страницы при помощи HTML. 2. Настройка внешнего вида при помощи CSS. 3. Безупречная настройка внешнего вида при помощи CSS3. 4. Интерактивность, взаимодействие, удобство при помощи JavaScript. Если говорить проще, то прогрессивное улучшение - это идеология веб-разработки, где мы начинаем разработку с простых вещей и переходим к более сложным. #Статьи