- Разработка

Обзор средств хранения данных на клиентской стороне

Mon, 19 Dec 2016 20:11:38 +0000

Хранение данных непосредственно в браузере обладает множеством преимуществ, основное из которых это быстрый и независимый от сети доступ к “базе данных”. На данный момент есть 4 активных метода для этого (плюс один устаревший):

Куки
Локальное хранилище
Сессионное хранилище
IndexedDB
WebSQL (устаревшее)

Куки

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

Краткая запись CSS как антипаттерн

Mon, 12 Dec 2016 20:36:08 +0000

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

Обычно мы рассматриваем краткий синтаксис как преимущество: меньше нажатий на клавиатуру, меньше строчек кода и меньше данных, передаваемых по сети. Отлично же! Однако, здесь есть неприятный побочный эффект: таким образом...

Распутываем спагетти-код: как писать поддерживаемый JavaScript

Thu, 08 Dec 2016 18:41:41 +0000

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

Мне приходилось брать...

Я совсем забыл о стилях для печати

Sat, 26 Nov 2016 17:46:33 +0000

Аарон Густафсон недавно обратился через твиттер к Indiegogo , в котором он указал, что их страницы детального заказа непригодны к использованию в напечатанном виде.

Я был ошеломлен, когда увидел этот твит — я понял, что прошло уже много времени с тех пор, как я оптимизировал стили для печати и я даже не думал об их проверке.

Возможно, это произошло потому, что я трачу много времени на изменение...

Грид, флексбокс и выравнивание блоков: наша новая система раскладки

Sun, 20 Nov 2016 15:28:21 +0000

Раскладка в вебе остается сложной. Причина этого состоит в том, что методы раскладки, которые мы используем с того момента, как раскладка средствами CSS стала возможной, не предназначались для создания чего-то сложного. Хотя мы можем сделать достаточно много, пока работаем с фиксированной шириной и используем хаки типа искуственных колонок, но эти методы разваливаются при отзывчивом дизайне. К счастью, у нас есть надежда в виде флексбокса, который многие уже знают и используют,...

Как отравить мобильного пользователя

Thu, 10 Nov 2016 19:41:54 +0000

У нас в Чехии одним из самых популярных телевизионных героев является крот — невинное, немое и веселое создание, помогающее остальным животным в лесу.

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

Мы, как веб-дизайнеры часто относимся к нашим пользователям также, как “плохие парни” к...

Оптимизация настройки DNS

Sun, 06 Nov 2016 19:23:53 +0000

DNS не относится к интересным темам. Если вы не являетесь инженером по сетям и инфраструктуре, вы об этом практически не вспоминаете — пока что-то не пойдет не так. Если вы запустили сайт, не заморачиваясь по поводу DNS, то сейчас подходящее время предпринять меры, которые позволят удержать ваш сайт на поверхности в тот момент, когда остальные сайты будут тонуть.

В киберпонедельник (1 декабря 2014) что-то пошло не так. Массивная атака DDOS...

SVG и медиазапросы

Sat, 29 Oct 2016 19:57:27 +0000

Одним из достоинств SVG является то, что вы можете использовать медазапросы для добавления изображениям отзывчивости:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: green; } @media (min-width: 100px) { circle { fill: blue; } } </style> <circle cx="50" cy="50" r="50"/> </svg>

Но когда круг станет синим? Спецификация говорит, что свойство min-width должно соответствовать ширине области видимости, но…

Какой именно области видимости?

<img src="circle.svg" width="50" height="50"> <img...
Yarn или npm: все, что вам нужно знать о них Thu, 20 Oct 2016 20:35:38 +0000 Yarn это новый менеджер пакетов, совместно созданный Facebook, Google, Exponent и Tilde. Как можно прочитать в официальной документации, его целью является решение целого ряда проблем, с которыми столкнулись разработчики при использовании npm, а именно: установка пакетов не была достаточно быстрой и последовательной; существовали проблемы с безопасностью, так как npm позволяет пакетам запускать код при установке. Но не тревожьтесь. Это не попытка полностью заменить npm. Yarn это новый клиент... Способы подчеркивания в CSS Wed, 12 Oct 2016 19:41:29 +0000 Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом. Это самое простое подчеркивание, но у него правильный размер и оно не перекрывает выносные элементы букв. И оно однозначно лучше дефолтного подчеркивания в большинстве браузеров. Medium пришлось...