This week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
Александр Смолянинов @derSmoll
Пользователь
Frontend Weekly Digest (25 – 31 Mar 2019)
2 min
1.1KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+12
Frontend Weekly Digest (18 – 24 Mar 2019)
2 min
1.8KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+5
Frontend Weekly Digest (11 – 17 Mar 2019)
2 min
1.4KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+8
Frontend Weekly Digest (4 – 10 Mar 2019)
2 min
1.4KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+12
Frontend Weekly Digest (25 Feb – 3 Mar 2019)
2 min
1.5KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+11
Frontend Weekly Digest (18 – 24 Feb 2019)
2 min
1.6KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+8
Frontend Weekly Digest (11 – 17 Feb 2019)
2 min
2KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+15
Frontend Weekly Digest (4 – 10 Feb 2019)
2 min
1.6KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+12
Frontend Weekly Digest (28 Jan – 3 Feb 2019)
2 min
1.8KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+21
Frontend Weekly Digest (21–27 January 2019)
2 min
1.9KThis week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
+17
«Плохие» сайты разряжают батарею мобильных устройств
2 min
2.3KЕсли вы любите серфить в интернете с мобильного устройства и периодически замечали, что при посещении Википедии ваш смартфон разряжается значительно быстрее, чем при чтении статей на Хабре, то теперь этому есть разумное объяснение.
Команда исследователей из Стенфордского Университета провела работу по изучению зависимости разряда батареи от того, какой сайт при этом был открыт в мобильном браузере.
В качестве тестируемого аппарата было выбрано устройство на Android с 3G-интернетом, на котором открывались популярные сайты, среди которых такие как CNN, BBC, Gmail, Amazon, Microsoft, eBay, Yahoo, Facebook, IMDB, Apple и Wikipedia.
Команда исследователей из Стенфордского Университета провела работу по изучению зависимости разряда батареи от того, какой сайт при этом был открыт в мобильном браузере.
В качестве тестируемого аппарата было выбрано устройство на Android с 3G-интернетом, на котором открывались популярные сайты, среди которых такие как CNN, BBC, Gmail, Amazon, Microsoft, eBay, Yahoo, Facebook, IMDB, Apple и Wikipedia.
+26
Adobe & HTML
2 min
4.8KНесколько дней назад компания Adobe представила свой новый сайт html.adobe.com, посвященный HTML, CSS и другим инструментам веб-разработки.
На данный момент сайт заполнен не до конца, кое-где красуется «coming soon», однако уже имеющийся контент представляет немалый интерес.
На данный момент сайт заполнен не до конца, кое-где красуется «coming soon», однако уже имеющийся контент представляет немалый интерес.
+42
Треугольники с тенью на CSS
3 min
40KTranslation
Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью?
Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:
Давайте посмотрим на несколько альтернативных решений.
Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:
Давайте посмотрим на несколько альтернативных решений.
+45
Подружите мобильный дизайн с пальцами: идеальные размеры для тачскринов
6 min
38KTranslation
Не так давно на глаза попалась занимательная статья, в которой автор размышляет о юзабилити мобильных интерфейсов. Некоторые его суждения — из разряда выводов Капитана Очевидности, однако есть там и ряд довольно полезных фактов и доводов, поэтому я решил поделиться ее переводом с хабраобщественностью. Тем более, эта тема может породить полезные дискуссии в комментариях — подозреваю, что многие дизайнеры сами неоднократно сталкивались с этим вопросом.
+25
Элемент Date Picker стал доступен в Chrome Canary и Chromium
1 min
4.5KПоследнее обновление билдов Chrome Canary и Chromium включило поддержку нового элемента для форм — Date Picker. Задав type="date" для input, мы увидим небольшой треугольник рядом с текстовым полем. Кликнув на него, пользователь сможет использовать date picker для выбора даты и ее параметров, и все это без использования JavaScript.
В комментариях к новости Пол Айриш пояснил, что это не последний вариант имплементации этого элемента и что разработчики прислушаются к любому конструктивному фидбеку.
Так как это нативный контрол браузера, пока нет никакой возможности, чтобы применить к нему пользовательские стили.
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
В комментариях к новости Пол Айриш пояснил, что это не последний вариант имплементации этого элемента и что разработчики прислушаются к любому конструктивному фидбеку.
Так как это нативный контрол браузера, пока нет никакой возможности, чтобы применить к нему пользовательские стили.
+24
Новая функциональность в Google Chrome Canary
1 min
22KМногие наверное знают о Canary — девелоперской ветке Google Chrome, которая получает ежедневные обновления и которую можно поставить параллельно со стабильной версий Хрома.
Сегодня в блоге Google Developers Blog появилась новость об очередном нововведении, которое коснулось нативных инструментов для разработчиков в Google Chrome.
Теперь у нас появилась возможность посмотреть, как будет выглядеть и вести наш сайт или веб-приложение на мобильном устройстве, имитируя нужные нам размеры экрана и тач-ивенты с помощью мыши.
Как это выглядит, можно посмотреть под катом
Сегодня в блоге Google Developers Blog появилась новость об очередном нововведении, которое коснулось нативных инструментов для разработчиков в Google Chrome.
Теперь у нас появилась возможность посмотреть, как будет выглядеть и вести наш сайт или веб-приложение на мобильном устройстве, имитируя нужные нам размеры экрана и тач-ивенты с помощью мыши.
Как это выглядит, можно посмотреть под катом
+27
Переменные в CSS
2 min
49KTranslation
Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).
+44
Полезные ссылки для изучения CSS анимации
3 min
24KTranslation
Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом
@keyframes
(покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.+66
Знакомство с Parallax Scrolling
4 min
292KTranslation
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
+85
Information
- Rating
- Does not participate
- Location
- Харьков, Харьковская обл., Украина
- Date of birth
- Registered
- Activity