Все потоки
Поиск
Написать публикацию
Обновить
365

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

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

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

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Время на прочтение17 мин
Количество просмотров71K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


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

Кажется, мы стали забывать основы фронтенда

Время на прочтение5 мин
Количество просмотров46K

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

В этой статье я перескажу истории с некоторыми техническими деталями и порассуждаю, что делать дальше.

Читать далее

Шпаргалка по метрикам производительности cURL: как измерить задержку сервера

Время на прочтение8 мин
Количество просмотров25K


Эту шпаргалку я написал в первую очередь, потому что был несколько озадачен, когда в течение более, чем 10 минут пытался найти в Google значение time_pretransfer. Попробуйте сами, я подожду. Это настоящая загадка!
Читать дальше →

Экспериментируем с шаблонами литералов в TypeScript: как покрыть типами DSL

Время на прочтение8 мин
Количество просмотров7.9K

Привет, я Максим, в Selectel я занимаюсь фронтенд-разработкой «Облачной платформы». В этом проекте уже не один год. Вместе с развитием функциональности облака усложняется код, который я пишу. Поиск эффективных решений рефакторинга кода — одна из задач, которую я постоянно держу в голове. Поэтому метапрограммирование рассматриваю как одну из возможностей, доступных для улучшения взаимодействия с кодом.

Иногда проверка различных идей носит чисто экспериментальный характер. Так, на волне нового релиза TypeScript я решил попробовать типизировать DSL запросов к MongoDB (синтаксис запросов довольно прост, но при этом функционален и широко известен).

Под катом — результат. Я бы написал «не пытайтесь повторить это в своем рабочем проекте», но вдруг какие-то мысли и способы применения TypeScript окажутся полезными и вам.
Читать дальше →

Бывший сотрудник Яндекса выпустил бесплатный поисковик с блек… листами, но без рекламы

Время на прочтение6 мин
Количество просмотров66K

Здравствуйте, меня зовут Дмитрий Карловский и я крайне опечален качеством поиска современных поисковиков.

Например, обсуждали мы как-то в $mol-чате стоит ли делать "человеко-понятную" псевдостатику в урлах вида /snjat-dvushku/s-remontom/v-vihino для SEO, или всё же сеошники - шарлатаны, гадающие на поисковой гуще. Решили проверить кто там у нас в топе по запросу "квартира купить однокомнатная горьковская" и получили такой результат:

Дыбенко, Лесная, Жопа Мира, всё, что угодно, только не то, что спрашивали. Первые 4 результата - нерелевантный мусор. А потом сервис самого же Яндекса. Как так получилось, что в 2к21, в эпоху машинного обучения и GPT-3, у нас получился поиск хуже, чем на заре интернета?

Отгадка

Зачем делать копию Facebook под Internet Explorer 6 в 2021 году?

Время на прочтение15 мин
Количество просмотров28K

В августе этого года Microsoft прекращает поддержку Internet Explorer 11, тем самым заканчивает эпоху браузеров, которые несли в себе одну очень важную миссию… скачивали нормальный браузер знакомили людей с когда-то прекрасным местом как интернет.

И, в связи с этим, меня посетила мысль — «А не сделать ли мне современный сайт так, как делали их тогда?». Отличный повод вспомнить как начиналась моя дорога в разработку и поностальгировать за теми годами. Вечер свободный, каких-то сложностей с вёрсткой под Internet Explorer я уже не припомню. Так-то почти 15 лет прошло. Думаю, справлюсь за час сильно не напрягаясь…
Продолжить чтение...

Lingtrain Aligner. Написал приложение для создания параллельных книг, которое вас удивит

Время на прочтение6 мин
Количество просмотров24K

title


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


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


Установка


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


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


docker pull lingtrain/aligner:v4
docker run -v C:\app\data:/app/data -v C:\app\img:/app/static/img -p 80:80 lingtrain/aligner:v4

C:\app\data и C:\app\img — это папки на вашем компьютере.


Контейнер скачается с репозитория Docker Hub и запустится на 80-м порту. Откроем приложение в вашем любимом браузере по адресу localhost.


Lingtrain app 1


Сделаем три шага: загрузка, выравнивание, генерация.

Смотреть демо

Самый популярный HTML-редактор в выдаче Google — это афера с поисковой оптимизацией

Время на прочтение4 мин
Количество просмотров39K
Это история о том, как я случайно обнаружил масштабную аферу с поисковой оптимизацией.

Резюме


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

Инструменты, которые, кажется, делают это, созданы одними и теми же людьми:

  • html-cleaner.com
  • html-online.com/editor/
  • html5-editor.net
  • htmlg.com
  • … и другие

Жертвами этого стали сайты BoingBoing, официальная футбольная ассоциация Германии и Kaspersky. Забавно, что «хакнутая» статья Касперского посвящена «защите от хакеров».

Обнаружение подозрительного


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

Все началось с загадки продукта, который я создаю. Продукт представляет собой онлайн-табло, и, несмотря на наличие (что я думаю) надежной стратегии SEO, мне не удалось завоевать желанное первое место на странице результатов поисковой системы. Последние 12 месяцев меня всегда опережал участник под названием «Scorecounter».

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

Зачем нужен static при объявлении анонимных функций?

Время на прочтение2 мин
Количество просмотров22K

Буквально на днях пришел вопрос от одного из подписчиков касательно одного из постов моего telegram канала. Его смутил вот такой кусок кода:

usort($firstArray, static function($first, $second) { return $first <=> $second;
});

Вопрос звучал так:

"Зачем делать callback’и в функции сортировки (usort), статическими?"

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

Читать далее

Будущее веба: станет ли рендеринг в <canvas> заменой DOM?

Время на прочтение7 мин
Количество просмотров26K
В последнее время было немало горестных рассуждений о последствиях решения Google использовать HTML-элемент <canvas> для рендеринга всего, что видно на экране при работе с Google Docs. И то, что это многих беспокоит, вполне понятно. Когда-то веб был задуман как система для работы с тщательно структурированной информацией, полной осмысленных метаданных и рассчитанной на совместное её использование многими людьми. Но, вместо этого, тот веб, который мы видим сегодня, представляет собой довольно сложно и запутанно устроенные приложения, которые работают в браузерных «песочницах».


Решение Google, которое заключается в том, чтобы перейти от вывода на страницы HTML-элементов к рисованию пикселей на <canvas>, нельзя назвать чем-то таким, чего раньше никто не видел и не пробовал. Другие передовые веб-приложения уже вышли далеко за пределы традиционных схем работы с HTML-элементами. Так, в Google Maps вывод данных на <canvas> используется уже многие годы. В VS Code для отрисовки идеального интерфейса терминала тоже используется <canvas>. А в подающем надежды наборе инструментов Google Flutter, который позволяет создавать кросс-платформенные интерфейсы, в веб-браузере, по умолчанию, используется рендеринг с использованием <canvas>.

Но в этот раз происходящее вызывает несколько иные ощущения. А именно, появляется такое чувство, что рендеринг в <canvas> и другие современные технологии, вроде WebAssembly, увели нас за точку невозврата. Все привыкли к схеме работы, когда страница загружает, в виде обычного текста, JavaScript-код, который выполняется, взаимодействуя с HTML-элементами, видимыми в «инструментах разработчика». Сейчас возникает такое впечатление, что это — лишь небольшой этап на пути постоянно развивающихся технологий веб-разработки.
Читать дальше →

Длинная история про то, как мы веб-разработчика на фрилансерских сайтах искали, но так и не нашли

Время на прочтение11 мин
Количество просмотров26K

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

Этот лонгрид - о фрилансерах в частности, и немного о веб-разработке в целом, от лица заказчика. Я прекрасно понимаю, что большинство завсегдатаев Хабра - исполнители, а заказчикам тут периодически прилетает. И все же рискну высказаться.

Надеюсь, будет весело

UML умер, а никто и не заметил?

Время на прочтение4 мин
Количество просмотров77K

UML, нам будет тебя не хватать

Unified Modelling Language (UML), разработанный Rational Software и принятый в качестве стандарта Object Management Group (OMG) в 1997 году, призван был стандартизировать множество различных типов графических нотаций, принятых в отрасли разработки ПО.

Моя история отношений с UML началась почти десяток лет назад, когда я стал евангелистом этого языка как моста между ИТ и бизнесом. Я никогда не был полностью убеждён в ценности UML как нотации для моделирования конкретных программных продуктов; моя цель заключалась в использовании UML для описания требуемых структурных и поведенческих свойств, ожидаемых от проектируемой системы.
Читать дальше →

Как мы делали планшет

Время на прочтение10 мин
Количество просмотров18K

В 2018-м в Skyeng появились онлайн-занятия математикой. Так мы столкнулись с тем, что наша платформа, адаптированная под устный английский, не очень подходила для письменных занятий с дробями, формулами и геометрическими фигурами.

Читать далее

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

PHP Дайджест № 204 (17 – 31 мая 2021)

Время на прочтение4 мин
Количество просмотров11K
Фото: Christian Münch.

В эти две недели core команда PHP активно обсуждала предложение по Partial function Application и в качестве альтернативы Никита Попов предложил более простой синтаксис для получения ссылки на любые функции. Также в уже принятые в PHP 8.1 енумы предлагается добавить статические свойства.

Symfony 6 будет требовать PHP 8.0, а вышедшая Doctrine 2.9 поддерживает указание метаданных в атрибутах вместо PHPDoc.

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

Приятного чтения!
Читать дальше →

Спаси котика из-под рояля

Время на прочтение2 мин
Количество просмотров20K

Вашему другу нужна помощь. Точнее, не вашему, а гипотетическому. Или даже не другу, а котику… хотя котик же не настоящий… Чёрт, короче! Наверняка у многих из вас в жизни была такая бывшая, расставание с которой было как закрытие ипотеки: «Господи, ну наконец-то!». И вот всё наконец-то закончилось, осталось только забрать свой ноутбук с очень важным NFT-токеном гифки с танцующим котиком. Этот котик дорог вам как память и как произведение цифрового искусства. Но ипотека теперь уже бывшая устроила в отместку целое шоу: протерла ноутбук от пыли, приготовила всё, чтобы залить его жидким азотом и подвесила над ним… РОЯЛЬ.
Спасти котика

Сравнение производительности CSS и CSS-in-JS в реальном мире

Время на прочтение7 мин
Количество просмотров23K
Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →

Я выпустил Grafar — JS-библиотеку для визуализации

Время на прочтение3 мин
Количество просмотров13K

После пяти лет в столе я готов представить свою библиотеку для визуализации — grafar. У нас есть: 3D, реактивные вычисления и самое простое АПИ для построения математических графиков прямо в браузере. В статье рассказываю, что я сделал и как этим пользоваться.

Читать далее

Вышел Bootstrap 5: оцениваем 7 главных нововведений

Время на прочтение4 мин
Количество просмотров47K

Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.

Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.

CORS для чайников: история возникновения, как устроен и оптимальные методы работы

Время на прочтение17 мин
Количество просмотров515K


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

Если вы давно хотели разобраться в CORS и вас достали постоянные ошибки, добро пожаловать под кат.

Ошибка в консоли вашего браузера


No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/

Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.


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

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

Но давайте-ка пойдем к истокам…
Читать дальше →

Ретроностальгия: почему мой веб-сайт выглядит как Windows 9x

Время на прочтение3 мин
Количество просмотров19K
Уже долгое время я хотел обновить свой веб-сайт, но я не дизайнер, поэтому знал, что мои попытки усовершенствования уже имеющегося выльются в сумбурную мешанину.


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

Что касается дизайна… то почему бы не отдать дань уважения одной из самых значимых операционных систем моей юности: Windows 9x. И почему бы ради забавы не сделать его таким, чтобы он умещался на дискете?

Вклад авторов