Pull to refresh
4
0
Send message

Quasar 1.0: новый полезный инструмент для Vue-разработчиков и не только для них

Reading time6 min
Views25K
Автор материала, перевод которого мы публикуем сегодня, занимается работой над фреймворком Quasar. Это — полнофункциональный расширяемый опенсорсный инструмент для разработки современных приложений различного назначения. Он построен на базе популярного фронтенд-фреймворка Vue.js и использует возможности Node.js, Webpack и Babel. Совсем недавно, в начале июля сего года, вышел первый стабильный релиз Quasar.

Читать дальше →
Total votes 31: ↑30 and ↓1+29
Comments18

10 современных раскладок в одну строку CSS-кода

Reading time7 min
Views33K

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

Читать далее
Total votes 34: ↑33 and ↓1+39
Comments12

HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью

Reading time3 min
Views21K

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


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

Читать дальше →
Total votes 19: ↑18 and ↓1+20
Comments41

Анимация средствами HTML+CSS+JS — промо-сайт японского Nissan Note

Reading time1 min
Views33K
Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.

Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.

Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note

Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.

Немного технической статистики

По информации из Google Chrome:
  • общее число запросов: 289;
  • размер: 25.98Мб;
  • время загрузки на моём ноуте: 1,3 мин;
  • число «полезных» картинок: 46 (столько насчитал я);

Принцип работы
Total votes 33: ↑27 and ↓6+21
Comments28

Вы не знаете как должны работать модальные окна

Reading time10 min
Views27K

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?


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


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


Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

Читать дальше →
Total votes 26: ↑26 and ↓0+26
Comments20

Создание favicon для сайта 2020

Reading time10 min
Views140K

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

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

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

Какой формат использовать для favicon?


Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows

Читать дальше →
Total votes 44: ↑42 and ↓2+46
Comments30

JavaScript: область видимости простыми словами

Reading time6 min
Views103K
Доброго времени суток, друзья!

Область видимости — важная концепция, определяющая доступность переменных. Данная концепция лежит в основе замыканий, разделяя переменные на глобальные и локальные.

В этой статье я постараюсь простыми словами объяснить, что такое область видимости в JavaScript.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments5

Вопросы, которые мне задавали на фронтенд-собеседованиях

Reading time14 min
Views27K

Всем привет. В сентябре OTUS вновь запускает целую линейку курсов по JavaScript. Прямо сейчас вы можете посмотреть запись открытого урока по курсу "JavaScript Developer. Professional", а также зарегистрироваться на дни открытых дверей по курсам "React.js Developer" и "JavaScript Developer. Basic". Ну а мы традиционно делимся с вами переводом полезного материала.

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

Читать
Total votes 13: ↑8 and ↓5+4
Comments4

Проектирование сайта — гарантия успешной его реализации. Личный опыт

Reading time3 min
Views3.1K

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


Был период, когда разрабатывал сайты в небольшой веб-студии в Минске. Верстал и программировал лендинги, интернет-магазины, CRM и ERP системы. Полноценного этапа проектирования сайта в веб-студии не было по понятным причинам — дополнительные затраты.

Читать дальше →
Total votes 6: ↑2 and ↓4+1
Comments8

Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)

Reading time7 min
Views13K

Приветствую. Представляю вашему вниманию перевод статьи «CSS News July 2020», опубликованной 7 июля 2020 года автором Rachel Andrew



В последнее время скорость внедрения новых возможностей технологий веб-разработки существенно увеличилась по сравнению с тем, как это было раньше. Данная статья содержит подборку новых CSS-функций, поддержка которых уже сейчас появляется в современных браузерах. Если вы относитесь к разработчикам, которым не нравится читать о технологиях, если их нельзя сразу же начать применять, вероятно, эта статья может быть вам не интересна. Однако, если вам интересно узнать, что нас ждёт в самое ближайшее время и уже сейчас опробовать это в бета-версии браузера, тогда читайте дальше.

Total votes 9: ↑8 and ↓1+10
Comments3

О роли фронтенд-разработчика

Reading time8 min
Views8.4K

Привет, Хабр! Представляем вашему вниманию перевод статьи фронтенд-разработчика из MediaMonks Рональда Мендеса. Будучи родом из Венесуэлы, Рональд перебрался в Аргентину и построил успешную карьеру, а благодаря своему большому интересу к дизайну и анимации стал одним из членов жюри престижной премии FWA (вручается с 2000 года).


В этой заметке, которая показалась нам интересной, Рональд рассуждает о том, как фронтендеру найти свое место под солнцем и эффективнее взаимодействовать со своей командой.


Рональд Мендес. О роли фронтенд-разработчика


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


image
Читать дальше →
Total votes 7: ↑4 and ↓3+5
Comments0

Нативная валидация как фреймворк. Лекция в Яндексе

Reading time17 min
Views10K
Разработка форм — один из самых ответственных и сложных этапов создания веб-интерфейсов. Проект должен получить пользовательские данные, проверить их и дать пользователю обратную связь. Современные браузеры предоставляют разработчику встроенный API, позволяющий поэтапно реализовать валидацию данных методом progressive enhancement — от HTML/CSS к JS. Можно ли уже сегодня отказаться от тяжеловесных библиотек для валидации? Какие преимущества обеспечивает нативная валидация и насколько тернист путь ее использования? В своем докладе на конференции FrontTalks технический директор LOVATA Павел Ловцевич рассмотрел основные аспекты работы с HTML5 Constraint Validation API.


— Всем привет, меня зовут Павел, я приехал из Минска. Я расскажу про валидацию веб-форм на основе нативных, встроенных в браузер, технологий.
Total votes 35: ↑35 and ↓0+35
Comments1

Методики и инструменты для разработки стилей веб-страниц

Reading time13 min
Views23K
Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS.



Автор материала, перевод которого мы предлагаем сегодня вашему вниманию, говорит, что он и сам не любил ту часть веб-разработки, которая имеет отношение к CSS. Но от этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «пользовательским опытом», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.
Читать дальше →
Total votes 23: ↑23 and ↓0+23
Comments13

Выравнивание логотипов средствами CSS

Reading time7 min
Views24K
Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы каких-то компаний. На первый взгляд эта задача может показаться очень простой. Но, когда дело доходит до выравнивания и центровки логотипов, выясняется, что всё сложнее, чем кажется. Кроме того, тут стоит сказать о том, что изображения логотипов могут иметь разные размеры, и о том, что некоторые логотипы имеют вертикальную ориентацию, а некоторые — горизонтальную.



В этом материале я собираюсь рассмотреть различные способы размещения группы логотипов на странице, различные подходы к их качественному выравниванию средствами CSS. Полагаю, что статья понравится веб-дизайнерам, так как приёмы, о которых пойдёт в ней речь, помогут им упростить решение задачи по идеальному выравниванию логотипов в соответствующих разделах сайтов, над которыми они работают.
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments14

Исчерпывающие бенчмарки PHP 5.6, 7.0, 7.1, 7.2 и HHVM (2018)

Reading time12 min
Views31K


Каждый год мы стараемся тщательно измерять производительность разных версий PHP и HHVM на различных платформах. В этом году мы измерили четыре версии PHP и HHVM на 20 платформах/конфигурациях, включая WordPress, Drupal, Joomla!, Laravel, Symfony и многие другие. Также мы протестировали популярные решения для электронной коммерции вроде WooCommerce, Easy Digital Downloads, Magento and PrestaShop.


Мы всегда рекомендовали пользователям WordPress не пренебрегать преимуществами свежайших поддерживаемых версий PHP. Не только ради безопасности, но и ради повышения производительности. Причём речь идёт не только о WordPress, это по большей части справедливо для всех платформ. И сегодня мы продемонстрируем, как PHP 7.2 одерживает сокрушительную победу!

Читать дальше →
Total votes 28: ↑27 and ↓1+26
Comments116

Numl – Альтернативный язык разметки и стилизации для веб

Reading time20 min
Views21K

Всем привет! Меня зовут Андрей, я профессионально разрабатываю веб-интерфейсы уже больше 11 лет и последний год развиваю проект Numl, который можно назвать языком разметки и стилизации для веб. В этой статье я расскажу, как в попытке перебороть ряд особенностей CSS и упростить вёрстку веб-проектов получился целый язык, который не только удовлетворил все наши потребности в стилизации, но также позволил уменьшить кол-во JS-кода и улучшить доступность.


Читать дальше →
Total votes 48: ↑46 and ↓2+68
Comments33

Что делать, если брать фронтенд-фреймворк – это излишество

Reading time9 min
Views8.4K

Пример @@include


Современные фронтенд-фреймворки дают удивительные возможности. React, Vue, Angular и другие созданы делать то, что раньше было невозможно, – веб-приложения. В 2020 скачивать и устанавливать приложения уже необязательно. Зачем, если всё можно сделать на сайте?


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


В этом вопросе я поддерживаю "консерваторов". Не нужно писать лендинги и многостранички на Create-React-App, для этого пойдет и обычная статика.


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


Что делать? Писать простыню HTML-разметки в одном файле? Хранить данные во view? Это не сделать шаг назад, это сорваться и упасть в пропасть. Это не просто неудобно, это идет вразрез с современной парадигмой фронтенд-разработки.


Во-первых, data-driven. Данные во главе угла, а внешний вид – лишь их отображение. Пользователь делает действие, данные меняются, вслед меняется отображение. Так работают все современные фреймворки.


Еще один элемент современного подхода – компонентность. Делим приложение на мелкие самодостаточные переиспользуемые куски. Больше переиспользуемости – меньше кода. Меньше кода – меньше багов.


До этого мы уже обсуждали, как реализовать data-driven минимальными усилиями. Мой выбор – Alpine.js. Что же делать с компонентностью? Для простых статических сайтов я предлагаю самый простой вариант – gulp-file-include.

Читать дальше →
Total votes 2: ↑2 and ↓0+2
Comments8
12 ...
11

Information

Rating
4,684-th
Registered
Activity