Рубрика «html» - 40

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

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

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

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

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

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

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

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

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

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

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

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

Функции высшего порядка в JavaScript: что это такое? - 1
Фото NESA by Makers с сайта Unsplash
Читать полностью »

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

Как я создал «визард» для WordPress от своей глубокой лени - 1

Начну сначала: На сегодняшний день я работаю QA (куа) тестером в компании TemplateMonster в отделе WordPress. Никогда не думал до этого, что от установок чистого WordPress движка (далее WP) для тестирования шаблонов, может начать тошнить. Особенно когда количество установок за день переваливает за 20. Вот однажды в один из таких дней и зародилась мысль сделать автоматизатор (Мастер, WIZARD) установки.

Многие кто работал c данным движком знают как осуществляется установка по умолчанию.

В данной статье будет рассмотрена установка на Локальный сервер — OpenServer.

Стандартная установка WP, кто не знал

  • Для начала мы должны создать mysql базу данных с кодировкой — utf8_general_ci.
  • Затем поместить содержимое архива, скачанного с официального сайта WP или репозитория на GitHub в папку на локальном сервере, где будет лежать Ваш сайт.
  • Прописать в адресной строке локальный путь к данной папке где Вас встретит визард стандартной установки WP. На первом экране визарда необходимо выбрать язык установки. После чего ввести информацию для подключения к только что созданной базе данных. А именно:
    • Имя базы данных mysql.
    • Имя пользователя к базе.
    • Пароль к ней.
    • Сервер.
    • Префикс, если это необходимо.

    Как я создал «визард» для WordPress от своей глубокой лени - 2

  • Затем, если все прошло успешно в пункте выше, нас встретит второй экран визарда. Он попросит:
    • Название будущего сайта.
    • Имя пользователя.
    • Пароль в панель администратора.
    • А также email.
  • После всех операций мы наконец-то попадаем на экран входа в админку.

Но я хотел отойти от этого всего и просто жмакнуть на кнопку — «сделать хорошо». На PHP до этого не кодил толком. Разве что в универе. И то, ради сдачи лабораторных работ оттачивал навыки копипаста.
Читать полностью »

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

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

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

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

Простой пример из практики. Страница состоит из трех колонок: левое вертикальное меню, картинка, правое вертикальное меню.

При изменении размеров окна картинка должна растягиваться (сжиматься), оставаясь в пространстве между левым и правым меню. В свою очередь пункты меню должны быть представлены квадратными областями, которые при изменении размеров окна должны оставаться квадратными:

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

Длинное, нудное вступление с претензией на манию величия

Однажды я обнаружил, что меня, как всегда, что-то сильно не устраивает в этом мире. А именно, введя какой-то длинный запрос в поисковике на настольном компьютере и затем перейдя на планшет, я никак не мог вспомнить дословно текст запроса, чтобы выйти ровно на те же результаты. А начиналось все так хорошо. Я увидел в поисковике ссылку на ответ на свой вопрос и понял, что она сулит долгое чтиво. Тогда я выключил комп и плюхнулся на диван с планшетом с мыслью о том, что вот сейчас я просто заново вобью все это в поисковик, открою ту ссылку теперь уже на планшете и лежа, спокойно, в более удобной позе прочитаю… Но не тут-то было. Какие-то мелкие разночтения в тексте — и моей ссылки уже нет в выдаче поисковика. Воспроизвести саму ссылку — тоже не вариант: она слишком длинная. Ломая голову над вариантами текста запроса, я чуть было в ярости не сломал планшет. Черт побери, пришлось вставать, снова включать компьютер, запускать браузер и копаться в истории, чтобы найти точный текст своего запроса.

Я написал кроссбраузерное расширение для вкладок, но вы так не делайте - 1

Расширение, установленное в Chrome и Firefox
Читать полностью »

image

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.
Читать полностью »

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №335 (15 — 21 октября 2018) - 1

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


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