🛠 DarkModeJS — сверхлегкая и кроссбраузерная библиотека JS, которая поможет вам реализовать темные и светлые темы. Она определяет местное время пользователя и соответствующим образом переключает внешний вид пользовательского интерфейса. Кроме того, она весит всего 2,39 КБ (1,05 КБ в сжатом виде) и написана на чистом JavaScript, без каких-либо плагинов и jQuery.

#инструменты #js

💡 Используйте [] вместо new Array()

Этот совет годится и для массивов.

Нормально

var a = new Array();  
a[0] = "Joe";  
a[1] = 'Plumber';  

Лучше

var a = ['Joe','Plumber'];  

«Распространенная ошибка в JavaSсript программах — использование объекта, где нужен массив или массива где нужен обьект. Простое правило: когда названия свойств это небольшие последовательные числа — используйте массив. В противном случае — объект» - Douglas Crockford

#советы #coding #js

Выберите правильный вариант 👇🏼 #test #js

Объяснение теста в чате @webb_chat

📑 Объектно-ориентированный JavaScript: немного практики

В прошлых статьях из этой серии мы рассмотрели основы работы с объектами, функции-конструкторы и прототипы. А, значит, настало время окончательно во всём разобраться и написать боевой пример — небольшую библиотеку для валидации данных.

#статьи #js

🛠 React Nice Dates — datepicker для React с удобным сенсорным управлением и красивым дизайном. Библиотека полностью модульная и состоит из отдельных компонентов и утилит, которые можно комбинировать и подбирать для создания идеального средства выбора даты для ваших нужд.

#инструменты

💡 Современные и эффективные CSS-раскладки

Часть 1

В данной серии советов мы рассмотрим эффективные строки CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.

Суперцентрирование: place-items: center

В первом примере "однострочной" раскладки давайте решим самую главную загадку во всём CSS: центрирование. Хочу, чтобы вы знали, что 'place-items: center' это проще, чем кажется.

Сначала задайте родительскому элементу свойству display со значением grid, а затем для него же place-items: center. Свойство place-items это краткая форма записи для align-items и justify-items, с помощью которого мы устанавливаем оба эти свойства в значение center.

.parent {
  display: grid;
  place-items: center;
}

Данный способ приводит к идеальному центрированию содержимого внутри родителя, независимо от его размера.

Продолжение следует...

#советы #coding #css

🔥 Лучшее на канале за неделю

1. Создание favicon для сайта 2020.

2. DarkModeJS — сверхлегкая и кроссбраузерная библиотека JS, которая поможет вам реализовать темные и светлые темы.

3. Современные и эффективные CSS-раскладки.

📑 Объектно-ориентированный JavaScript: наследование

Это продолжение серии статей об объектно-ориентированном JavaScript, в данной статье рассматриваем наследование.

Представьте, вы получили заказ на создание небольшой онлайн игры. Всё что от вас требуется — создать понятный API для работы с персонажами. Техническое задание выглядит следующим образом:

Вы также можете ознакомиться с предыдущими статьями:

Примитивы и объекты | Работа с объектами | Функции-конструкторы | Прототипы |Немного практики.

#статьи #js

Выберите правильный вариант 👇🏼 #test #js

Подробное объяснение теста в чате @webb_chat

🛠 Craft.js — отличный React фреймворк, который помогает создавать удобные редакторы страниц. Это позволяет изменять содержимое веб-страницы с помощью перетаскивания, подробных текстовых элементов управления, встраивания мультимедиа и т. д. Идеально подходит для создания систем управления контентом и приложений WYSIWYG.

#инструменты #js

💡 Современные и эффективные CSS-раскладки

▍Часть 2

Первая часть.

▍Адаптивные блоки: flex: <grow> <shrink> <baseWidth>

Это распространённая раскладка, например, для лендингов, в которой может располагаться ряд из 3 элементов, обычно содержащих изображение, заголовок и текст, описывающих особенности продукта. А что на счёт адаптивности?

Если использовать Flexbox, вам не придётся настраивать расположение элементов для разных размеров экрана с помощью медиа-запросов.

Свойство flex является сокращением и позволяет задать набор значений flex: <flex-grow> <flex-shrink> <flex-basis>

Если нужно, чтобы блоки имели <flex-basis> размер, сжимались на меньших размерах, но не увеличивались для заполнения дополнительного свободного пространства, следует указать flex: 0 1 <flex-basis>. В данном случае <flex-basis> равно 150px.

В следующей части будет:

Примеры кода и как сделать, чтобы при переносе на новую строку блоки растягивали и заполняли пространство.

Продолжение следует...

#советы #coding #css

Выберите правильный вариант 👇🏼 #test

Подробное объяснение теста в чате @webb_chat

📑 Выбор CSS макета — Grid или Flexbox?

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

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

#статьи #css