Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.

В апреле этого года мы перезапустили tinkoff.ru. Банк превратился в финансовый супермакет. Теперь не только клиент банка, но и любой посетитель оплатит мобильный, проверит налоги и оформит ипотеку — всё на одной платформе. В этой статье я поделюсь опытом и технологическими решениями, к которым мы пришли за год разработки.

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

Готов поспорить, что немногие.

Дело осложняет полное отсутствие документации от Apple по работе этой функции. Но тут есть один момент. Функция сканирования банковских карт является подмножеством автозаполнения — браузерного функционала, давно игнорируемого веб-разработчиками. Понятно, почему они не уделяли ему должного внимания: когда регулярно заполняешь форму тестовыми данными, автозаполнение обычно мешает. Но для наших пользователей это важная функция. В Google выяснили, что при использовании автозаполнения пользователи на 30% быстрее заполняют формы. Так что давайте изучим работу автозаполнения, разберёмся, как создавать формы, поддерживающие кросс-браузерное автозаполнение, и воспользуемся преимуществами новых возможностей наподобие сканирования банковских карт.

Введение

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

• Использование React предполагает, что View нашего Web-приложения разбито на компоненты, и каждый из них, так или иначе, отвечает за собственное отображение и функциональность.

  
  

• Подразумевается, что будут использованы современные инструменты разработки вроде babel, webpack, browserify, gulp, post- pre- css-процессоры.

Пример очень неудачного опыта, пояснение в разделе “о технике безопасности”

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

Все CSS-селекторы живут в глобальной области видимости.

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

Абсолютно каждый селектор потенциально может вступить в борьбу с другим селектором или стилизовать «посторонний» элемент. В этой «глобальной» борьбе селектор может даже полностью проиграть, в итоге не применив к странице ни одного из своих правил.

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

Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.

Сегодня ко мне обратилась знакомая с просьбой помочь купить б/у Macbook Pro. Я сразу предупредил, что квалификация у меня близка к нулю, но чем могу — помогу. С PC плотно не работаю уже много лет, а Mac владею на верхне-чайниковом уровне. Беглый поиск по фразе «как проверить macbook pro» сразу же привел к исчерпывающей публикации rule на заданную тему: «Осторожно при покупке MacBook. Высокотехнологический способ мошенничества в оффлайне» geektimes.ru/post/157969 Но неопытноcть меня все же подвела.

Объявление:


То есть в объявлении предлагается топовая модель MacBook Pro «Core i7» 2.9 13" Mid-2012 (MD102). Реально это оказался MacBook Pro «Core 2 Duo» 2.66 13" Mid-2010 (MC375) — 4 GB RAM, 500 GB HDD. Блок питания был новый.

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

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

У каждого есть возможность воспользоваться специально созданной для обучения школьников средой программирования Scratch, которую разрабатывают специалисты одного из самых престижных технических учебных заведений США и мира — Массачусетского технологического института. Или игрой Minecraft, за которую Microsoft год назад заплатила $2,5 млрд и с помощью которой, в том числе, планирует обучать детей программированию. Или обучающими играми, которые создают энтузиасты и добровольцы во всём мире.

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

Самый лучший способ оценить, хорошо ли мы протестировали продукт – проанализировать пропущенные дефекты. Те, с которыми столкнулись наши пользователи, внедренцы, бизнес. По ним можно многое оценить: что мы проверили недостаточно тщательно, каким областям продукта стоит уделить больше внимания, какой вообще процент пропусков и какова динамика его изменений. С этой метрикой (пожалуй, самой распространённой в тестировании) всё хорошо, но… Когда мы выпустили продукт, и узнали о пропущенных ошибках, может быть уже слишком поздно: на “хабре” появилась про нас гневная статья, конкуренты стремительно распространяют критику, клиенты потеряли к нам доверие, руководство недовольно.

Чтобы такого не происходило, мы обычно заранее, до релиза, стараемся оценивать качество тестирования: насколько хорошо и тщательно мы проверяем продукт? Каким областям не хватает внимания, где основные риски, какой прогресс? И чтобы ответить на все эти вопросы, мы оцениваем тестовое покрытие.

Вот уже как неделю английская версия the art of command line висит в секции trending на Github. Для себя я нашел этот материал невероятно полезным и решил помочь сообществу его переводом на русский язык. В переводе наверняка есть несколько недоработок, поэтому милости прошу слать пулл-реквесты мне сюда или автору оригинальной работы Joshua Levy вот сюда. (Если PR отправите мне, то я после того, как пересмотрю изменения отправлю их в мастер-бранч Джоша). Отдельное спасибо jtraub за помощь и исправление опечаток.

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



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

Стив Джобс был лучшим в мире оратором и делал самые лучшие презентации продуктов, заставляя зрителей «сидеть на краешках стульев». Фокус в том, что за каждой из таких презентаций скрывается определённая подготовка и определённые приёмы. Кармин Галло (Karmine Gallo) изучил публичные выступления Стива Джобса и его подготовку к этим выступлениям. В результате мы можем прочесть книгу, которая поможет вам готовить хорошие презентации.



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

У каждого кандидата в конце собеседованию рекрутер обычно спрашивает, есть ли вопросы. Часто люди теряются и не находят, что спросить. И лишь по прошествии некоторого времени (часто, когда человек уже работает в компании) сами собой всплывают вопросы, о которых нужно было поинтересоваться заранее, а не брать кота в мешке и удивляться «Как я сюда попал? Куда я смотрел? Почему я об этом не подумал?». Это так называемый «эффект лестницы». Я подготовил шпаргалку, что ты, %habrauser%, не растерялся.

Общее

1. Рабочий график и можно ли его двигать?
Я люблю поспать. Но на моей прошлой работе «рабочее утро» начиналось в 7:30. Мало того, что я довольно часто не мог прийти к этому времени, я еще пол дня занимался тем, что пытался привести себя в рабочую форму. Где то до 10:00. С 10:30 до 11:30 я усердно работал. Потом был обед. А потом мне хотелось спать, а не работать, т.к. я не высыпался еще с утра. Надо ли говорить, что вместо 8 часов, на которые меня нанял работодатель, я работал в «потоке» только часа 3-4. Так что для себя нужно решить вопрос – когда я наиболее трудоспособен? И обговорить рабочий график с руководством. И еще один нюанс. Попробуйте закрепить обговоренный график в трудовом договоре или контракте (далее ТД), если работодатель идет на персональный рабочий график для Вас. Никаких устных договоренностей. Иначе Вам начнут крутить руки уже в процессе работы (как это было со мной).

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

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

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

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

И еще одно предупреждение: в данном уроке будут использоваться следующие технологии для непосредственного написания примера:

• jade — html препроцессор;
• less — css препроцессор;
• coffeescript — язык программирования, компилируемый в javascript.

Видео, демонстрирующее приложение, полученное в ходе урока



И кому все еще интересно, добро пожаловать под кат.

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

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

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

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

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

Как заработать миллион за день, стать искусным оратором за неделю, похудеть на 100 кг за 2 дня, стать успешным в тысяча ста начинаниях и прочая мишура регулярно засоряет наше информационное пространство. А порой так хочется взять в руки книгу, которая не просто съест кусок вашего свободного времени повествуя о неприменимых в отечественных реалиях вещах, но и подкинет хотя бы несколько полезных советов, способных оказать позитивное влияние на развитие вашей личности и вашего проекта.

Если вы хотите найти и/или поделиться хорошими книгами, добро пожаловать под кат.

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.