Все потоки

HTML *

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

СтатьиПостыНовостиАвторыКомпании

alexprozoroff 18 дек 2018 в 14:05

Предиктивное поведение веб-интерфейса

6 мин

18K

HTML * JavaScript * Веб-дизайн *

Из песочницы

Сразу стоит отметить, что эта статья — лишь субъективные размышления от том, как может выглядеть и быть реализовано поведение элементов интерфейса, которые знают что делает пользователь в конкретный момент. Размышления, впрочем, подкрепленные небольшим исследованием и реализацией. Поехали.

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

+38

alexzfort 16 дек 2018 в 21:19

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

3 мин

13K

CSS * HTML * JavaScript * Веб-разработка *

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

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

+30

Petrovich_Z 11 дек 2018 в 02:01

«CMS» на базе Google Spreadsheets для статических сайтов

2 мин

11K

CMS * Google API * HTML * JavaScript *

Туториал

Все чаще для рассказа о мероприятии/товаре/услуге компании создают сайты на базе каких либо конструкторов. Либо своими силами, либо привлекая дизайнеров и без участия программиста. Современные конструкторы позволяют собрать классный, яркий, эффектный сайт, но статичный. Любые изменения нужно вносить «ручками в редакторе» и перепубликовать страницу. Но что делать, если данные меняются очень часто или хочется добавить немного автоматизации — вот тут и могут помочь Гугл Таблицы и Charts Query Language (и знакомы программист).

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

+13

alexzfort 9 дек 2018 в 21:40

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

4 мин

13K

Веб-разработка * JavaScript * HTML * CSS *

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

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

+20

EpicLegend_gg 6 дек 2018 в 06:15

Разбор таска по верстке (sass, pug, gulp, bem)

3 мин

9.5K

Для Junior’ов, для junior’ов… а то начнут тут… да мы, да это…

Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.

Отрицательные margin и width 110%

Про такой фокус я знаю давно, но на практики применял лишь впервые. В макете было ограничение(wrapper = width: 1170px, красная граница). Справа контент соответствовал ограничению и прилегал к границе, а вот слева картинка вылезала за границу. Сначала это может пугать, но стоит подробней узнать о работе margin-letf: -100px и вы уже знаете, как решить поставленную задачу. К слову, это flex и желтым я отметил границы объектов.

Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)

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

+2

alexzfort 2 дек 2018 в 21:32

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

4 мин

14K

Веб-разработка * JavaScript * HTML * CSS *

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

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

+32

Lavs 2 дек 2018 в 19:55

Начать с React и Bootstrap за 2 дня. День №1

10 мин

60K

CSS * HTML * JavaScript * ReactJS *

Туториал

Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.

Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).

Где брать материалы для изучения?

Для изучения HTML и CSS рекомендую htmlbook.ru
Для изучения JavaScript рекомендую learn.javascript.ru
Для изучения XML рекомендую msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih
Про DOM можно почитать в уроке по JavaScript learn.javascript.ru/dom-nodes
Для изучения ООП рекомендую видеокурс proglib.io/p/oop-videocourse
Для изучения командной строки Windows рекомендую cmd.readthedocs.io/cmd.html
Для изучения терминала в Mac рекомендую ixrevo.me/mac-os-x-terminal
Если вы работаете в Linux, то bash и аналоги знаете, в крайнем случае man или help вам помогут.
Для изучения React использую learn-reactjs.ru (который является переводом официальной документации React: reactjs.org).
Для изучения Bootstrap использую bootstrap-4.ru (который является переводом официальной документации Bootstrap: getbootstrap.com).
Для того, чтобы подружить React и Bootstrap нашёл отличную статью webformyself.com/kak-ispolzovat-bootstrap-s-react

В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:

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

+3

aRomanyuk 29 ноя 2018 в 12:22

Как собрать информацию с Контур.Закупки с помощью Selenium

4 мин

7.2K

HTML * Java * Программирование * Тестирование IT-систем * Тестирование веб-сервисов *

Туториал

Всем привет.

Я занимаюсь автоматизацией участия в государственных тендерах.

История эта случилась из-за экономии. При покупке платного аккаунта Контур.Закупки мы не обратили внимание на то, сколько полезного даёт тариф Эксперт.

Ах, если бы мы обратили на это внимание, то мне не пришлось бы осваивать Selenium и основы Java.

Как-то раз возникла маркетинговая задача — собрать контакты закупщиков в компаниях по нашей тематике.

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

-1

popov654 26 ноя 2018 в 03:46

Как на самом деле работают z-index

6 мин

40K

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

Наверное, почти каждый из нас хоть раз в жизни использовал свойство z-index. При этом каждый разработчик уверен, что знает, как оно работает. В самом деле — что может быть проще операций с целыми числами (сравнение и назначение их элементам). Но всё ли так просто, как кажется на первый взгляд?

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

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

+13

alexzfort 25 ноя 2018 в 21:59

Дайджест свежих материалов из мира фронтенда за последнюю неделю №340 (19 — 25 ноября 2018)

4 мин

13K

CSS * HTML * JavaScript * Веб-разработка *

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

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

+21

lastmac 22 ноя 2018 в 10:18

Разрабатываем свой браузер с нуля. Часть первая: HTML

15 мин

65K

C * HTML * Open source * БраузерыВысоконагруженные системы *

Всем привет!

Продолжаем цикл статей по разработке браузерного движка.

В данной статье я расскажу как создать самый быстрый HTML-парсер c DOM. Мы рассмотрим HTML спецификацию и чем она плоха относительно производительности и потребления ресурсов при разборе HTML.

С данной темой я докладывался на прошедшем HighLoad++. Конференцию не каждый может посетить, плюс в статье больше деталей.

Я предполагаю, что читатель обладает базовыми знаниями об HTML: теги, ноды, элементы, пространство имён.

И так, начнём!

+45

alexzfort 18 ноя 2018 в 21:56

Дайджест свежих материалов из мира фронтенда за последнюю неделю №339 (12 — 18 ноября 2018)

4 мин

14K

Веб-разработка * JavaScript * HTML * CSS *

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

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

+28

pepelsbey 14 ноя 2018 в 09:46

Меню для меню, гриды или Бутстрап, целесообразность удобства

1 мин

5.5K

CSS * HTML * Веб-дизайн * Веб-разработка *

Привет, Хабр! Давно я сюда ничего не писал, со времён моего золотого поста про переход Opera на WebKit прошло уже пять лет. Но тут появился повод: завёл себе блог на Ютубе. Чтобы понять, зачем и что это такое — смотрите пилот. Если коротко: чтобы разбирать сайты и отвечать на вопросы. А сейчас перед вами 9-й выпуск с ответами на вопросы. Под катом подробности, ссылки, почта для связи и спойлер с остальными видео. Если меня здесь не съедят живьём — буду продолжать постить сюда раз в неделю новые.

+3

oleks 14 ноя 2018 в 05:44

Рассылай и властвуй: инструменты для создания и тестирования рассылки

8 мин

23K

Блог компании 2ГИСCSS * HTML * Верстка писем * Интерфейсы *

Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.

Победить Outlook

+34

alexzfort 11 ноя 2018 в 22:31

Дайджест свежих материалов из мира фронтенда за последнюю неделю №338 (5 — 11 ноября 2018)

4 мин

13K

Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *

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

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

+29

RVera 8 ноя 2018 в 09:20

Советы по CSS, которые вы вряд ли найдете в самоучителях

7 мин

51K

Блог компании Поиск VPSВеб-разработка * Веб-дизайн * HTML * CSS *

Перевод

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

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

Ниже изложено то, чему руководства по CSS меня не научили.

+29

RVera 5 ноя 2018 в 18:07

Как я создал меняющую настроения анимацию с помощью масок CSS

3 мин

13K

Блог компании Поиск VPSВеб-разработка * Веб-дизайн * HTML * CSS *

Перевод

Помните мультфильмы, которые мы смотрели в детстве? В то время они были олицетворением анимации. Сейчас анимация – это не только мультфильмы, мы встречаем ее почти каждый день, проверяя телефон или используя любое устройство, имеющее экран.

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

В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.

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

+17

alexzfort 4 ноя 2018 в 22:15

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

4 мин

15K

Блог компании Zfort GroupВеб-разработка * JavaScript * HTML * CSS *

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

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

+28

Plarium 2 ноя 2018 в 13:08

Функции высшего порядка в JavaScript: что это такое?

7 мин

11K

Блог компании PlariumHTML * JavaScript * Node.JS *

Перевод

Представляем вам перевод статьи Sukhjinder Arora, опубликованной на ресурсе Bits and Pieces. Узнайте под катом о функциях высшего порядка в JavaScript и о некоторых других функциях, встроенных в этот язык.

Фото NESA by Makers с сайта Unsplash

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

+12

alexzfort 28 окт 2018 в 21:13

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

3 мин

15K

Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *

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

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

+30

1 2 ...

55

56 57 ...