Как стать автором
Обновить
1
0
Glook @Glook

Пользователь

Отправить сообщение

Mail.Ru Design Conference + Dribbble Meetup 2018

Время на прочтение6 мин
Количество просмотров2.8K
image

2 июня в Москве прошла Mail.Ru Design Conference + Dribbble Meetup 2018. Мы проводим мероприятие в седьмой раз и оно окончательно выросло из формата митапа в большую конференцию про продуктовый дизайн. На ней выступили команды Norde, RealtimeBoard, Rambler & Co, Сетка, Альфа-Банк, Phase, Future London Academy, Mail.Ru, БЭМ Дизайн, S7, Mentor Forces, а также Дима и Лета Штольц, Тарас Бризицкий и Илья
Сидоренко.
Читать дальше →
Всего голосов 25: ↑22 и ↓3+19
Комментарии0

Flexbox: насколько велика эта гибкая коробка?

Время на прочтение9 мин
Количество просмотров10K

Продолжаю публикацию переводов по особенностям CSS-технологии Flexbox.




Из цикла опубликованы следующие статьи:


  1. Что происходит при создании контейнера Flexbox.
  2. Все, что вам нужно знать о выравнивании во Flexbox.



Краткое резюме


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


Это третья часть моей серии о Flexbox. В последних двух статьях мы рассмотрели, что происходит при создании flex-контейнера, и исследовали выравнивание, как оно работает во Flexbox. На этот раз мы собираемся взглянуть на размеры. Как мы контролируем размер наших flex элементов, и какой выбор делает браузер, когда он регулирует размер?

Всего голосов 5: ↑5 и ↓0+5
Комментарии7

Что происходит при создании контейнера Flexbox?

Время на прочтение9 мин
Количество просмотров26K

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.


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


В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.

Всего голосов 23: ↑22 и ↓1+21
Комментарии22

10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков

Время на прочтение4 мин
Количество просмотров107K
Visual Studio Code, вероятно, можно назвать лучшим современным редактором кода. Если вы пока с ним не работаете — то вам, по крайней мере, стоит на него взглянуть. Для VS Code написано великое множество расширений, которые размещают в каталоге Marketplace, удобный доступ к которому организован из самого редактора.

Существуют расширения для отладки и форматирования кода, расширения, облегчающие работу с различными платформами (вроде Heroku, GitHub, Docker, Azure) и технологиями. В Marketplace можно найти темы для редактора, линтеры, средства, облегчающие ввод повторяющихся фрагментов кода, и многое другое.



Автор материала, перевод которого мы публикуем сегодня, отобрал 10 лучших VS Code-расширений, предназначенных преимущественно для тех, кто занимается фронтенд-разработкой, то есть, работает с HTML, CSS, JavaScript и с различными веб-фреймворками.
Читать дальше →
Всего голосов 31: ↑24 и ↓7+17
Комментарии16

Пособие по webpack

Время на прочтение8 мин
Количество просмотров347K


Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.


Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:

Читать дальше →
Всего голосов 42: ↑41 и ↓1+40
Комментарии13

Избавляемся от JavaScript в социальных кнопках (Facebook, VK, Twitter и др.)

Время на прочтение5 мин
Количество просмотров78K
Как мы избавились от JavaScript-библиотек социальных сетей, ускорили скорость загрузки страниц и использовали RESTful API для “шаринга” и “лайков”.


Читать дальше →
Всего голосов 78: ↑73 и ↓5+68
Комментарии44

ES6 и за его пределами. Глава 1: ES? Настоящее и Будущее

Время на прочтение5 мин
Количество просмотров35K


Хочу уделить внимание книге, которую написал Kyle Simpson — «ES6 и за его пределами» (англ. «ES6 & Beyond»). Конечно, вклад внес не только он, а множество замечательных контрибьюторов. Благодарности.
На данный момент имеет статус — завершенный черновик.

Оглавление:
  • Глава 1: ES? Настоящее & Будущее
  • Глава 2: Синтаксис
  • Глава 3: Организация
  • Глава 4: Асинхронное управление потоком
  • Глава 5: Коллекции
  • Глава 6: API Дополнения
  • Глава 7: Мета программирование
  • Глава 8: За пределами ES6

Перед тем как начать читать эту книгу, я полагаю, что вы уже обладаете твердым знанием JavaScript вплоть до самого популярного стандарта (на момент написание этой книги), который обычно называют ES5 (технически это ES5.1). Здесь мы будем говорить о предстоящем стандарте ES6 и попытаемся понять дальнейшее развитие JS.
Читать дальше →
Всего голосов 27: ↑23 и ↓4+19
Комментарии8

Очень субъективный обзор JS фреймворков. AmpersandJS, часть 0

Время на прочтение20 мин
Количество просмотров61K
От переводчика: когда я начал разбираться с MVC-фреймворками для фронт-энда, каким-то чудом попалась на глаза эта статья Henrik Joreteg. Сейчас дошли руки перевести ее для Хабра, тем более, что об AmpersandJS на Хабре вообще не слышно. Попробую организовать цикл статей по этому инструменту ребят из &yet, мне кажется, он достоин внимания.

котики и велосипеды

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

Angular.js


за

  1. очень легко начать использовать. можно просто вставить тег script, добавить немного ng- атрибутов в ваше приложение, и вы волшебным образом получаете нужное вам поведение
  2. Angular хорошо поддерживается его основной командой разработчиков, многие из которых работают в Гугле на постоянной основе
  3. большая аудитория/сообщество

Читать дальше →
Всего голосов 45: ↑42 и ↓3+39
Комментарии104

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1

Время на прочтение5 мин
Количество просмотров7.7K


В этом году мне посчастливилось впервые посетить ежегодную (5-ю по счету), конференцию Fronteers #fronteers12, в Амстердаме.

Самая громкая клиент-сайд конференция в Европе, длилась 2 дня, 4-5 октября в стенах необычного кинотеатра Pathé Tuschinski.

Все доклады были на английском языке, в постоянном сопровождении Кристиана Хейлманна. Под катом ссылки на слайды и основные тезисы презентаций первого дня конференции.
Читать дальше →
Всего голосов 39: ↑35 и ↓4+31
Комментарии5

TARS, сделай уровень frontend-рутины 0%

Время на прочтение9 мин
Количество просмотров55K
image

Frontend с каждым днём становится сложнее. Задачи — объёмнее, пользовательский интерфейс — насыщеннее, HTML, CSS и Javascript — огромнее, а сон фронтендера — короче и беспокойнее. Необходимо грамотно структурировать код, выполнять множество рутинных задач (компиляция css- и js-препроцессоров, сборка спрайтов, подготовка и оптимизация изображений, минификация файлов и др). Если вы работаете в команде — это автоматически увеличивает сложность разработки. Чтобы решить эти проблемы, я создал TARS — сборщик html-вёрстки, основанный на gulpjs.
Уменьшить рутину
Всего голосов 41: ↑36 и ↓5+31
Комментарии44

Почему вам НЕ стоит использовать AngularJs

Время на прочтение12 мин
Количество просмотров248K
Много времени прошло с момента появления AngularJs (в масштабах веб-технологий конечно). Сейчас в интернетах есть огромное количество постов восхваляющих этот фреймворк до небес, что это манна небесная не иначе, а критики не так уж и много как он того заслуживает. Но такие статьи уже потихоньку начинают появляться, и меня это радует, надеюсь индустрия переболеет ангуляром так же, как переболела MooTools, Prototype, %какой-нибудь новый язык под JVM%, %другая-супер-революционная-технология%. Не знаю почему, но в IT-области такие революционные технологии, которые поднимают шум, а потом пропадают, появляются довольно часто. Хороший разработчик должен уметь отличать очередную модную технологию, от работающего инструмента. И для этого очень важно критически смотреть на вещи. Моя статья — это компиляция самых весомых выводов из других статей, и моих личных умозаключений. Ангуляр создает хороший вау-эффект, когда видишь его впервые: «ух ты, я написал ng-repeat, и реализовал эту логику одними тегами и все само обновляется!», но как только приходится реализовывать реальные приложения, а не очередной TODO-лист, то все становиться очень печально. Сразу хочу сказать, что фреймворк я знаю хорошо, даже больше чем мне хотелось бы его знать, я программировал на нем в течении 2 лет. И для следующего проекта я его точно не выберу, и это хорошо, все мы учимся на ошибках. Так что же не так с ангуляром? Тут нет однозначного ответа, слишком много разных недостатков, которые создают такой облик фреймворку. Если одним словом – непродуманная архитектура. Под катом я привожу конкретику, так что устраивайтесь поудобнее. ДА НАЧНЕТСЯ ХОЛЛИ ВАР!
Читать дальше →
Всего голосов 305: ↑242 и ↓63+179
Комментарии387

300 потрясающих бесплатных сервисов

Время на прочтение11 мин
Количество просмотров1.6M


Автор оригинальной статьи 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: Невероятно простой счет.

Читать дальше →
Всего голосов 341: ↑325 и ↓16+309
Комментарии107

Несколько интересностей и полезностей для веб-разработчика #36

Время на прочтение5 мин
Количество просмотров60K
Доброго времени суток, уважаемые хабравчане. Поздравляю всех с наступившим 2015 годом! За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Лучшее от Codrops за 2014 год




Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.
Читать дальше →
Всего голосов 74: ↑72 и ↓2+70
Комментарии7

01 Ссылки для UX-специалистов

Время на прочтение3 мин
Количество просмотров93K
В этой подборке я хочу поделиться информационными ресурсами, где можно почерпать новые знания, отследить новые методы, техники и аналитку, а также улучшить свои навыки в области UX. Полезно будет не только специалистам из области юзабилити, а также всем кто имеет отношение к разработке веб-продуктов.


Читать дальше →
Всего голосов 60: ↑57 и ↓3+54
Комментарии13

jQuery для мобильных устройств, все за и против

Время на прочтение7 мин
Количество просмотров28K
image

Это довольно вольный перевод статьи, которая попалась мне на просторах интернета. Её автор — TJ VanToll. Он уже много лет занимает веб-разработкой и, в частности, оптимизацией сайтов для большей производительности на мобильных телефонах. Под катом рассмотрены несколько способов оптимизации, а так же приведены результаты тестирования на различных устройствах.
Читать дальше →
Всего голосов 32: ↑26 и ↓6+20
Комментарии20

Выразительный JavaScript: Node.js

Время на прочтение22 мин
Количество просмотров148K

Содержание




Ученик спросил: «Программисты встарь использовали только простые компьютеры и программировали без языков, но они делали прекрасные программы. Почему мы используем сложные компьютеры и языки программирования?». Фу-Тзу ответил: «Строители встарь использовали только палки и глину, но они делали прекрасные хижины».

Мастер Юан-Ма, «Книга программирования»


На текущий момент вы учили язык JavaScript и использовали его в единственном окружении: в браузере. В этой и следующей главе мы кратко представим вам Node.js, программу, которая позволяет применять навыки JavaScript вне браузера. С ней вы можете написать всё, от утилит командной строки до динамических HTTP серверов.

Эти главы посвящены обучению важным идеям, составляющим Node.js и предназначены для передачи вам достаточного количества информации, чтобы вы могли писать полезные программы в этой среде. Они не пытаются быть всеобъемлющими справочниками по Node.

Код из предыдущих глав вы могли писать и исполнять прямо в браузере, но код из этой главы написан для Node и в браузере работать не будет.

Если вы хотите сразу запускать код из этой главы, начните с установки Node с сайта nodejs.org для вашей операционки. Также на этом сайте вы найдёте документацию по Node и его встроенным модулям.
Читать дальше →
Всего голосов 45: ↑42 и ↓3+39
Комментарии8

Выразительный JavaScript: Модули

Время на прочтение17 мин
Количество просмотров84K

Содержание




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

Поняв проблему, программист тратит много времени на размышления о структуре. Его программы получаются жёстко структурированными, как каменные изваяния. Они тверды, но когда их нужно менять, над ними приходится совершать насилие.

Мастер-программист знает, когда нужна структура, а когда нужно оставить вещи в простом виде. Его программы словно глина – твёрдые, но податливые.

Мастер Юан-Ма, Книга программирования


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

В случае больших программ отдельные функции уже теряются в коде, и нам необходима единица организации кода больших масштабов. Модули группируют программный код по каким-то определённым признакам. В этой главе мы рассмотрим преимущества такого деления и техники создания модулей в JavaScript.
Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии3

Семь принципов создания современных веб-приложений

Время на прочтение19 мин
Количество просмотров187K
Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

JavaScript бесспорно стал незаменимым инструментом для разработчиков фронтенда. Сейчас сфера его применения расширяется на другие области, такие как серверы и микроконтроллеры. Этот язык программирования выбрали престижные университеты, чтобы обучать студентов основам информатики.

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

  • Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
  • Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
  • Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
  • Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
  • Нужно ли использовать техники вроде PJAX или TurboLinks?
  • Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?
Читать дальше →
Всего голосов 108: ↑99 и ↓9+90
Комментарии33

Размеры экранов

Время на прочтение2 мин
Количество просмотров548K
Планшеты и смартфоны оснащаются экранами с разными соотношениями сторон и разной плотностью пикселей, однако эти параметры редко указываются в технических характеристиках.

Попробуем разобраться со всеми хитростями, связанными с этими параметрами. Начнём с планшетов.
Вот соотношение размеров экранов, использующихся в большинстве современных планшетов.



Обратите внимание, насколько экран 8" с соотношением сторон 4:3 визуально больше широкого экрана 7". А широкий экран 10.1" на сантиметр меньше экрана 9.7" по высоте.

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



Текст на экранах с низким PPI (количеством точек на дюйм) читается не комфортно. Я бы не стал покупать планшет с экраном, имеющим PPI ниже 150. Даже 164 PPI экрана iPad mini многим кажутся недостаточными. Отлично воспринимаются экраны с PPI больше 200.

Для меня было большим открытием, что экран 9.7" 1024x768 имеет даже меньшее PPI, чем экран 7" 800x480.

Читать дальше →
Всего голосов 157: ↑147 и ↓10+137
Комментарии69

Механические клавиатуры

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

А раз уж сталкиваешься с вещью регулярно, постепенно возникает вопрос — можно ли найти для работы какие-то более удобные варианты обычных клавиатур?

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

Механические клавиатуры. Путеводитель.

Читать дальше →
Всего голосов 323: ↑313 и ↓10+303
Комментарии331
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Москва и Московская обл., Россия
Зарегистрирован
Активность