Обновить
256K+

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

Делаем веб лучше

426,7
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Восьмая Вебмастерская. Прямой эфир на Хабре

Время на прочтение1 мин
Охват и читатели2.3K
Сегодня в 11:00 по московскому времени стартует прошла ежегодная конференция Яндекса для владельцев сайтов, маркетологов и аналитиков. В этот раз мы не только подготовили ряд анонсов, но и сделали особый упор на взаимоотношении продукта, маркетинга и SEO. Как бизнесу начать эффективно использовать возможности оптимизатора, как вместе с ним подобрать стратегию развития продукта и маркетинговых активностей, как анализировать конкурентов и спрос, — обо всём этом вы узнаете из докладов наших спикеров.

Посмотреть Вебмастерскую можно в прямом эфире записи:

Обзор пяти HTTP-библиотек для веб-разработки

Время на прочтение3 мин
Охват и читатели37K
Одна из важнейших задач, которую приходится решать программисту при разработке веб-проектов, заключается в организации обмена данными между клиентскими и серверными частями таких проектов. Это может выглядеть так: пользователь нажимает некую кнопку на странице, открытой в браузере, в ответ система выполняет запрос к серверу, после чего сервер отправляет странице запрошенные у него данные. Для того чтобы вывести такие данные, на странице, без её перезагрузки, производится их обработка, после чего страница обновляется и пользователь получает то, что ему нужно.



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

Материал, перевод которого мы сегодня публикуем, посвящён анализу пяти популярных инструментов для работы с HTTP: Axios, Request, Superagent, Fetch и Supertest.
Читать дальше →

Как работают браузеры — введение в безопасность веб-приложений

Время на прочтение9 мин
Охват и читатели70K
Давайте начнем серию статей по безопасности веб-приложений с объяснением того, что делают браузеры и как именно они это делают. Поскольку большинство ваших клиентов будут взаимодействовать с вашим веб-приложением через браузеры, необходимо понимать основы функционирования этих замечательных программ.

image
Chrome и lynx

Браузер — это движок рендеринга. Его работа заключается в том, чтобы загрузить веб-страницу и представить её в понятном для человека виде.

Хоть это и почти преступное упрощение, но пока это все, что нам нужно знать на данный момент.

  • Пользователь вводит адрес в строке ввода браузера.
  • Браузер загружает «документ» по этому URL и отображает его.
Читать дальше →

Прототипы: как создать успешный продукт и сэкономить

Время на прочтение5 мин
Охват и читатели16K


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

Недавно, прогуливаясь по Москве, вспомнил о стартапе и решил проверить его лично. Но уже через 15 минут понял, что шансов взять самокат в аренду нет, а рейтинг 1.5 в AppStore полностью оправдан и подтверждает, что сложности не только у меня.

На запуск стартапа такого масштаба, вероятно, было потрачено довольно много денег. И рейтинг 1.5 как бы намекает, что тратить придется еще.

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

Из статьи вы узнаете:

  • Что такое прототипы
  • Как сделать первоклассный прототип
  • Как отличить хороший прототип от плохого
  • Как сэкономить бизнесу $25 000
Читать дальше →

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Время на прочтение14 мин
Охват и читатели200K
Представляем вашему вниманию первые 5 занятий учебного курса по React для начинающих. Оригинал курса на английском, состоящий из 48 уроков, опубликован на платформе Scrimba.com. Возможности этой платформы позволяют, слушая ведущего, иногда ставить воспроизведение на паузу и самостоятельно, в том же окне, в котором ведётся демонстрация, экспериментировать с кодом. Курс показался нам интересным, мы решили перевести его на русский и преобразовать в формат традиционных публикаций.



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

Еще список проектов, на чем потренироваться

Время на прочтение3 мин
Охват и читатели28K
«Мастер совершает больше ошибок, чем новичок — попыток»

Прошлый список тренировочных проектов набрал 50к прочтений и 600 добавлений в избранное. Вот еще один список интересных проектов для практики, для тех кто хочет добавки.

1. Текстовый редактор


image

Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.

В какой-то момент каждый использовал текстовый редактор. Так почему бы не создать его самостоятельно?
Читать дальше →

Winter frontend meetup в OZON

Время на прочтение2 мин
Охват и читатели3.4K
image

Привет, Хабр! 13 декабря встречаемся в офисе OZON, чтобы поговорить о фронтенде (с перерывами на пиццу и пиво, конечно). Разработчики из OZON, Яндекса и Альфа-Банка расскажут о том, как объединить зоопарк систем, провести рефакторинг, переехать на Typescript и внести свой вклад в развитие комьюнити.
Читать дальше →

Перед вами — React Modern Web App

Время на прочтение21 мин
Охват и читатели38K

Перед тем как начать собирать с нуля Modern Web App нужно разобраться, что такое — Современное Веб-Приложение?


Modern Web App (MWA) — приложение, придерживающееся всех современных веб-стандартов. Среди них Progressive Web App — возможность скачивать мобильную браузерную версию на телефон и использовать как полноценное приложение. Так же это возможность листать сайт в оффлайне как с мобильного устройства, так и с компьютера; современный материальный дизайн; идеальная поисковая оптимизация; и естественно — высокая скорость загрузки.



Вот что будет в нашем MWA (советую использовать эту навигацию по статье):



Люди на Хабре деловые, поэтому сразу ловите ссылку на GitHub репозиторий, архив с каждой из стадий разработки и демо. Статья рассчитана на разработчиков, знакомых с node.js и react. Вся необходимая теория представлена в необходимом объеме. Расширяйте кругозор, переходя по ссылкам.


Приступим!

Читать дальше →

Все, что вы хотели знать об обработке запросов, но стеснялись спросить

Время на прочтение12 мин
Охват и читатели21K

Что такое сетевой сервис? Это программа, которая принимает входящие запросы по сети и обрабатывает их, возможно, возвращая ответы.


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


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


В статье рассмотрены такие подходы как пул процессов/потоков, событийно-ориентированная обработка, half sync/half async паттерн и многие другие. Приводятся многочисленные примеры, рассматриваются плюсы и минусы подходов, их особенности и области применения.

Читать дальше →

PHP-Дайджест № 145 (26 ноября – 10 декабря 2018)

Время на прочтение5 мин
Охват и читатели15K

Свежая подборка со ссылками на новости и материалы. В выпуске: PHP 7.3.0, Symfony 4.2, Composer 1.8.0 и другие релизы, конец поддержки PHP 5.6 и PHP 7.0, свежие предложения из PHP Internals, порция полезных инструментов, видеозаписи докладов и многое другое.
Приятного чтения!


Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №342 (3 — 9 декабря 2018)

Время на прочтение4 мин
Охват и читатели13K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

«GDPR 2.0»: чего ждать от ePrivacy Regulation

Время на прочтение4 мин
Охват и читатели6.6K
В нашем блоге мы уже рассказывали об обработке персональных данных в Беларуси, регулировании в США и Европе. Обсудим еще один европейский законопроект, который будет своеобразным дополнением к GDPR и ужесточит правила работы с cookies и ПД.

Читать дальше →

Почему у React элементов есть свойство $$typeof?

Время на прочтение4 мин
Охват и читатели12K

О механизме React по предотвращению возможности инъекции JSON для XSS, и об избегании типовых уязвимостей.

Читать дальше →

Ближайшие события

Мелкий, но вредный UI интернет-магазина. Как испортить репутацию сразу всем товарам на сайте?

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



Вы бы купили такую книгу?

Читать дальше →

Жизнь во Флаконе

Время на прочтение17 мин
Охват и читатели19K
Я работаю в коммерческой организации, но всегда считал, что бизнес должен делать что-то полезное для мира. Конечно, можно сказать, что продукты бизнеса – это и есть польза, но как-то язык не поворачивается.

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

Ну вот, сделали. Испытали на себе, убедились в полезности, выкладываем на всеобщее обозрение и всеобщее пользование. Бесплатно, разумеется. Сервис по управлению собственной жизнью.
Читать дальше →

Оптимизация Angular-приложений

Время на прочтение7 мин
Охват и читатели19K
Angular — это самый популярный фреймворк для разработки одностраничных веб-приложений, хотя это не значит, что Angular-приложения могут содержать в себе лишь одну страницу. С помощью этого фреймворка можно создавать и сайты, состоящие из десятков страниц. Последняя версия Angular, благодаря усилиям команды разработчиков и сообщества энтузиастов, хорошо оптимизирована. Однако когда речь заходит о конкретном приложении, нельзя забывать о некоторых вещах, которые влияют на его производительность.



В материале, перевод которого мы публикуем сегодня, будут раскрыты шесть направлений оптимизации Angular-приложений.
Читать дальше →

Разработка доступных интерфейсов

Время на прочтение16 мин
Охват и читатели10K
По данным Росстата 1 млн. человек имеют проблемы со зрением, начиная от астигматизма и заканчивая слепотой и с трудом могут пользоваться обычными сайтами. Попробуйте протестировать ваш ресурс на доступность: зажмурьте глаза, чтобы экран размылся и кликайте, вводите текст, переходите по страницам. Если привычные действия неудобно выполнять, то можно задуматься над доступностью.

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

О том, как быстро и эффективно разрабатывать доступные ресурсы сегодняшняя расшифровка доклада Сергея Кригера на Frontend Conf.

Как мы улучшали конверсию платежной формы

Время на прочтение11 мин
Охват и читатели7.9K
Онлайн-платежи стали чем-то настолько же привычным, как и wi-fi дома и скоростной мобильный интернет. И они продолжают эволюционировать, все больше и больше услуг можно оплатить в пару кликов или из мобильных приложений, а тут еще и автоплатежи, напоминалки, контроль расходов и многое другое.

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



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

Под катом — о конверсии, мотивации пользователей, нашем протоколе, благотворительности и open source.
Читать дальше →

Imba: JavaScript-совместимый язык для быстрой работы с DOM

Время на прочтение7 мин
Охват и читатели13K
Imba — это опенсорсный язык программирования, созданный компанией Scrimba специально для разработки веб-приложений. Он компилируется в JavaScript и способен работать внутри существующей JS-экосистемы. Речь идёт, например, о Node.js, об npm, о Webpack.

Основная сильная сторона Imba заключается в том, что этот язык позволят создавать гораздо более быстрые приложения, чем те, которые основаны на библиотеках, применяющих технологию Virtual DOM, наподобие React и Vue. Рост производительности приложений достигается за счёт того, как Imba работает с обновлениями DOM. Подробности об этом можно почитать здесь.



Автор этого материала, сооснователь проекта Scrimba, говорит, что пользуется Imba уже несколько лет. По его словам, писать на этом языке — сплошное удовольствие, так как он, в сравнении с JavaScript, отличается более чистым синтаксисом, что улучшает читабельность кода.

Этот материал представляет собой руководство по Imba для начинающих, освоение которого позволит приступить к созданию простых приложений. Сначала здесь будут раскрыты основы языка, потом будет рассмотрена разработка пользовательских интерфейсов с его помощью. Тут же будет показана настройка среды разработки для программирования на Imba.
Читать дальше →

Кратко о redux-saga каналах

Время на прочтение4 мин
Охват и читатели23K

Добрый день, дорогие друзья.


В данной статье хотел бы максимально просто и кратко описать механизм redux-saga каналов, на примерах приближенных к реальным кейсам, надеюсь у меня это вышло.


Итак, начнем.

Читать дальше →