Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.

Со времён систематизации методов объекта console прошло достаточно много времени, некоторые браузеры получили поддержку недостающих ранее методов. Таблица вызывает естественный интерес у разработчиков, поэтому — почему бы её не обновить, дополнив в одной статье описаниями? Github.

Хабр, привет.

Не так давно SLY_G опубликовал цикл переводов книги Eloquent Javascript (за что ему большое спасибо). В комментариях раз за разом поднимались вопросы о сборке переводов книги, что, собственно, я и сделал при помощи сервиса Gitbook — «Выразительный Javascript», pdf, ePub, mobi и онлайн версия.

Репозитарий книги, pull requests принимаются.

С очередной пятницей 13 вас, дорогие любители и профессионалы JavaScript.

Вот уже месяц я веду этот еженедельник. И каждую неделю вижу всё меньшее количество плюсов и приличное количество минусов. В связи с чем, у меня возник вопрос: “А стоит ли продолжать?”. К статье прикреплен опрос, в котором можно указать ваше мнение на этот счет. И если вам что-то не нравится – не стесняйтесь писать в комментариях или мне в личку.

Вот. Всем приятных выходных. И интересного изучения JavaScript.

Видео

EmberConf 2015
ng-conf 2015
ng-wat
3 Reasons to Love React
Advancing JavaScript without breaking the web
Flux Tutorial — Writing a Simple App in Flux and React

Предлагаю читателям «Хабрахабра» перевод публикации «30 Amazing PHP Libraries for Programmers and Developers». Авторы собрали несколько удивительных PHP-библиотек, которые помогут реализовать некоторые классные вещи, не прилагая много усилий. Цель обзора состоит в том, чтобы преподнести что-то новое, поэтому список не включает популярные библиотеки.

Недавно вспомнилось мне, что есть такой сервис — StartSsl, который совершенно бесплатно раздаёт trusted сертификаты владельцам доменов для личного использования. Да и выходные попались свободные. В общем сейчас напишу, как в nginx настроить HTTPS, чтобы при проверке в SSL Labs получить рейтинг А+ и обезопасить себя от последних багов с помощью выпиливания SSL.

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

Высокая доступность веб-сайта — совместная работа хостинг-провайдера и разработчика сайта. Основная цель обеспечения высокой доступности — минимизация запланированных и незапланированных простоев.

Высокая доступность — это больше, чем просто размещение вашего проекта в надежном облаке. По-настоящему высокодоступный сайт должен работать в нескольких регионах облака и его пользователи не должны замечать каких-то изменений даже если один из регионов облака станет недоступным. Разработчик веб-сайта должен обеспечить работоспособность сайта даже в случае чрезвычайной ситуации. Системы высокой доступности дублируются: при сбое у провайдера сайт будет доступен. При сбое репликации пользователя сайт также должен быть доступен. Если необходимо провести работы на сервере разработчику или перезагрузить его — пользователи не должны замечать этого.



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

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

Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для Grunt”. Дело в том, что спустя много часов поиска я не нашел крутых плагинов для Gulp, которых нет для Grunt за исключением пары весьма специфичных утилит. Всё как раз наоборот, но проигнорировать множество пользователей Gulp я не мог. Все недостающие плагины я выделил, потому что Gulp умеет использовать их из Grunt, как и Grunt из Gulp.

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

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Gulp. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Gulp найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.

По-русски если гуглить «полпикселя», везде какая-то истерика: пиксель не делится, и всё тут. По-английски всё чинно :) например. Полпикселя существует, но браузеры пока плохо их рендерят. Местами реагируют на доли пикселя (например, в параметрах шрифтов), но чаще любят округлять до целого.

Почему так? Раньше понятно, железо не позволяло прорисовывать «половинки». Сейчас им лень. Но каких-то подвижек можно ожидать: технология Flash уже поддерживает точность до 1/20 пикселя.

Что такое пиксель?

По терминологии Google, у слова «пиксель» есть 3 значения:
1. Элемент матрицы экрана. Например, в LCD-экранах один пиксель — 3 светящихся элемента (RGB).
2. Device-independent pixel (dip) — масштабированный, «кажущийся» размер пикселя, который на любом экране смотрится одинаково. Тут учитывается типичное расстояние от глаз до девайса.
3. CSS-пиксель. Например, width: 20px;

Факт 1

Под капотом самых критичных программ, которые вы используете на ежедневной основе (Mac OS X или Facebook) содержится ужасное количество хаков и костылей, которые с трудом уживаются друг с другом. Это как если бы вы разобрали боинг 747 и увидели, что топливопровод держится вешалкой для одежды, а шасси смотаны изолентой.

Бен Черри

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.

Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как холст (<canvas>). На него можно нанести изображение нужных размеров. Пять строчек кода и картинка готова:

function resize(img, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  return canvas;
}

Из холста картинку можно сохранить в JPEG и, например, отправить на сервер. Можно было на этом закончить статью, но сперва давайте взглянем на результат. Если вы поставите рядом такой холст и обычный элемент <img>, в который загружена та же картинка (исходник, 4 Мб), то вы увидите разницу.

«Золото — для идолопоклонников, а не для нас. Пока есть идолопоклонники, а они важнее золота, нашему делу ничто не угрожает» высказывание приписывается Натану Ротшильду

Банк Англии, центр мирового закулисья, частное предприятие (список акционеров до сих пор неизвестен) опубликовал проект документа в котором, на фоне сложившегося мирового финансового кризиса, помимо призывов к фундаментальным изменениям, обсуждается, в том числе и вопрос о создании денежного суррогата собственной цифровой валюты.

_{Банк Англии первоначально был организован в 1694 году как частный банк, в 1946 году был национализирован, а в 1997 году. получил статус независимой публичной организации, самостоятельной в проведении денежной политики, полным собственником которой является Солиситор (категория адвокатов) министерства финансов от имени правительства}

Пожалуй, что это самое крутое достижение Bitcoin — мировые финансисты всерьез задумались над новой финансовой системой. Скоро на смену ямайской валютной системе придет %username%-coin система.

До них дошло, что они не нужны вполне возможна безопасная передача денег между Алисой и Бобом без привлечения третьих сторон.(Это расчетная функция денег. С накопительной функцией связаны курьезы: то студент купил квартиру за 5$, то программист лазил по свалке в поисках выкинутого жесткого диска с кучей биткоинов, которые со временем превратились в сокровище. Есть еще и инвестиционная/проектная функция денег, но с её реализацией пока как-то туго. Хотя у краудфандинговых платформ есть все шансы.)

Банк ставит вопросы о регулировании, отслеживаемости и приватности, об отмывании денег, о том как перейти от одной системы к другой и пр.

Пойду-ка я перечитаю «Криптономикон» Нила Стивенсона

Под катом — видеозапись конференции

В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.

В основе REST-архитектуры лежит несколько важных базовых принципов, которые часто упускаются из вида начинающими программистами. Между тем, эти принципы имеют критическое значение для скорости и надежности работы веб-сайта. В некотором смысле REST — это архитектура, концентрирующаяся на совместимости и эффективном взаимодействии с другими узлами сети и клиентским ПО. Для них веб-сайт — черный ящик, реализующий HTTP интерфейс.

Унифицированный программный интерфейс

Ключевой момент: совместимость с HTTP-методами в плане безопасности и идемпотентности.

Безопасный запрос — это запрос, который не меняет состояние приложения.

Идемпотентный запрос — это запрос, эффект которого от многократного выполнения равен эффекту от однократного выполнения.

Стандарт PSR-7 успешно завершён. На этой неделе были добавлены последние штрихи. И теперь версия 0.6.0 пакета http-message package готова к использованию. Попробуйте следовать этому стандарту в своих приложениях.

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

Не так давно я начал разрабатывать библиотеку DuelJS, которая предоставила удобный интерфейс для определения состояния вкладки Master (активная) или Slave (неактивная). Однако позже мне начали поступать предложения для оптимизации соединений по веб-сокетам. Подход DuelJS: если вкладка активна -> держать соединение, если неактивна -> класть — является не продуктивным. На помощь приходит расширение TabNinja.

Видео, подкасты

ES6 vs Today
An Angular2 Todo App: First look at App Development in Angular2
Async Apps with React and Flux
A 90 minute overview of ECMAScript 6
Building with React.js
Intro to Webpack
io.js with Isaac Schleuter and Mikeal Rogers

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о «липких» блоках, новом свойстве для изображений object-fit, продвинутом использовании CSS-счетчиков, ключевом слове currentColor, и о том, есть ли анимация в z-index.