Pull to refresh
-1
0
Николай @Piterski

User

Send message

Перевод Google JavaScript Style Guide

Reading time 2 min
Views 17K
Добрый день, товарищи разработчики!

Введение нового разработчика в проект практически всегда начинается с разбора codestyle'a данного проекта. Так как иногда возникает потребность в обучении разработчиков стилю написания кода, не всегда Junior-разработчики могут сразу разобрать англоязычные примеры. В результате, это привело… к переводу одного из них, о чем я и хочу рассказать в этой статье.

Читать дальше →
Total votes 23: ↑20 and ↓3 +17
Comments 7

Вырезать и копировать в буффер с помощью JavaScript

Reading time 4 min
Views 99K
Начиная с IE10 добавлена поддержка команд «Копировать» и «Вырезать» с помощью метода Document.execCommand(). Так же эти методы доступны в Chrome начиная с версии 43.

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

Это становится крайне полезным в сочетании с API программного выделения текста, что бы задать что скопировать в буфер. Примеры будут рассмотрены в этой статье.
Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Comments 25

Обзор новшеств ECMAScript 2016, 2017, и 2018 с примерами

Reading time 13 min
Views 95K
Сложно уследить за новшествами различных версий ECMAScript, а ещё сложнее — найти полезные примеры их применения, не перекапывая горы информации. Поэтому сегодня мы публикуем перевод материала, автор которого проанализировал 18 новых возможностей ECMAScript, в число которых входят те, что имеются в уже вышедших стандартах ES2016 и ES2017, а также — те, которые должны появиться в стандарте ES2018. Автор этой статьи обещает, что каждый, кто её прочтёт, узнает много интересного и полезного о новых возможностях JavaScript.


Читать дальше →
Total votes 41: ↑38 and ↓3 +35
Comments 13

Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса

Reading time 15 min
Views 207K
Фреймворк Bootstrap — это свободный набор инструментов для создания интерфейсов сайтов и веб-приложений. Его возможности ориентированы исключительно на фронтенд-разработку. Bootstrap — проект весьма популярный, о чём, например, говорит то, что он занимает (по состоянию на начало марта 2018-го года) второе место по количеству звёзд на GitHub.


Если вы хотите освоить Bootstrap, в частности, его самую свежую, четвёртую версию, значит, этот материал подготовлен специально для вас. Здесь, на небольшом сквозном примере, который реально освоить за полчаса, будут продемонстрированы основы Bootstrap, разобравшись с которыми вы вполне сможете сделать что-то своё, использовав этот фреймворк.
Читать дальше →
Total votes 40: ↑31 and ↓9 +22
Comments 42

Исчерпывающий справочник по JavaScript для вашего следующего собеседования

Reading time 6 min
Views 53K
Перевод статьи Gustavo Azevedo The Definitive JavaScript Handbook for your next developer interview.



JavaScript был и продолжает быть самым популярным языком программирования, согласно опросу Stack Overflow Survey. Неудивительно, что 1/3 всех вакансий требуют знания JavaScript. Поэтому, если вы планируете работать разработчиком в ближайшем будущем, то вам следует ознакомиться с этим черезвычайно популярным языком.

Цель публикации — собрать в одном месте все концепции JavaScript, которые часто встречаются на собеседовании.
Читать дальше →
Total votes 34: ↑23 and ↓11 +12
Comments 26

Долой таблички! Как выучить английские времена

Reading time 5 min
Views 245K


Времена в английском языке традиционно считаются одной из самых сложных тем в обучении. Они прочно ассоциируются с зазубриванием длинных малопонятных таблиц и запоминанием неочевидных правил. На самом деле, все не так. Рассказываем, как быстро овладеть временами и их аспектами, чтобы начать говорить по-английски, не спотыкаясь.
Читать дальше →
Total votes 77: ↑72 and ↓5 +67
Comments 97

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

Reading time 15 min
Views 264K


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


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


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


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

Total votes 174: ↑171 and ↓3 +168
Comments 505

FuseTools — уникальный инструмент прототипирования и разработки

Reading time 6 min
Views 20K
И снова доброго времени суток, хабражители. Меня зовут Владимир Миленко, и как вы возможно знаете, я фронтенд-разработчик в компании Иннософт. Возможно вы так-же заметите, что в свободное время я изучаю ситуацию на рынке разработки мобильных приложений. Несколько дней назад я написал статью, в которой описал, что такое NativeScript. Пришло время познакомить вас с другим уникальным инструментом, аналогов которому нет.

Речь пойдет о FuseTools — фреймворк для написания нативных мобильных приложений с потрясающими возможностями.


Читать дальше →
Total votes 22: ↑19 and ↓3 +16
Comments 5

CSS-стили для печати, о которых я забыл

Reading time 8 min
Views 80K
image


Аарон Густафсон недавно отправил твит Indiegogo, в котором было сказано, что при распечатке их страниц с информацией о заказе получается нечто совершенно неприличное. И понеслооось.
Total votes 59: ↑51 and ↓8 +43
Comments 17

ООП в JavaScript

Reading time 5 min
Views 53K


В данной статье мы поговорим об основных особенностях объектно-ориентированного программирования в JavaScript:

  • создание объектов,
  • функция-конструктор,
  • инкапсуляция через замыкания,
  • полиморфизм и ключевые слова call/apply,
  • наследование и способы его реализации.

Читать дальше →
Total votes 32: ↑17 and ↓15 +2
Comments 50

Обзор возможностей современного JavaScript

Reading time 5 min
Views 65K
JavaScript, наверное, самый известный мультипарадигменный язык, в котором очень много неочевидных особенностей. Но тем не менее любим ли мы его или ругаем, факт остается фактом — это основной язык, на котором работает современный web.

В ушедшем году, вышел стандарт ECMAScript 2015 (неформально ES6), который сильно изменил, то к чему мы привыкли. Появилась масса новых возможностей, которые по сути представляют собой современное надмножество языка, пытающегося решить существующие проблемы. Class, let, const, стрелочные функции… разработчик, который ранее не видел код, написанный на ES6, не сразу догадается, что перед ним, по сути, старый добрый JS.

Есть масса прекрасных статей, посвященных современному стандарту. В этом же посте я хочу показать, что нам может предложить современный JS, когда необходимо решить насущную задачу. Например, поздравить всех c Новым Годом.
Читать дальше →
Total votes 56: ↑36 and ↓20 +16
Comments 67

SVG-иконки – много и со стилем

Reading time 14 min
Views 50K

Маленький рассказ о том, как наша команда решила организовать иконки в грядущем проекте. Чуть-чуть исторического экскурса, взгляды по сторонам (на PNG и векторные шрифты) и рассказ о том, как мы всё-таки обустроились в итоге.

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

В общем, есть (и продолжают создаваться) иконки. Надо их положить на веб-страницу. Надо сделать это так, чтобы потом голова не болела про них весь остаток проекта и ещё пару лет в поддержке. Ну и есть дополнительные хотелки:
  • хочется вектора. Ну, ладно, вектор – это средство, а не цель. Цель – не беспокоиться ВООБЩЕ об изменении размеров, ретина дисплеях, сохранении изображения в разных форматах для разных целей.
  • хочется стилизации иконок. Потому что у нас из коробки как минимум два набора тем (светлая и тёмная), а то и контрастная, для людей с нестандартным зрением, а то и оранжевенькая какая-нибудь появится ближе к Новому году… В общем – одна и та же по сути иконка должна выглядеть слегка иначе в зависимости от выбранной на странице темы.
  • хочется динамической стилизации иконок. Статики – нам мало. Этого хватает для скриншотиков и рекламных буклетиков, но не для живых пользователей. А мы хотели жизни! Мы хотели ховера! Мы хотели селекшена!!! И дизаблить, дизаблить их всех!.. Извините.
  • НЕ хочется, чтобы в этом участвовал JavaScript в любой его форме и проявлении. Иконки – это внешний вид, а за него ответственный HTML + CSS. Ну, ладно, класс selected я готов навесить на элементы, но это последняя граница…

Есть и факторы, облегчающие задачу. Иконки сейчас (2015, осень, начинает снежить) в моде плоские, строгие. Если лет пять назад иконки пестрели, то сейчас это ушло под влиянием МС, Эппла, Материал Дизайна…

tl;dr Внимание. Следующие несколько разделов – это расплывание мыcлею по древу, причём вширь, обзор решений (в том числе – неудачных) и котик в разных ракурсах.
Кому хочется технических подробностей того, что же вышло в итоге – пожалуйте сюда.
А для остальных начнём по порядку...
Total votes 61: ↑58 and ↓3 +55
Comments 34

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

Reading time 11 min
Views 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: Невероятно простой счет.

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

Модуль вкладок на es6/es2015 без jQuery и прочих зависимостей

Reading time 3 min
Views 13K

Предисловие


Какое-то время назад я стал постепенно отказываться от jQuery в пользу нативного javascript. Это связано с тем, что поддержка старых браузеров перестала быть приоритетной и на первое место вышла скорость загрузки страницы. Я не смог найти минималистичный модуль вкладок с простой html разметкой – поэтому решил написать свой.

Демо, Исходный код на Github

HTML разметка


<div class="tabs">
	<div class="tabs__toggle tabs__toggle_active">Вкладка 1</div>
	<div class="tabs__toggle">Вкладка 2</div>
	<div class="tabs__tab">
		Содержимое первой вкладки
	</div>
	<div class="tabs__tab">
		Содержимое второй вкладки
	</div>
</div>

Если на одной странице нужно разместить несколько групп вкладок нужно просто разделить их в разные блоки '.tabs'. Расположение внутренних блоков влияет только на порядок их вывода. Вкладке по умолчанию следует добавить класс 'tabs__toggle_active'.
Читать дальше →
Total votes 23: ↑16 and ↓7 +9
Comments 13

Публикация iFrame / HTML5 игры во ВКонтакте. Основы

Reading time 7 min
Views 23K
Сразу давайте обозначимся: тема API ВК тут рассматриваться не будет, ее я затрону в будущих материалах, так как она довольно обширна и представляет хорошие возможности. В этой статье будет самая основная часть: написание игры и публикация ее в социальной сети, как запускаемое приложение.
Читать дальше →
Total votes 18: ↑14 and ↓4 +10
Comments 12

Разработка HTML5 игры под Android с нуля и до релиза

Reading time 8 min
Views 63K

Вместо вступления


Потратив несколько суток подряд (без перерыва на сон) на изучение поддержки HTML5 всеми любимыми Android-гаджетами, решил, что данной теме стоит уделить внимание. В статье постараюсь раскрыть по шагам все этапы (конечно же базовые/ключевые/основные) создания HTML5 Игрового приложения для Android от идеи до релиза самого APK файла. Возможно, ничего нового я и не открою маститым разработчикам, но для новичков постараюсь описать все как можно проще, со скриншотами и пояснениями.

image

Желающих узнать подробнее приглашаю под кат.
Читать дальше →
Total votes 37: ↑24 and ↓13 +11
Comments 21

Взломан сайт AshleyMadison.com

Reading time 2 min
Views 32K
image

Сайт любителей адьюльтера AshleyMadison.com был взломан хакером или группой хакеров, именующих себя The Impact Team. В сеть утекли не только данные порядка 37-40 миллионов клиентов (в основном из США и Канады), но и финансовая, и внутрення информация. Исполнительный директор компании Avid Life Media (ALM) Ноель Бидерман (Noel Biderman), которая управляет данным сайтом, в воскресенье вечером подтвердил ресурсу KrebsOnSecurity взлом, заявив, что его компания в срочном порядке работает над тем, что бы убрать компрометирующую информацию из свободного доступа.
Читать дальше →
Total votes 34: ↑23 and ↓11 +12
Comments 21

12 малоизвестных фактов о CSS (продолжение)

Reading time 12 min
Views 58K
Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?


Автор иллюстрации SitePoint/Natalia Balska.

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

Примечание переводчика
0. Да, я видел опубликованный пару часов назад перевод этой же статьи. Но мне совесть не позволит удалить многодневный труд из-за опоздания на пару часов :) в общем, на ваш суд.

1. Оригинальная статья изобилует рабочими демонстрациями с CodePen. Хабр, к сожалению, не поддерживает вставки с подобных ресурсов, а заменять рабочие динамические примеры статичными картинками, думаю, не имеет смысла. Поэтому статья получилась немного «лысой» простыней, но, я надеюсь, заинтересованные читатели будут открывать недостающие примеры по ссылкам в новом окне.

2. Хотя я имею непосредственное отношение к верстке, перевод получился большим и не таким простым, как показался поначалу. Замечания по ошибкам, опечаткам, терминологии и т.п. просьба присылать личным сообщением в хабрапочту.
Читать дальше →
Total votes 56: ↑51 and ↓5 +46
Comments 13

10 роковых ошибок юзабилити интернет-магазинов и кое-что ещё

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


Читать дальше →
Total votes 28: ↑23 and ↓5 +18
Comments 8

Information

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