Введение

Доброго времени суток, друзья. Кто читал мои предыдущие статьи, должны понимать, что это будет еще один увлекательный взлом. Вот только взламывать мы будем магазин еды. Скажу сразу, что это не просто взлом. Мы не будем использовать дыры в коде системе. Мы возьмем эту систему и просто посмотрим на нее с другой стороны. Иначе говоря: «глазами хакера».

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

Всем привет! У нас вышли новые книги по дизайну

Дизайн. Книга для недизайнеров. 4-е изд.
Автор: Робин Уильямс

Дизайнеры и недизайнеры всего мира уже два десятилетия используют в своих работах фундаментальные принципы, изложенные Робин Уильямс. Познакомьтесь с полностью обновленным полноцветным четвертым изданием «Дизайн. Книга для недизайнеров». В этой книге вы найдете: четыре секрета, которые пригодятся в любом дизайнерском проекте; принципы работы с цветом; стили дизайна; оттачивание дизайна с помощью шрифтов; варианты дизайна для брошюр, листовок, писем, рекламы.

Мысли о дизайне
Автор(ы): П. Рэнд

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

(у учебника по Основам React вышло второе издание, Redux-учебник в процессе обновления)

Закончил работу над парой подробных текстовых туториалов на русском. Постарался уделить как можно больше времени практике. По ходу повествования есть вопросы, задачи и решения.

Курс про Redux попал в официальную документацию.

Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).

В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2015.

«Не бойся первой ошибки, избегай второй», – учит нас народная мудрость. А другая прямолинейно указывает на то, кто учится на своих ошибках, а кто – на чужих. Тем не менее разрабатывая интернет-магазин ошибиться довольно просто. Особенности аудитории, нюансы в организации сайта и форм страниц порой только и можно постичь единственно верным методом проб и ошибок.

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

Мир open source не стоит на месте и постоянно развивается. Про Blender 3D написано уже много статей, но помимо Blender, существует еще много полезных и бесплатных программ. Одна из них, это MakeHuman. На Хабре упоминания о ней имеются, но какой либо информации по ней нет. Предлагаю вам заглянуть под кат и посмотреть, что анимация персонажей в связке MakeHuman+Blender3D, это действительно просто. Осторожно, много картинок.

Расширяемость Sublime Text не знает границ. Для тех, кому мало стандартных функций, на Хабре уже рассказывали о том, как создать сниппет, как написать простой плагин, как написать сложный плагин и еще много много чего. Про ручную настройку подсветки синтаксиса толком ничего не смог найти: для кого-то слишком очевидно, кому-то просто не нужна, а кому-то и наверняка же пригодится.

Итак, задача: имея какие-нибудь абстрактные логи доступа в wonder-net:

!->14/02 16:44:22 [134.249.51.251:39951>80] (t1 19) >HTTP  in:504 out:34  Time:156
GET /516874233**21893/ HTTP/1.1 SCOD=00
!->14/02 16:44:24 [134.249.51.251:49507>80] (t1 20) 
GET /44058858**409377/ HTTP/1.1 SCOD=00
!->14/02 16:54:11 [195.18.13.107:1721>80] (t2 22) 
GET /41494377**562173/ HTTP/1.1 SCOD=00
!->14/02 16:54:11 [195.18.13.107:1721>80] (t2 23) >HTTP  in:385 out:10138  Time:156
GET /5211537**1172048/ HTTP/1.1 SCOD=00
!->14/02 16:54:24 [195.18.13.107:1727>80] (t1 30) >HTTP  in:423 out:1220  Time:187
GET /5211537**6447554/ HTTP/1.1 SCOD=23
!->14/02 18:07:24 [82.145.208.159:43634>80] (t2 52) 
GET /4149437**8265377/ HTTP/1.1 SCOD=00
!->14/02 18:09:41 [82.145.208.174:41708>80] (t2 61) 
GET /4149497**5750155 / HTTP/1.1 SCOD=00
!->14/02 18:51:39 [82.145.210.33:55210>80] (t1 66) >HTTP  in:543 out:34  Time:0
GET /5168757**9478487/ HTTP/1.1 SCOD=00
!->14/02 18:51:40 [82.145.210.33:55332>80] (t1 68) >HTTP  in:544 out:1243  Time:141
GET /4149497**0456701 / HTTP/1.1 SCOD=00
!->14/02 18:51:46 [82.145.210.33:57345>80] (t1 73) >HTTP  in:544 out:1243  Time:125
GET /5168742**0521893/ HTTP/1.1 SCOD=00

выделить:
Дату-время — фиолетовым курсивом;
Номер карты — желтым курсивом, если не в черном списке или красным, если иначе;
ip-адрес — темно-зеленым, если не в черном списке или красным, если иначе;
scod=хх — темно-зеленым если 00 или красным, если иначе.

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

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

Это все прекрасно, вот только сегодня я столкнулся с одной проблемой. Дело в том, что есть у меня одно боковое меню, offcanvas, и его состояние (открыто/закрыто) я тоже бы хотел сохранить в браузере и учетной записи пользователя. Вот только запись в localstorage и AJAX реквест на обновление в БД асинхронны и они все время норовят запускаться прямо во время сложной анимации, крадя у меня пару-другую фреймов, что особенно заметно на мобильных устройствах. Очевидно, мне бы хотелось, чтобы данные сохранялись после того, как анимация завершится, а не в критичный момент моего приложения, но как?

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

Хочу рассказать о том, как мне пришла в голову идея заняться веб-разработкой на Java.

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

• Сборка при помощи maven;
• Простой процесс деплоя и запуска;
• Библиотеки должны быть легковесны;
• Возможность использования шаблонизатора.

Усиленно погуглив, я нашел то, что мне нужно: Spark, jade4j и OrmLite.

Итак, инструменты выбраны, рассмотрим каждый из них в отдельности.

Недавно мы рассказывали про морфинг форм в SVG, когда одна форма преобразуется в другую. А теперь давайте взглянем как формы могут перетекать друг в друга. Этот липкий тянучий амебный эффект многим знаком из видео c каплями ртути на поверхности.

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.