Дизайн — это фашизм. Фашизму нужна питательная среда. Он начинает раскрываться в полной мере только на крупных масштабах. Идеальная среда для фашизма — это большая компания с огромным количеством продуктов. Например, Google или… Альфа-Банк. Фашизм априори не гибок…
Читать полностью »
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Менеджер и дизайнер заставляют везде убирать аутлайн. Расскажите им, что это плохая идея!
Вы совершенно правы, с удовольствием расскажем.
Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях, которые позволяют использовать определённые изображения для разных разрешений. Но это не единственный их плюс, ведь то, как и когда мы их загружаем, тоже влияет на скорость вашего веб-приложения.
На FrontFest 2017 к нам приезжает Хосе М. Перес (Jose M. Perez) из Spotify, с докладом «Progressive Image Rendering». Он расскажет о техниках прогрессивного рендеринга, основанных на плейсхолдерах, доминирующих цветах, размытых изображениях и ленивой загрузке, которые помогут улучшить производительность.
Накануне конференции мы поговорили с Хосе про веб-стек, релизы и управление процессами в Spotify, отношение к Open Source и погоду в Испании, Швеции и России.
Читать полностью »
Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.
Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Читать полностью »
Тяжело выбрать, имея так много опций.
React стал open-source проектом в 2013. С тех пор он очень развился. Поискав в интернете, вы можете найти старые посты с разными подходами. Здесь я опишу восемь ключевых решений которые ваша команда должна поддерживать, когда пишут на React.
Читать полностью »
До релиза Firefox Quantum остаётся всё меньше времени. Он принесёт множество улучшений в производительности, в том числе сверхбыстрый движок CSS, который мы позаимствовали у Servo.
Но есть ещё одна большая часть технологии Servo, которая пока не вошла в состав Firefox Quantum, но скоро войдёт. Это WebRender, часть проекта Quantum Render.
WebRender известен своей исключительной скоростью. Но главная задача — не ускорить рендеринг, а сделать его более плавным.
При разработке WebRender мы поставили задачу, чтобы все приложения работали на 60 кадрах в секунду (FPS) или лучше, независимо от размера дисплея или от размера анимации. И это сработало. Страницы, которые пыхтят на 15 FPS в Chrome или нынешнем Firefox, летают на 60 FPS при запуске WebRender.
Как WebRender делает это? Он фундаментальным образом меняет принцип работы движка рендеринга, делая его более похожим на движок 3D-игры.
Читать полностью »
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Доброго времени суток, уважаемые читатели! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в CSS3 — давно не новинка. Однако, иногда можно сделать что-то простое эффектным. Сегодня мы по этому принципу создадим небольшую анимацию загрузки.
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body {
-webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
-moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
opacity: 0;
background-color: transparent;
}
/* WebKit (Safari и Chrome) */
@-webkit-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Mozilla Firefox */
@-moz-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Общий синтаксис */
@keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
Как правильно понимать принцип прогрессивного улучшения?
Давайте заодно разберёмся и с постепенной деградацией.