Pull to refresh
0
0

User

Send message

Несколько интересностей и полезностей для веб-разработчика (выпуск 2)

Reading time3 min
Views83K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Webflow



С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js


Функциональный и простой инструмент для создания параллакс эффекта.

Читать дальше →
Total votes 124: ↑114 and ↓10+104
Comments27

jTap — событие клика для сенсорных устройств

Reading time2 min
Views30K
jTap - tap event for jQuery

Привет, %username%!

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

На мой взгляд, самым значительным изобретением в мире веб-разработок, за последние несколько лет, стали CSS media queries — они позволяют организовывать внешний вид веб-приложения так, что он в корне может отличатся на разных разрешениях экрана. Любой форм-фактор девайса может иметь собственное представление дизайна и это прекрасно. Мы все это знаем, но речь пойдет не об этом, а о обработке событий…
Подробнее о jTap
Total votes 23: ↑20 and ↓3+17
Comments30

Цикл разработки через Github

Reading time3 min
Views105K

Разработка



Я расскажу о цикле разработки через Github, который я использую. Он был проверен в течении года на командах разного размера: 3 — 14 человек.

Существует 2 основных ветки: master и dev.

master — стабильная ветка, готовая к выкатыванию на production сервер в любой момент.

dev — ветка, над которой в данный момент работает команда.

Итак, в начале разработки master и dev ветки идентичны.

Читать дальше →
Total votes 102: ↑86 and ↓16+70
Comments59

Сниппеты для Twitter Bootstrap

Reading time1 min
Views97K
Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail



Читать дальше →
Total votes 125: ↑117 and ↓8+109
Comments23

Pixomondo и Dell: на крыльях успеха

Reading time11 min
Views6.8K
«Команда „А”», «Голодные игры», «Красный Барон», «Гнев Титанов», «2012», «Хранитель времени», «Новый Человек-паук», «Форсаж 5», «Форсаж 6» — вот далеко не полный список тех фильмов, в создании визуальных эффектов к которым активно участвовала компания Pixomondo.
В 2013 году портфолио дружной команды этой студии пополнилось замечательными спецэффектами к фильмам «Обливион», «После нашей эры», «Стартрек: Возмездие», а также драконами и замками из сериала «Игра престолов», снятого по книгам Джорджа Мартина из цикла «Песнь льда и пламени».

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



Компания Pixomondo уже давно успела оценить преимущество продукции Dell. Не вдаваясь в подробности, оставим пару ссылок на видеоинтервью с представителями этой замечательной команды:

В этой статье мы немного расскажем о том, какие визуальные эффекты использовали в Pixomondo при создании новых фильмов, и, кроме этого, покажем конфигурацию железа от Dell, которое было выбрано для визуализации драконов и прорисовки замков в «Игре престолов», а также для создания фантастически красивых космических батальных сцен в новом фильме из цикла «Стартрек». Кому интересно, добро пожаловать под кат (Осторожно! Траффик!).
Читать дальше →
Total votes 7: ↑7 and ↓0+7
Comments2

Абсолютное горизонтальное и вертикальное центрирование

Reading time5 min
Views314K
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.
Читать дальше →
Total votes 112: ↑106 and ↓6+100
Comments10

Взломать Wi-Fi за 10 часов

Reading time12 min
Views1.5M
Еще не так давно казалось, что беспроводная сеть, защищенная с помощью технологии WPA2, вполне безопасна. Подобрать простой ключ для подключения действительно возможно. Но если установить по-настоящему длинный ключ, то сбрутить его не помогут ни радужные таблицы, ни даже ускорения за счет GPU. Но, как оказалось, подключиться к беспроводной сети можно и без этого — воспользовавшись недавно найденной уязвимостью в протоколе WPS.


Читать дальше →
Total votes 304: ↑294 and ↓10+284
Comments164

«Элкомсофт» ускорил подбор WPA2-ключей в 100 раз

Reading time1 min
Views6.2K
Компания «Элкомсофт» заявила, что с помощью аппаратной акселерации (используются GPU-процессоры NVidia) в сто раз ускорила процесс подбора ключей WPA и WPA2, которые используются для защиты сеансов связи WiFi.

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

По мнению специалистов «Элкомсофта», им удалось де-факто «похоронить» технологию WPA2 как таковую. Фирмы не могут больше полагаться на этот стандарт для корпоративной безопасности.
Читать дальше →
Total votes 53: ↑45 and ↓8+37
Comments110

Домашний 3D-принтер окупается за 1 год

Reading time2 min
Views217K

57% деталей для изготовления RepRap можно напечатать на таком же принтере

Многие не могут придумать, что конкретно они будут печатать на 3D-принтере в случае его покупки. Но уже после покупки у людей обычно такого вопроса не возникает, работа для принтера находится сама собой: это различные ручки, зажимы, игрушки, подставочки, корпусы, вазочки, колечки, ремешки, другие детали. Достаточно зайти на сайт MakeXYZ или Thingiverse, чтобы расширить кругозор.

По расчётам экономистов из Мичиганского технологического университета, домашний 3D-принтер обеспечивает возврат инвестиций от 40% до 200% и экономит домашнему хозяйству от $300 до $2000 в год.
Читать дальше →
Total votes 58: ↑49 and ↓9+40
Comments55

Мобильная типографика

Reading time3 min
Views78K


При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.
Читать дальше →
Total votes 51: ↑48 and ↓3+45
Comments12

За что HTML-верстальщики так не любят веб-дизайнеров

Reading time4 min
Views116K
За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).
Читать дальше →
Total votes 149: ↑128 and ↓21+107
Comments273

Сайты для онлайн-обучения веб-разработчиков и веб-дизайнеров

Reading time2 min
Views128K
В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth


Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

Читать дальше →
Total votes 63: ↑57 and ↓6+51
Comments16

Основные ошибки при разработке адаптивного дизайна

Reading time2 min
Views52K
Адаптивные дизайн становится все популярнее, сегодня это уже не просто модная новая технология. Ниже собраны самые частые ошибки, допускаемые при разработке адаптивного сайта, своеобразный чек-лист.



Скрывать контент


Не стоит прятать части сайта только потому, что они не помещаются на экране мобильного устройства. Мобильные пользователю хотят видеть тот же контент и функционал, что и пользователи десктопов. Нужно проектировать интерфейс так, чтобы по возможности помещалось все.
Читать дальше →
Total votes 65: ↑57 and ↓8+49
Comments45

Тренды в веб-дизайне: плоский интерфейс и длинные тени

Reading time2 min
Views25K
Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн. Этот прием, да, назовем его так, получил шквал критики и восхищения, у него появились сторонники и лютые ненавистники, но сегодня, я постараюсь рассмотреть новый, современный, набирающий огромную популярность подход при проектировании — long shadows (длинные тени).

(P.S. — Все картинки кликабельны).

Что такое длинные тени в дизайне, и как это понимать?

fox icon

iPad Mini

Long Shadows

Читать дальше →
Total votes 95: ↑65 and ↓30+35
Comments73

Новое для веб-дизайнера за июль 2013

Reading time2 min
Views35K
Новые полезные инструменты, сервисы, статьи, бесплатности для веб-дизайнеров за июль 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера".

Сервисы




I Want To Use — на сайте можно выбрать CSS-фичи, которые хотите использовать, и будет показан процент пользователей, которые смогут их использовать.
Читать дальше →
Total votes 48: ↑44 and ↓4+40
Comments9

Необычная навигация на сайтах

Reading time4 min
Views40K
Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox


Навигация на сайте всегда должна быть под рукой, но в то же время не мешать пользователю. На сайте Toybox именно такое решение: навигация проста, но в тоже время хорошо заметна. Когда панель меню скрыта, страница акцентирует внимание посетителя на контенте, т.к. отсутствуют отвлекающие блоки. Горизонтальная навигация также проста и удобна.

Читать дальше →
Total votes 42: ↑31 and ↓11+20
Comments12

Парадокс доказательства

Reading time12 min
Views248K
31 августа 2012 года японский математик Cинъити Мотидзуки опубликовал в интернете четыре статьи.

Заголовки были непостижимы. Объём был пугающим: 512 страниц в сумме. Посыл был дерзким: он заявил, что доказал abc-гипотезу, знаменитую, соблазнительно лёгкую числовую теорию, которая десятилетиями заводила математиков в тупик.

Затем Мотидзуки просто ушёл. Он не отправил свою работу в Annals of Mathematics. Он не оставил сообщение ни на одном сетевом форуме, которые часто посещают математики со всего мира. Он просто опубликовал статьи и ждал.

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

«А я такой: „Да, Гугл, мне это как бы интересно!“» – вспоминает Элленберг, – «Я запостил их в Фэйсбуке и в моём блоге, с пометкой: „Между прочим, похоже, что Мотидзуки доказал abc-гипотезу“».

Интернет взорвался. В течение дней даже далёкие от математики СМИ подхватили историю. «Решена сложнейшая в мире математическая теория», – объявила Telegraph. «Возможный прорыв в abc-гипотезе», – немного скромнее писала New York Times.

На математическом форуме MathOverflow математики со всего мира стали оспаривать и обсуждать заявление Мотидзуки. Вопрос, который быстро стал самым популярным на форуме был прост: «Кто-нибудь может объяснить философию его работы и прокомментировать почему она может пролить свет на abc-гипотезу?» – спросил Энди Путман, ассистент профессора в Университете Райса. Или, если перефразировать: «Я ничего не понял. Кто-нибудь понял?»

Проблема, с которой столкнулись многие математики, сбежавшиеся к сайту Мотидзуки, была в том, что доказательство было невозможно прочесть. Первая статья под заголовком «Интер-универсальная теория Тейхмюллера 1: Построение театров Ходжа», начинается с утверждения, что цель работы в «разработке арифметической версии теории Тейхмюллера для цифровых полей ограниченных эллиптической кривой… с помощью применения теории полуграфов анабелиоидов, фробениоидов, эталь тета-функций и логарифмических оболочек».

Это похоже на тарабарщину не только для обывателя. Это было тарабарщиной и для математического сообщества.

«Смотря на неё, ты чувствуешь будто читаешь статью из будущего или далёкого космоса», – написал Элленберг в своём блоге.

«Она очень, очень странная», – говорит профессор Колумбийского университета Йохан де Йонг, работающий в близких сферах математики.

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

Как профессор Мун Дучин из университета Тафтса выразила это: «Он воистину создал свой собственный мир».

Должно пройти долгое время прежде чем кто-нибудь будет способен понять работу Мотидзуки, тем более оценить верность доказательства. В последующие месяцы статьи лежали камнем на плечах математического сообщества. Горстка людей подобралась к ним и начала изучать. Другие пытались, но быстро сдались. Некоторые полностью игнорировали их, предпочитая наблюдать издалека. Что же до виновника беспокойства, человека, который заявил, что решил одну из величайших проблем математики – от него не было ни звука.
Читать дальше →
Total votes 356: ↑345 and ↓11+334
Comments404

Justify Grid — новое слово в разметке

Reading time2 min
Views35K

Доброго времени суток уважаемые хабражители. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

Проблема


Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.
Читать дальше →
Total votes 41: ↑33 and ↓8+25
Comments43

MaskJS — HMV* фреймворк

Reading time11 min
Views11K

Разрабатывая MaskJS вот уже больше полугода, удалось превратить DOM шаблонизатор в очень мощный, но при этом производительный веб фреймворк. В статье познакомлю вас с возможно интересными подходами к разработки. Уверен, будет интересно почитать о использовании сигналов и слотов вместо DOM событий. И как компоненты делают нашу жизнь проще. Маска легко интегрируется в уже готовый проект, и даже может быть использована вместе с любым другим фреймворком. Основным же отличием наверное является render flow, где в процессе поэтапно создается Document Fragment / контроллеры / «биндинги». Собственно всю гибкость даже сложно передать, но я попробую, и приглашаю под кат.
Читать дальше →
Total votes 35: ↑29 and ↓6+23
Comments33

Отладка Javascript

Reading time5 min
Views146K
Debug Logo

Многие задают мне один и тот же вопрос:
«Как дебажить этот $%*!%$! JavaScript?».

Так вот, во-первых JavaScript — не $%*!%$! А как я его дебажу — сейчас расскажу.

(Примечание: наверное эта статья больше для новичков. Так что не судите строго)

Читать дальше →
Total votes 192: ↑178 and ↓14+164
Comments78

Information

Rating
Does not participate
Location
Лимассол, Government controlled area, Кипр
Date of birth
Registered
Activity