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

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

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

Дайджест продуктового дизайна, апрель 2019

Время на прочтение10 мин
Количество просмотров4.9K
Дайджест продуктового дизайна, апрель 2019

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-март 2019.
Всего голосов 35: ↑35 и ↓0+35
Комментарии0

Технологические тренды веб-разработки 2019

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

Введение


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


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

Использование JavaScript-консоли в браузерах

Время на прочтение4 мин
Количество просмотров40K
Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log(). Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.


Читать дальше →
Всего голосов 67: ↑57 и ↓10+47
Комментарии10

Нужно ли чистить строки в JavaScript?

Время на прочтение6 мин
Количество просмотров79K
Что? Строки могут быть «грязными»?

Да, могут.

//.....Какой-то код
console.log(typeof str); // string
console.log(str.length); // 15
console.log(str); // "ччччччччччччччч"

Вы думаете, в этом примере строка занимает 30 байт?

А вот и нет! Она занимает 30 мегабайт!
Читать дальше →
Всего голосов 220: ↑219 и ↓1+218
Комментарии224

Сетки для адаптивного дизайна

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


Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Читать дальше
Всего голосов 22: ↑22 и ↓0+22
Комментарии3

22 photoshop-плагина для фронтенд-разработчика

Время на прочтение2 мин
Количество просмотров74K
Предлагаю читателям «Хабрахабра» подборку 22 дополнений (скриптов) помощников, необходимых фронтенд-разработчику.

Hexy


Hexy

Печально выбирать слои в макете и каждый раз запускать палитру цветов только для того, чтобы получить шестнадцатиричное значение того или иного цвета. Hexy позволяет использовать инструмент «Пипетка»: нажмите на цвет объекта и скопируйте его непосредственно в буфер обмена.
Читать дальше →
Всего голосов 36: ↑29 и ↓7+22
Комментарии9

Тестирование Node.js-проектов. Часть 1. Анатомия тестов и типы тестов

Время на прочтение27 мин
Количество просмотров39K
Автор материала, первую часть перевода которого мы сегодня публикуем, говорит, что он, как независимый консультант по Node.js, каждый год анализирует более 10 проектов. Его клиенты, что вполне оправданно, просят его обратить особое внимание на тестирование. Несколько месяцев назад он начал делать заметки, касающиеся ценных приёмов тестирования и встречающихся ему ошибок. В результате получился материал, содержащий три десятка рекомендаций по тестированию.

image

В частности, речь здесь пойдёт о выборе подходящих в конкретной ситуации типов тестов, об их правильном оформлении, об оценке их эффективности, и о том, где именно в CI/CD-цепочках нужно их размещать. Некоторые из приведённых здесь примеров проиллюстрированы с использованием Jest, некоторые — с использованием Mocha. Этот материал, в основном ориентирован не на инструменты, а на методологии тестирования.

Тестирование Node.js-проектов. Часть 2. Оценка эффективности тестов, непрерывная интеграция и анализ качества кода
Читать дальше →
Всего голосов 25: ↑24 и ↓1+23
Комментарии0

Что нужно знать о массивах JavaScript

Время на прочтение14 мин
Количество просмотров25K
Представляем вам перевод статьи автора Thomas Lombart, которая была опубликована на сайте medium.freecodecamp.org. Перевод публикуется с разрешения автора.


Пример использования метода reduce для сокращения массива

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

Несмотря на эффективность, большинство этих методов все еще малоизвестны и не очень популярны. Я проделаю для вас трудную работу и расскажу о самых полезных. Считайте эту статью своим путеводителем по методам массивов JavaScript.
Читать дальше →
Всего голосов 39: ↑27 и ↓12+15
Комментарии13

Элементарные шифры на понятном языке

Время на прочтение4 мин
Количество просмотров310K
Привет, Хабр!

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

Прежде всего, разберемся в терминологии.

Шифрование – это такое преобразование исходного сообщения, которое не позволит всяким нехорошим людям прочитать данные, если они это сообщение перехватят. Делается это преобразование по специальным математическим и логическим алгоритмам, некоторые из которых мы рассмотрим ниже.

Исходное сообщение – это, собственно, то, что мы хотим зашифровать. Классический пример — текст.

Шифрованное сообщение – это сообщение, прошедшее процесс шифрования.

Шифр — это сам алгоритм, по которому мы преобразовываем сообщение.

Ключ — это компонент, на основе которого можно произвести шифрование или дешифрование.

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

Теперь, когда мы говорим на более-менее одном языке, разберем простые шифры.
Читать дальше →
Всего голосов 33: ↑29 и ↓4+25
Комментарии5

Как сделать так, чтобы вашу англоязычную статью для Хабра прочитали десятки тысяч человек: 3 простых совета

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


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

В этом топике я собрал три простых совета по повышению читабельности хабрастатей и привлечению англоязычных читателей. Надеюсь, будет полезно.
Читать дальше →
Всего голосов 89: ↑83 и ↓6+77
Комментарии42

Лицензия для вашего open-source проекта

Время на прочтение98 мин
Количество просмотров186K
В этой статье я хочу немного поговорить об авторском праве и свободных лицензиях на ПО. Текст является результатом самостоятельного выбора лицензий и их применения к своим проектам.

Статья будет полезна тем, кто хочет:

— в общих чертах понять, что такое авторское право (но лучше обратиться к юристу);
— подобрать свободную лицензию для своего проекта;
— разобраться, что нужно писать в шапке файла исходного кода.
Читать дальше →
Всего голосов 136: ↑132 и ↓4+128
Комментарии117

Как правильно оформить Open Source проект

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

В свободное и не свободное время[1] я развиваю несколько своих проектов на github, а также, по мере сил, участвую в жизни интересных для меня, как программиста, проектах.


Недавно один из коллег попросил консультацию: как выложить разработанную им библиотеку на github. Библиотека никак не связана с бизнес-логикой приложения компании, по сути это адаптер к некоему API, реализующему определённый стандарт. Помогая ему, я понял что вещи, интуитивно понятные и давно очевидные для меня, в этой области, совершенно неизвестны человеку делающему это впервые и далёкому от Open Source.


Я провел небольшое исследование и обнаружил что большинство публикаций по этой теме на habrahabr освещают тему участия (contributing), либо просто мотивируют каким-нибудь образом примкнуть к Open Source, но не дают исчерпывающей инструкции как правильно оформить свой проект. В целом в рунете, если верить Яндекс, тема освещена со стороны мотивации, этикета контрибуции и основ пользования github. Но не с точки зрения конкретных шагов, которые следует предпринять.


Так что из себя представляет стильный, модный, молодёжный Open Source проект в 201* году?

Читать дальше →
Всего голосов 89: ↑84 и ↓5+79
Комментарии135

8 приемов работы с CSS: параллакс, «липкий» футер и другие

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


От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.

Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.

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

Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Всего голосов 38: ↑37 и ↓1+36
Комментарии17

Объясняем современный JavaScript динозавру

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


Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:


Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости


Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.


Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

Всего голосов 174: ↑171 и ↓3+168
Комментарии505

Как подступиться к fullstack-разработке сегодня, если ты проспал десять лет

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


Привет, Хабр! Несколько месяцев назад у меня остро встал вопрос смены профиля деятельности и я обнаружил, что для претендента на вакансию web-разработчика сейчас недостаточно навыков десятилетней давности (какая неожиданность!). Пришлось срочно актуализировать свои знания. Заодно я решил составить шпаргалку с описанием большинства современных технологий, чтобы в случае чего кидать жаждущим новых знаний линк на эту статью, да и самому не забывать.
Читать дальше →
Всего голосов 162: ↑135 и ↓27+108
Комментарии381

Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

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

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:


Эффекты фильтрации SVG


  1. Эффекты фильтров SVG. Часть 1. SVG фильтры 101.
  2. Эффекты фильтров SVG. Часть 2. Контурный текст при помощи feMorphology.
  3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer.
  4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
  5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap



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


Всего голосов 15: ↑14 и ↓1+13
Комментарии1

12 концепций JavaScript, о которых нужно знать

Время на прочтение11 мин
Количество просмотров70K
JavaScript — это сложный язык. Если вы, на любом уровне, занимаетесь JavaScript-разработкой, это значит, что вам жизненно необходимо понимать базовые концепции этого языка. В материале, перевод которого мы сегодня публикуем, рассмотрены 12 важнейших концепций JavaScript. Конечно, JavaScript-разработчику нужно знать гораздо больше, но без того, о чём мы будем сегодня говорить, ему точно не обойтись.


Читать дальше →
Всего голосов 65: ↑48 и ↓17+31
Комментарии61

Пособие по 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 Promise для новичков

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

Этот материал мы подготовили для JavaScript-программистов, которые только начинают разбираться с «Promise». Обещания (promises) в JavaScript – это новый инструмент для работы с отложенными или асинхронными вычислениями, добавленный в ECMAScript 2015 (6-я версия ECMA-262).
Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии61

Рассылай и властвуй: инструменты для создания и тестирования рассылки

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


Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.
Победить Outlook
Всего голосов 43: ↑40 и ↓3+37
Комментарии6

Информация

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