Pull to refresh
1
Karma
0
Rating

User

  • Followers
  • Following
  • Posts
  • Comments

Mail.Ru Design Conference + Dribbble Meetup 2018

Mail.ru Group corporate blogWeb designInterfacesUsability
image

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

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

Web designCSS
Translation

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




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


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



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


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


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

Читать дальше →
Total votes 5: ↑5 and ↓0+5
Views6.9K
Comments 7

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

Web designCSS
Translation

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


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


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

Читать дальше →
Total votes 23: ↑22 and ↓1+21
Views21K
Comments 22

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

RUVDS.com corporate blogWebsite developmentVisual Studio
Translation
Visual Studio Code, вероятно, можно назвать лучшим современным редактором кода. Если вы пока с ним не работаете — то вам, по крайней мере, стоит на него взглянуть. Для VS Code написано великое множество расширений, которые размещают в каталоге Marketplace, удобный доступ к которому организован из самого редактора.

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



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

Пособие по webpack

Website developmentCSSJavaScriptHTMLNode.JS
Translation
Tutorial


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


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

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

Читать дальше →
Total votes 42: ↑41 and ↓1+40
Views332K
Comments 13

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

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


Читать дальше →
Total votes 78: ↑73 and ↓5+68
Views74K
Comments 44

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

Website developmentJavaScript
Translation


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

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

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

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

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

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

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

Angular.js


за

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

Читать дальше →
Total votes 45: ↑42 and ↓3+39
Views60K
Comments 104

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

CSSJavaScriptHTML


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

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

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

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

2ГИС corporate blogWebsite developmentCSSJavaScriptHTML
image

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

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

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

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

Web designTypographyInterfaces
Translation


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

Читать дальше →
Total votes 341: ↑325 and ↓16+309
Views1.5M
Comments 107

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

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

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




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

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

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


Читать дальше →
Total votes 60: ↑57 and ↓3+54
Views92K
Comments 13

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

Website developmentClient optimizationjQueryDevelopment of mobile applications
Sandbox
image

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

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

JavaScriptProgrammingNode.JS
Translation

Содержание




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

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


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

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

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

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

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

JavaScriptProgramming
Translation

Содержание




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

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

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

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


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

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

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

AjaxWebsite development
Translation
Tutorial
Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

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

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

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

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

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

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

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



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

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



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

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

Читать дальше →
Total votes 157: ↑147 and ↓10+137
Views290K
Comments 69

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

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

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

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

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

Читать дальше →
Total votes 323: ↑313 and ↓10+303
Views433K
Comments 331

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Registered
Activity