Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «html» - 20
Дайджест свежих материалов из мира фронтенда за последнюю неделю №383 (1 — 6 октября 2019)
2019-10-06 в 20:44, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендУскорение instagram.com. Часть 2
2019-10-01 в 11:15, admin, рубрики: html, javascript, Блог компании RUVDS.com, Клиентская оптимизация, разработка, Разработка веб-сайтовСегодня мы представляем вашему вниманию перевод второго материала из серии, посвящённой оптимизации instagram.com. Здесь речь пойдёт об улучшении механизма заблаговременного выполнения GraphQL-запросов и о повышении эффективности передачи HTML-данных клиенту.
→ Читать, затаив дыхание, первую часть
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №382 (22 — 29 сентября 2019)
2019-09-29 в 20:21, admin, рубрики: angular, css, ember, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Где и как использовать мультиколонки (CSS Columns)
2019-09-29 в 18:10, admin, рубрики: css, html, layout, верстка, Разработка веб-сайтов
При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статья я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.
Читать полностью »
«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться
2019-09-27 в 14:14, admin, рубрики: angular, css, dom, dompurify, html, javascript, JS, sanitize, sanitizers, TypeScript, Блог компании Tinkoff.ru, Разработка веб-сайтовВсем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.
Чаще всего это может быть и так, но в крупных проектах с массой разработчиков, которые пишут независимые компоненты, никогда не знаешь наверняка, где может оказаться твой код. А если вы, как я, разрабатываете библиотеку переиспользуемых компонентов, то подобную ситуацию нужно решить на корню.
Learn Bootstrap Fast With These 10 Helpful Tips
2019-09-24 в 14:59, admin, рубрики: html, website development, Разработка веб-сайтовIf you want to start your career in web development then learning Bootstrap is the way to go. Bootstrap is basically a framework used for front-end development of web apps. Its front-end component library is widely used to create interactive and responsive web apps and websites that we are used to today.
If you don’t already know, you must be wondering what responsive websites are? In simple terms, the responsiveness of a website means that when the size of the screen on which the website is being seen changes, the layout of the website responds to that and change. This makes the websites look good no matter what screen size it is being viewed on.
How does Bootstrap work?
There are two ways you can use Bootstrap. You can either import the Bootstrap into your code or you can download a sample Bootstrap project and build your website on that.
Bootstrap uses a 12-column model for website display, which is called a Bootstrap grid. On this grid, you can define different breakpoints to layout different components like headings, paragraphs, and buttons to make your website look visually appealing. When the screen size scales down, the components on the grid change layout to fit the smaller screen. This means that viewing the same website looks great on a normal size screen of your laptop and a smaller screen of your smartphone.
Bootstrap has become one of the most popular front-end development frameworks today. If you are a beginner who wants to start learning Bootstrap then you are on the right blog. Because here are the top 10 tips to learn and master Bootstrap!
Читать полностью »
Заходят как-то два браузера в скроллбар…
2019-09-24 в 10:00, admin, рубрики: css, html, javascript, Блог компании RUVDS.com, браузеры, разработка, Разработка веб-сайтов
Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.
Простая и понятная логика скроллбаров может быть изменена при реализации механизмов скроллджекинга. Это происходит тогда, когда стандартное поведение скроллбара меняется, что нарушает ожидаемое пользователем соответствие между длиной документа и высотой скроллбара.
Более того — программы для устройств, обладающих сенсорными экранами, популяризировали идею скрытия скроллбаров. При таком подходе скроллбары оказываются невидимыми до тех пор, пока пользователь не начнёт прокручивать элемент, не помещающийся в некую область просмотра. В результате оказывается, что ради визуальной привлекательности приложений дизайнеры жертвуют понятностью интерфейсов. Пользователю может понадобиться некоторое время на то, чтобы понять, что содержимое в некоем контейнере можно прокручивать. Такой контейнер может выглядеть так, будто прокрутку он не поддерживает, или так, будто прокрутка ему просто не нужна.
Классические настольные операционные системы подхватили этот мобильный тренд, пытаясь свести к минимуму вмешательство традиционных скроллбаров в дизайн приложений.
Материал, перевод которого мы публикуем сегодня, посвящён некоторым особенностям использования скроллбаров в веб-приложениях.
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №381 (16 — 22 сентября 2019)
2019-09-22 в 20:20, admin, рубрики: angular, css, ember, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Gap — светлое будущее для отступов в Flexbox (как в Grid)
2019-09-21 в 13:21, admin, рубрики: css, html, layout, markup, верстка, Разработка веб-сайтов
Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки.
Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS.
W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column.
В этом руководстве мы посмотрим, как добавляли margins в Flexbox раньше и как это делает свойство gap, позволяя нам получить внутренние отступы без дополнительных ухищрений.
Читать полностью »
Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.
Читать полностью »