Обновить
99.94

HTML *

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

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

Анимация аккордеона и свойства height (max-height) в чистом CSS

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

Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением.

Код на Codepen https://codepen.io/webfrontden/pen/poaOPER

Читать далее

Как я hiddenkeywords проходил

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

Продолжаем проходить различные "квесты" и "пазлы" на просторах интернета. На этот раз в руки мне попался https://hiddenkeywords.com/ Это испытание было создано студией Propellernet - студия маркетингового консалтинга из Англии.

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

Поехали!

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

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

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

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

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

Скорее на уровень 2

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

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

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

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

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

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

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

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

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

Читать далее

Как я спарсил WebGL карту с Федерального сайта

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

Как я спарсил WebGL карту с Федерального сайта. Написал эту статью для тех, у кого похожая задача.

Читать далее

Создание унифицированного UI без мам, пап и кредитов

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

Всем привет! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.

В прошлый раз один из моих коллег рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью, могут найти её по ссылке. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI.

Читать далее

О ходе создания игры «Колобок» в июле

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

В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.

Как называть функции во фронтенде

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

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

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

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Читать далее

Что такое Core Web Vitals

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

Что такое Core Web Vitals? Это набор определенных моментов и факторов, в совокупности действительно имеющих значительное влияние на ранжирование.

На самом деле, Core Web Vitals уже работает на протяжении какого-то времени. Ни много ни мало, с 2018 года. Помимо прочего, существуют официальные подтверждения в документации корпорации.

В Core Web Vital грядут изменения, способные изменить понимание о том, как стоит относиться, обсуждать и объяснять работу Core Web Vitals.

Читать далее

Пробелы бывают разные:   ≠ C2A0

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

Я только что потратил более двух часов на устранение, казалось бы, простой проблемы с HTML. Когда я скопировал и вставил небольшой раздел HTML, веб-браузер отображал только что вставленный раздел не так, как оригинал. Горизонтальный интервал между некоторыми элементами был немного другим, из-за чего вся страница выглядела неправильно. Но как такое могло быть? Два раздела HTML были идентичны — новый был буквально копией старого.

Эта простая на первый взгляд проблема бросала вызов всем моим попыткам ее объяснить. Я придумал множество замечательных теорий: проблемы с моими классами CSS или с полями и отступами. Несоответствующие теги HTML. Ошибки браузера. Я попробовал три разных браузера и во всех получил одинаковые результаты.

Чувствуя себя сбитым с толку, я снова посмотрел на два раздела HTML в редакторе WordPress (текстовое представление) и подтвердил, что они полностью идентичны. Затем я попробовал встроенные в Firefox инструменты веб-разработчика для просмотра отображаемых элементов страницы и сравнил все их свойства CSS. Идентичны, но каким-то образом визуализированы по-разному. Я использовал инструменты разработчика, чтобы проверить точный HTML, полученный с моего веб-сервера, снова проверил два раздела и убедился, что они символьно идентичны. Инструмент Firefox «источник страницы» также подтвердил, что эти два раздела полностью идентичны.

К этому моменту я был готов обвинить космические лучи или магию вуду.
Читать дальше →

Модульные frond-end блоки — пишем свой пакет. Часть 2

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

В первой части я поделился своим взглядом на то, какими могут быть переиспользуемые front-end блоки, получил конструктивную критику, доработал пакет и теперь хотел бы поделиться с вами новой версией. Она позволит легко организовать использование модульных блоков для любого проекта с бекендом на php.

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

Читать далее

Модульные front-end блоки – пишем свой мини фреймворк

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

Доброго времени суток уважаемые читатели хабра. С каждым годом в веб разработке появляется все больше разнообразных решений которые используют модульный подход и упрощают разработку и редактирование кода. В данной статье я предлагаю вам свой взгляд на то, какими могут быть переиспользуемые front-end блоки (для проектов с бэкендом на php) и предлагаю пройти все шаги от идеи до реализации вместе со мной. Звучит интересно? Тогда добро пожаловать под кат.

Читать далее

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

Карта метро Москвы с расчётом пути

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров11K

В своей предыдущей статье про интерактивную карту метро Москвы я описывал процесс создания векторной карты на svg-движке, сравнивая с канвасным отображением.

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

Читать далее

3D-индикатор крена и тангажа для HUD на Three.js

Время на прочтение8 мин
Количество просмотров2.4K
Браузерные игры с трехмерной графикой создаются достаточно давно. Существуют и симуляторы различных транспортных средств, где игроку необходимо контролировать пространственное положение управляемого объекта.



В статье «Индикатор искусственного горизонта на HTML5 canvas» представлен код индикатора с объемным макетом управляемого объекта на основе изобретения Пленцова А. П. и Законовой Н. А. В реальной технике такая индикация распространения не получила, но в компьютерных играх она вполне может быть использована.

К числу достоинств идеи индикатора с объемным макетом следует отнести эффектность. На этот раз необычный формат визуализации искусственного горизонта будет адаптирован для систем дополненной реальности.
Читать дальше →

Больше, больше фронтенда — доклады c ЮMoneyDay

Время на прочтение2 мин
Количество просмотров2.7K
Готовы потереть за фронтенд? Мы — да. Поэтому публикуем новую партию полезного видеоматериала от экспертов крупного платежного сервиса. Под катом найдете 2 нескучных доклада про:

  • лайфхаки в CSS, HTML и JS,
  • архитектуру фронтенда ЮMoney.

Устраивайтесь поудобнее: возможно, такого вы раньше не слышали.


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

Рендеринг на клиенте, на сервере и генерация статических сайтов

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

Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" от Malcolm Laing.


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

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

Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid

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

Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9 апреля 2020 года автором Stephanie Eckles



Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.


Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 3

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


Как и обещал продолжаем.


В этой части:


  • создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
  • создадим иконку корзины с количеством товаров
  • подключим модальное окно с товарами в корзине
  • перепишем всю логику store
Читать дальше →

Крестики-нолики (PixiJS)

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

Один ранимый, глупый, мечтательный верстальщик решил стать программистом и у него ничего не вышло… Но он не бросил программировать и решил начать с малых программ…

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

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

Это не обучение. Больше похоже на блог.

Была цель сделать 3 версии игры крестики нолики.

1 — Самое простое(без красивого визуала, с помощью DOM)
2 — Дать возможность играть вдвоем(один компьютер)
3 — Перенести все это в canvas

Описывать крестики-нолики я не буду, надеюсь, все знают принцип игры. Все полезные ссылки(репозиторий, документация) будут в конце статьи.

Что из этого вышло? Хм…
Читать дальше →