Рубрика «верстка» - 9

Математика CSS-шлюзов - 1

CSS-шлюзом (CSS-lock) называется методика из адаптивного веб-дизайна, позволяющая не перепрыгивать от одного значения к другому, а переходить плавно, в зависимости от текущего размера области просмотра (viewport). Идею и одну из реализаций предложил Тим Браун в статье Flexible typography with CSS locks. Когда я пытался разобраться с его реализацией и создать свои варианты, мне с трудом удавалось понять, что именно происходит. Я выполнил много вычислений и подумал, что полезно будет объяснить другим всю эту математику.

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

Любой будущий программист на заре своей карьеры задается вопросом:

А где мне научится <чему-то>?

Как правило, есть несколько путей развития:

  1. ВУЗ
  2. Платные курсы
  3. Самостоятельное обучение

Хочется сегодня поговорить обо всем этом и разобраться куда двигаться лучше и какая у нас вообще ситуация в стране с этими направлениями.

Прежде чем начать рассуждать, давайте вкратце расскажу о себе.

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

В процессе обучения, я постоянно анализировал как люди воспринимают информацию, сколько нужно времени для ее восприятия, каким образом им удобней ее воспринимать и так далее. И вот, спустя 4 года я хочу поделиться своими выводами и рассуждениями.
Читать полностью »

Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

Я решила создать краткую визуальную шпаргалку по Flexbox для тех моментов освежения памяти после паузы в будущем. Думаю, что у меня получилась шпаргалка, основанная на… шпаргалках.
Читать полностью »

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

Верстка: отображаем пользовательский контент - 1

Читать полностью »

Изображения и текст принадлежат их авторам.

Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.

Сегодня кто только не использует CSS 3 анимацию в своих проектах, тем не менее не только лишь все, но мало кто может делать это правильно. Даже описаны так называемые «лучшие практики», но люди продолжают делать всё по-своему. Скорее всего потому, что просто не понимают, почему всё устроено именно так, а не иначе.

Читать полностью »

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

Читать полностью »

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

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

Яндекс убивает бизнес, или будьте осторожны с блоком #main - 1

Казалось бы, просто поехала верстка, футер стал наезжать на контент, при чем тут Яндекс?
Читать полностью »

Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.

wg css html
Читать полностью »

Makeup — инструмент для комфортного ручного регрессионного тестирования вёрстки

Что не так с тестированием вёрстки

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

Проблема тестирования вёрстки в том, что только живой человек может сказать, хорошо свёрстан блок на странице или нет. Поэтому чаще всего мы тестируем HTML и CSS вручную: проверяем, как будет вести себя блок, если в нем будет слишком много (или слишком мало) текста или дочерних элементов; смотрим, чтобы все возможные варианты отображения блока смотрелись корректно; помним о том, как блоки должны адаптироваться к разным устройствам и разрешениям экрана.
Читать полностью »

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

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

Ну, если, конечно, они ошибочно не посчитают вашу неискушенность очаровательным ретроградством. Тссс, не поправляйте их. Просто подтяните свои детские штанишки и двигайтесь дальше.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js