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

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

Когда при разработке приложений приходилось браться за CSS, это была не самая радостная часть работы. Но ее ведь не избежать, верно? Сегодня порадовать пользователя дизайном приложения настолько важно, что без CSS — никак.

Когда проект только начинается, все идет хорошо. У вас всего пару селекторов: .title, input, #app — проще простого.

Но постепенно приложение разрастается, и заглядывать в CSS становится страшновато: во всех этих селекторах разобраться уже не так просто. Вы начинаете писать что-то вроде div#app .list li.item a, какие-то куски кода повторяются снова и снова, а всю свою писанину сваливаете в конец файла: вам уже плевать, потому что CSS — отстой. Итог — 500 строк CSS-кода, поддерживать который невозможно.


Это я, когда сражаюсь с CSS

Переведено в Alconost

Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.

Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS.



Автор материала, перевод которого мы предлагаем сегодня вашему вниманию, говорит, что он и сам не любил ту часть веб-разработки, которая имеет отношение к CSS. Но от этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «пользовательским опытом», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.

Привет, Хабр! Совсем недавно мы кратко рассказывали о Natural Language Interfaces (Естественно-Языковых Интерфейсах). Ну а сегодня у нас не кратко. Под катом вы найдете полноценный рассказ о создании NL2API для Web-API. Наши коллеги из подразделения Research опробовали уникальный подход к сбору обучающих данных для фреймворка. Присоединяйтесь!

В январе Stack Overflow провели ежегодный опрос, в котором приняли участие 100 тыс. разработчиков из 183 стран. В этом году Python вновь приблизился к вершине рейтинга популярных языков: в прошлом году он оставил позади PHP, в этом ― обошёл C#.

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

В Voximplant мы используем WebRTC с момента ее появления: сначала как альтернативу Flash для голосовых и видеозвонков, а затем как полную замену. Технология прошла долгий и болезненный путь развития, только недавно ее стали поддерживать все основные браузеры, есть сложности с передачей экрана, нескольких видеопотоков, а иногда браузер падает просто если выключить и включить видеопоток. Накопленный опыт позволяет переводить для Хабра интересные статьи, и сегодня мы передаем слово Ли Сильвестру из Xirsys, который расскажет про отладку (видео)звонков в Chrome, Firefox, Safari и Edge. Отлаживать WebRTC непросто, у нас даже есть специальные инструкции по снятию логов в популярных браузерах. А что есть у Ли – вы узнаете под катом (спойлер: много всего, включая WireShark).

В последнее время можно наблюдать рост популярности языка программирования Python. Он используется в DevOps, в анализе данных, в веб-разработке, в сфере безопасности и в других областях. Но вот скорость… Здесь этому языку похвастаться нечем. Автор материала, перевод которого мы сегодня публикуем, решил выяснить причины медлительности Python и найти средства его ускорения.

Привет, Хабр! Представляю вашему вниманию перевод статьи «Learn Render Props by Example».



Честно говоря, раньше я не представлял ситуаций, в которых можно применить React render props, пока не увидел практический пример

25 июля вышел Angular 6.1. Данный минорный релиз фреймворка можно рассматривать как замену Angular 6.0, включающую в себя некоторые новшества и исправления ошибок. Этот материал, перевод заметки из блога Angular, посвящён основным новым возможностям Angular 6.1.

«Подсказки» помогают быстро и без ошибок заполнить поля ввода на сайтах и в CRM.

Данные для подсказок мы берем из разных справочников, раньше их было всего пять: ФИО, емейлы, почтовые адреса, реквизиты компаний и банков. С самого первого релиза нас просили добавить в «Подсказки» то один справочник, то другой. Мы бы и рады были, да не могли. Зато теперь можем!

С июля «Подсказки» понимают любые датасеты в формате CSV: марки автомобилей, валюты, торговые точки, хоть имена близких.

Теперь пользователи быстро и без ошибок вводят что угодно.

Во многих фронтенд-фреймворках, написанных на JavaScript (например, в Angular, React и Vue) имеются собственные системы реактивности. Понимание особенностей работы этих систем пригодится любому разработчику, поможет ему более эффективно использовать современные JS-фреймворки.



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

Всем привет, на связи Алексей Приставко, директор по веб-проектам DataLine.
Ежегодно в последних числах ноября проходит Черная пятница, самая масштабная акция в мире e-commerce. Это пора рекордных скидок, магазины открываются чуть ли не в полночь, а сайты, участвующие в акции, падают, не выдерживая резко возросшего потока трафика.

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

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

Это первая часть статьи, в которой будет много скучной, но конкретной практической информации по созданию компонентов в Figma, а также нюансы, подводные камни и реалии создания проектов с ограниченным бюджетом в провинциальной среде =)

Вдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт»), я захотел его попробовать. И, для начала, решил написать небольшой компонентик с кнопками из Materialize.

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

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

Всем привет, меня зовут Семен Левенсон, я работаю teamlead’ом на проекте «Поток» от Rambler Group и хочу рассказать о нашем опыте использования Apollo.

Объясню, что такое «Поток». Это автоматизированный сервис для предпринимателей, позволяющий привлекать клиентов из Интернета в бизнес, не вовлекаясь в рекламу, и быстро создавать простые сайты, не являясь экспертом в верстке.

Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.

То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это — далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?

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

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

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

История о подкастах

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

И вот вы решаете нанять людей, которые сделают для вас этот сайт. Вы пишете для них абсолютно чёткие требования:

• Быстрая загрузка сайта в Северной Америке
• Поддержка загрузки прошлых выпусков подкастов и трансляции в реальном времени текущих
• Трансляция не должна падать или замирать в течении первых 15 минут для 99.99% пользователей. Желательно вообще никогда, но хотя бы так.
• Интеграция с Google Adwords (а в будущем, возможно, и с аналогами)
• Интеграция с трансляциями Facebook, поскольку там вы проводите свои передачи. Если можно создать альтернативное решение, которое будет позволять стримить более удобно — ещё лучше.

Вы даёте эти требования разработчикам и, возможно, немного общаетесь с ними. Проходит 2 месяца. Они показывают вам демо и вы покрываетесь красными пятнами. Становится понятно, что вы только что выбросили в пропасть 15 000 $. То, что вам показали, совершенно неприемлемо ни с какой стороны, просто куча мусора. Вы хотите назад свои деньги, но поезд уже ушел.

Мы с братом, пара 3D художников, этакие парни с крутыми прическами и в прикольных очках. Практически близнецы с абсолютно одинаковыми лицами, но диаметрально разными характерами. Однако, увлечение у нас одно на двоих — воплощать в виртуале то, что есть в реале. И надо сказать, это вполне удается, ибо один неплохой моделлер, а второй аниматор от Бога.

Вот только инструментарий у нас различается и ого-го как! Я страстно и нежно люблю Blender, а мой братело обожает Макса. Холивар не утихает никогда, но нам удается создавать прикольные вещи, используя свои столь разные 3D редакторы. Однако, тема не об этом.

Все началось с портфолио… Со создания чёртового портфолио, после которого мы с братом разругались вдрызг, синхронно навесив друг-другу «фонари». Вы задумывались когда-нибудь о переносе 3D работ куда-нибудь в интернет, хоть в свой блог?

Окей, читатель, ты попал по адресу, ибо таких неудачников еще поискать нужно, хотя финал все-же получился обнадеживающий.