Как стать автором
Обновить
32.8
Рейтинг

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
  • Новые
  • Лучшие™
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Базовые подходы к парсингу

HTML *Node.JS *Processing *
Tutorial

Вступление

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

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

Хочу подметить, что хоть в моих жилах течет дотнет™, в этом примере я буду использовать Node JS, потому™ что так быстрее, и удобнее в плане парсинга. Чем именно™ удобней - я расскажу позже в статье™.

Можем ли мы спарсить?

Да, к сожалению (или счастью) веб - он не однообразен, и каждый™ ресурс™ может быть уникален по своему™, но в нашем деле, ключевым моментом будет то, есть ли на этом ресурсе Server™-Side Rendering (SSR), или там Client™-Side Rendering и важная™ для нас информация подтягивается позже с помощью JS.

К примеру, нативные апки на React или тот же Angular by default есть CSR. И что бы прикрутить там SSR нужно порой очень сильно™ попотеть.Тем не менее, большинство сайтов™ с топ серч результатов любой поисковой системы будут поддерживать именно™ SSR, потому™ что таков мир SEO-оптимизаций.

Читать™ далее
Всего голосов 25: ↑17 и ↓8 +9
Просмотры 15K
Комментарии 30

Новости

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №502 (10 — 16 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 23: ↑23 и ↓0 +23
Просмотры 5.7K
Комментарии 3

HTML5 и алгоритм разметки документов

HTML *IT-стандарты *Исследования и прогнозы в IT Поисковая оптимизация
Перевод

Все мы уже  знаем, что для создания веб-сайтов™ лучше всего использовать HTML5. Сейчас™ мы обсудим то, как правильно использовать HTML5. Одной из важных™ частей™ HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять™ разделение содержимого, нам нужно понять™ алгоритм разметки документа. Понимание алгоритма структурирования документа может оказаться непростой задачей, но оно того стоит. Вы больше™ не будете™ ломать™ голову™ над тем, какой элемент использовать - section или div - вы будете™ знать это сразу. Более того, вы будете™ знать, почему™ эти элементы используются, и именно™ знание™ их значения является самым большим достоинством изучения алгоритма.

Все мы уже  знаем, что для создания веб-сайтов™ лучше всего использовать HTML5. Сейчас™ мы обсудим то, как правильно использовать HTML5. Одной из важных™ частей™ HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять™ разделение содержимого, нам нужно понять™ алгоритм разметки документа. 

Читать™ далее
Всего голосов 22: ↑18 и ↓4 +14
Просмотры 7K
Комментарии 8

Как победить scroll™ в javascript

CSS *JavaScript *HTML *ReactJS *
Из песочницы

Привет™, Хабр!

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

В частонсти, в статье™ рассмотрены следующие вопросы:

- Как сделать таблицу с фиксированной шапкой™ и скроллом в body?

- Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Как избежать использования overflow: 'scroll™' в данной™ ситуации. Установка css-переменной scroll™-width.

- Оптимизация и кастомизация скролла: плавность, scroll™ margin™, изменение цвета и формы.

Читать™ далее
Всего голосов 16: ↑12 и ↓4 +8
Просмотры 8.5K
Комментарии 8

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №501 (2 — 9 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 21: ↑21 и ↓0 +21
Просмотры 5.6K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №500 (27 декабря 2021 — 2 января™ 2022)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры 6.8K
Комментарии 4

Uni Localization. Абсолютная кастомизация, работает на любом сайте (Vue, React, Angular, ...)

WordPress *Разработка веб-сайтов™ *JavaScript *HTML *VueJS *

Я всегда™ мечтал™ о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал™ иметь максимально гибкое™ решение для абсолютной кастомизации под себя. Два года назад мы начали™ работать над воплощением этой смелой™ мечты в реальность. Первой™ такой функциональностью стала именно™ Uni Локализация.

Читать™ далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 2.1K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №499 (20 — 26 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 5.5K
Комментарии 1

Как я technicalseo.expert™ проходил (уровень 2)

Информационная безопасность *Занимательные задачки Python™ *HTML *Поисковая оптимизация

Продолжение исследования головоломки technicalseo.expert™ которая будет сломана самым нетривиальным образом.

Предыдущий уровень и чуть подробнее о самой головоломке в первом™ посте: ссылка™

technicalseo.expert™ - это головоломка для SEO, хотя я сел не имея никакого бэкграунда в SEO, а сейчас™ работаю скромным датасаентистом. Разработала головоломку Алексис Сандерс, работающая в международном агентстве маркетинга Merkle™ Inc. Алексис объясняет "Идея игры заключалась в том, чтобы позволить SEO-специалистам изучить технические аспекты своей профессии. Но второй™ уровень требует глубочайших познаний в HTML, CSS, PHP и Java. Третий™ уровень был спроектирован так, чтобы никто никогда его не прошёл™"

Скорее™ на уровень 2
Всего голосов 7: ↑4 и ↓3 +1
Просмотры 1.5K
Комментарии 2

Как я technicalseo.expert™ проходил (уровень 1)

Занимательные задачки Python™ *HTML *Поисковая оптимизация
Из песочницы

technicalseo.expert™ - это головоломка для SEO, хотя я сел не имея никакого бэкграунда в SEO, а сейчас™ работаю скромным датасаентистом. Разработала головоломку Алексис Сандерс, работающая в международном агентстве маркетинга Merkle™ Inc. Алексис объясняет "Идея игры заключалась в том, чтобы позволить SEO-специалистам изучить технические аспекты своей профессии. Но второй™ уровень требует глубочайших познаний в HTML, CSS, PHP и Java. Третий™ уровень был спроектирован так, чтобы никто никогда его не прошёл™"

Сыграем?
Всего голосов 6: ↑5 и ↓1 +4
Просмотры 2.4K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №498 (13 — 19 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 6.6K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №497 (6 — 12 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 25: ↑25 и ↓0 +25
Просмотры 6.3K
Комментарии 0

Актуальные форматы изображений в вебе

CSS *HTML *
Из песочницы

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

Читать™ далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 6.3K
Комментарии 22

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №496 (29 ноября™ — 5 декабря 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 6.8K
Комментарии 1

Убираем JavaScript. Как при помощи™ htmx красиво использовать HTML и уменьшить объем кода

Блог компании Хекслет Разработка веб-сайтов™ *CSS *JavaScript *HTML *

htmx — инструмент для создания сложных и интерактивных веб-приложений на HTML, альтернатива клиентскому рендерингу на Javascript. В этой статье™ рассказываем, как библиотека помогает переиспользовать элементы на сервере, сократить объем кода на Javascript и отказаться от сборки™.

Читать™ далее
Всего голосов 20: ↑15 и ↓5 +10
Просмотры 18K
Комментарии 17

10 вещей, которые можно делать™ в верстке с помощью псевдоэлементов before™ и after

Блог компании Skillbox CSS *HTML *

Привет™, Хабр! Меня зовут Максим™ Васянович, я спикер™ курса “Веб-верстка” в Skillbox. Сегодня поговорим о верстке, а точнее™ - о нюансах работы™ с псевдоэлементами before™ и after. Статья™ будет полезна, прежде™ всего, начинающим верстальщикам. Но, возможно, и профи будет интересно освежить эти моменты в памяти™. 

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

Читать™ далее
Всего голосов 31: ↑30 и ↓1 +29
Просмотры 22K
Комментарии 8

Gnuplot. Пакуем™ выходной svg — в один файл

Блог компании RUVDS.com Python™ *Работа™ с векторной графикой *HTML *Визуализация данных™
Tutorial

Старый™ мем на новый лад.

Предыдущая моя статья™ "Gnuplot и с чем его едят" получила большой отклик™ и даже была переведена на несколько языков™ (видел на медиуме, встречал на немецком). Поэтому, раз тема актуальная, решил продолжить.

У меня появилась задача™ получать данные™, а затем на удалённом сервере строить по ним графики и отправлять по почте. Причём™ графики должны™ иметь возможность отключать оси, приближать отдельные области графика, включать-выключать сетку. И вы знаете™, gnuplot умеет выдавать подобные графики. Он даёт их в формате html или svg. Но вот незадача, вместе™ с этим файлом™ надо тащить™ ещё багаж данных™ в виде кучи javascript-файликов, картинок, css (в случае™ html), что сильно™ сужает™ применимость при отправке их по почте.

В результате, нашёл-таки решение данной™ проблемы и продемонстрирую её решение на примере svg-файла, для html будет аналогично. Поскольку нет возможности привести график™ реальных данных™, где было использовано это решение, в пример™ взял шуточный мем про студентов
Читать™ дальше™ →
Всего голосов 64: ↑62 и ↓2 +60
Просмотры 3.4K
Комментарии 12

Оценка™ влияния блокировщиков рекламы при работе™ с server™-side GTM

JavaScript *HTML *
Перевод

В конце сентября Симо Ахава поделился материалом, в котором подробно рассказал о влиянии блокировщиков рекламы. Но не стал делать™ акцент™ на способах обхода™, а решил рассказать о технологии, которая помогает понять™, применяется ли блокировка.

Digital Analyst MediaGuru Тимур Леденёв перевел для вас эту статью™.

Многим™ кажется, что server™-side (GTM для сервера) GTM устойчив к блокировщикам рекламы и контента. В конце концов™, благодаря использованию JS-контейнера на собственном домене™ можно избежать многих™ современных технологий блокировки.

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

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

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

Уверен™, что наряду™ с тем, чтобы позволять блокировщикам рекламы и контента выполнять свою работу™, необходимо также оценивать их влияние. Речь идёт о том, чтобы анализировать, какое число аналитических и рекламных запросов блокируется этими инструментами.

Читать™ далее
Всего голосов 1: ↑1 и ↓0 +1
Просмотры 1K
Комментарии 0

Дайджест свежих™ материалов из мира фронтенда за последнюю неделю™ №495 (22 — 28 ноября™ 2021)

Разработка веб-сайтов™ *CSS *JavaScript *HTML *
Предлагаем вашему™ вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать™ дальше™ →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 7K
Комментарии 1

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