Веб-разработка *

Полгода назад Google представила обновленную версию своего почтового сервиса. Несмотря на то что многие пользователи были недовольны редизайном, в том числе и на Хабре, это теперь основной интерфейс для пользователей.

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

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

Создание нового децентрализованного интернета долгие годы волнует умы специалистов. Профессор Тим Бернерс-Ли пошел еще дальше и нашел способ редецентрализовать интернет. Что это значит, как с этим связан проект Solid и что такое «поды»? Читайте в нашем переводе статьи Arnav Bansal, опубликованной на сайте freeCodeCamp.

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



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

В статье рассказывается как транслировать запросы GraphQL в OData и выполнять их написав
совсем немного кода на C#.

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

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



Ниже изложено то, чему руководства по CSS меня не научили.

Недавно мы опубликовали серию материалов, представляющую собой перевод руководства по Node.js. В первой публикации мы интересовались мнением аудитории о целесообразности перевода этого руководства и говорили, что планируется подготовить его PDF-версию.



PDF-версия документа состоит более чем из 120 страниц, содержит оглавление, немного картинок и всё необходимое форматирование. Просто закидывайте файлик в читалку и готово. Или в папочку с литературой. Или… решать вам.

Скачать PDF-версию [ 1.8 Мб ]

Сегодня мы хотим представить вашему вниманию новое руководство того же автора, посвящённое JavaScript.


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

Поддержка огромной кодовой базы с одновременным обеспечением высокой производительности большого числа разработчиков — это серьезный вызов. В течение последних 5 лет в Яндексе идет разработка особой системы непрерывной интеграции. В данной статье мы расскажем про масштаб кодовой базы Яндекса, про перенос разработки в единый репозиторий с trunk-based подходом к разработке, про то, какие задачи должна решать система непрерывной интеграции для эффективной работы в таких условиях.

Много лет назад в Яндексе никаких особенных правил в разработке сервисов не было: каждый отдел мог использовать любые языки, любые технологии, любые системы деплоя. И как показала практика, такая свобода не всегда помогала двигаться вперед быстрее. В то время для решения одних и тех же задач часто существовало несколько собственных или open-source разработок. С ростом компании такая экосистема работала всё хуже. При этом мы хотели остаться одним большим Яндексом, а не разделиться на множество независимых компаний, потому что это дает массу преимуществ: много людей делают одни похожие задачи, результаты их труда можно использовать повторно. Начиная от разнообразных структур данных, типа распределённых хеш-таблиц и lock-free очередей, и заканчивая множеством разного специализированного кода, который мы написали за 20 лет.

Одной из самых заметных новшеств современного JavaScript стало появление стрелочных функций (arrow function), которые иногда называют «толстыми» стрелочными функциями (fat arrow function). При объявлении таких функций используют особую комбинацию символов — =>.

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

Иногда эти и другие преимущества ведут к тому, что стрелочному синтаксису отдают безусловное предпочтение перед другими способами объявления функций. Например, популярная конфигурации eslint от Airbnb принуждает к тому, чтобы всегда, когда создают анонимную функцию, такая функция была бы стрелочной.

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

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

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

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

Конференция DartUP, в первый день зимы, в Питере, в арт-пространстве “Ткачи”. Вход бесплатный, регистрация обязательна.

Компания Zfort Group приняла решение не продлевать корпоративную подписку на Хабре.
Но есть и хорошие новости:

Мы бы хотели анонсировать запуск обновленного сайта zfort.com.ua, кратко рассказать о некоторых технических особенностях создания сайта, а также сообщить о решении перенести публикацию дайджестов с Хабра в блог нового сайта. В блоге нашего нового сайта мы продолжим публиковать дайджесты, статьи и анонсировать профессиональные митапы. На все обновления и публикации можно подписаться, чтобы быть в курсе и ничего не пропустить.

Краткая версия дайджестов также останется и на Хабре, но будет публиковаться не в корпоративном блоге Zfort Group, а с аккаунта alexzfort.

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

А теперь подробнее о деталях создания обновленного сайта zfort.com.ua

Недавно мы публиковали материал о функциях высшего порядка в JavaScript, направленный на тех, кто изучает JavaScript. Статья, перевод которой мы публикуем сегодня, предназначена для начинающих React-разработчиков. Она посвящена компонентам высшего порядка (Higher-Order Components, HOC).

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

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

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

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



В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.

В далеком 2017 году, возникла идея разработать сервис мониторинга цен конкурентов. Его отличительной фишкой от остальных подобных сервисов должна была стать функция ежесуточного автоматического сопоставления товаров. Видимо из — за почти полного отсутствия информации о том, как это делать, сервисы по мониторингу цен предлагали лишь возможность ручного сопоставления силами самих клиентов, либо операторов сервиса с ценой от 0.2 до 1 рубля за факт сопоставления. Реальная же ситуация с, например, 10 сайтами и 20 000 товаров на каждом, неминуемо требует автоматизации процесса, так как ручное сопоставление уже слишком долгое и дорогое.

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Когда заказчик впервые обозначил идею своего проекта — Роснацздрав, она показалась очень интересной. Собственно, так оно и было.

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

От переводчика:
Я не являюсь ни профессиональным программистом ни профессиональным переводчиком, но появление описанного в статье инструмента от создателя популярной библиотеки D3.js произвело на меня сильное впечатление.

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

Знакомьтесь, d3.express, интегрированная исследовательская среда.
(с 31 января 2018г d3.express зовется Observable и живет на beta.observablehq.com)

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

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

Предназначение инструмента визуализации — построение визуализаций. Но в чем же цель визуализации? Слово Бену Шнейдерману(Per Ben Shneiderman):

«Результат визуализации — это

Если вы занимаетесь изучением JavaScript, то вы, наверняка, сталкивались с понятием «функция высшего порядка» (Higher-Order Function). Может показаться, что это что-то очень сложное, но, на самом деле, это не так.

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



Для того, чтобы в полной мере понять эту концепцию, вам сначала надо разобраться с понятием функционального программирования (Functional Programming) и с тем, что такое функции первого класса (First-Class Functions).

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