💡 Ошибка: уделять недостаточно внимания графике

▍Часть 2

Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у <img> или с помощью тега <picture>. Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советуем бесплатный курс «Responsive images» от Udacity.

WebDEV #советы #вёрстка #html #css #web

🛠 Ace Front End предлагает практические задачи на написание кода с подробным объяснением идеального решения для собеседования.

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

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

1. Web Security for Developers.

2. Ace Front End предлагает практические задачи на написание кода с подробным объяснением идеального решения для собеседования.

3. Ошибка: уделять недостаточно внимания графике.

WebDEV #test #html

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

💡 Ошибка: Pixel Perfect? Не, не слышал

О Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (см. переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это — адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.

В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

WebDEV #советы #вёрстка #html #css #web

💡 Инициализация массивов

Инициализировать массив — значит сказать программе, что перед ней массив и с ним необходимо поработать.

Инициализация пустого массива

 a = []; // Инициализировать пустой массив

Инициализация массива со значениями

 a = [1, 2, 3]; // Инициализировать массив с числами 1, 2, 3

Вариант аналогичный var a = [1, 2, 3]

 a = Array.of(1, 2, 3); // Аналогично инициализации массива var a = [1, 2, 3];

Инициализировать массив из шести элементов и заполнить его единицами

 a = Array(6).fill(1); // инициализировать массив из шести элементов и заполнить его единицами

WebDEV #советы #coding #js

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

1. Инициализация массивов.

2. Exercism помогает достичь свободного владения 55 языками программирования.

3. Ошибка: Pixel Perfect? Не, не слышал.

WebDEV #test #css

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

💡 Получение длины массива

Длина массива — это количество элементов в нем. Например, в массиве arr=[1, 2, 3] — три элемента, а в массиве arr=[] — ноль элементов.

Длину массива можно узнать через свойство length. Синтаксис такой: arr.length.

Например:

Получение длинны массива с помощью свойства length:

 a = [1, 2, 3];// инициализировали массив a
var b = a.length;// задаем переменную b, её значение будет равно длине массива

WebDEV #советы #coding #js

📖 Django RESTful Web Services
🖋 Gastón C. Hillar, 2018

Django - это веб-фреймворк на Python, который очень упрощает процесс веб-разработки. Он уменьшает объем тривиального кода, что упрощает создание веб-приложений и приводит к более быстрой разработке. Это очень мощный и отличный выбор для создания RESTful приложений

💾 Скачать книгу

WebDEV #book #python #django #web

🛠 Fun Javascript — бесплатная серия забавных проектов на Javascript, HTML и CSS.

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

💡 Проверка массива с использованием метода every()

Метод every() используют для проверки всех элементов массива на соответствие условию.

Например:

function isBigEnough(element, index, array) {
  return element >= 10;
}
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);   // passed равен false, потому что не все аргументы element в массиве больше или равны 10

    var passed1 = [12, 54, 18, 130, 44].every(isBigEnough);  // passed равен true, потому что в массиве все аргументы element больше 10

В этом примере функция isBigEnough возвращает true, если все элементы (element) массива больше или равны 10. Если это условие не соблюдается хотя бы в одном элементе массива, функция возвращает false.

WebDEV #советы #coding #js

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

1. Django RESTful Web Services.

2. Fun Javascript — бесплатная серия забавных проектов на Javascript, HTML и CSS.

3. Проверка массива с использованием метода every().

WebDEV #test #css

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

💡 Проверка массива с использованием метода some()

Метод some() используют для проверки какого-либо одного элемента массива на соответствие условию.

Например:

function isBigEnough(element, index, array) {
  return element >= 10;
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed равен false
var passed1 = [12, 5, 8, 1, 4].some(isBigEnough);
// passed1 равен true

В этом примере функция isBigEnough возвращает false, потому что в массиве нет ни одного элемента (element) больше или равного 10. Если в массиве есть хоть один подходящий элемент, функция возвращает true.

WebDEV #советы #coding #js

Redux за 100 секунд

Redux — это популярный шаблон управления состоянием для крупномасштабных веб-приложений.

📺 YouTube

WebDEV #видео #Redux #js

🛠 Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройства.

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

💡 Создание массива на основе существующего массива с использованием метода map()

Метод map() создает новый массив c результатом вызова функции на основе существующего массива.

Например:

let numbers = [1, 4, 9];
let doubles = numbers.map(function(num) {
  return num * 2;
}); 

В примере с помощью метода map() умножают каждый элемент массива numbers на 2 и получают новый массив doubles с другими значениями.

WebDEV #советы #coding #js