WebDEV #test #html

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

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

▍Часть 1

Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает, а вот с иконками и контентными изображениями все не так хорошо.

Сегодня стоит предпочесть svg-спрайты иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать тут #1 и тут #2. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть полифил, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон.

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

📖 Web Security for Developers
🖋 Malcolm McDonald, 2020

Начинающего разработчика легко обескуражить трудностями, связанными с должной защитой веб-сайта. К счастью, инструменты, необходимые для защиты сайта, находятся в свободном доступе и, как правило, просты в использовании. Данная книга покажет вам, как ваши веб-сайты уязвимы для атак и как их защитить. В каждой главе описывается основная уязвимость системы безопасности и исследуется реальная атака, а также большое количество кода, показывающего и уязвимость, и исправление.

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

WebDEV #book #web #security

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

▍Часть 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

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