HTML *

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

Введение

Доброе время суток! Хотелось поделиться с Вами личным опытом создания десктопного приложения на JavaScript с использованием связки Electron и Webix. Такая связка позволяет ускорить процесс верстки интерфейса, особо не тратя время на разметку и прочие web штуки, которыми может заняться как раз фреймворк Webix.

Инструменты

Итак приступим, на понадобится следующие инструменты:

1. Редактор, в котором мы будем писать непосредственно наш код. Я буду использовать visual studio code (VSC), который можно взять отсюда ;
2. Сервер Node.js, который можно взять отсюда . Скачиваем его и устанавливаем;
3. Фреймворк «Webix» бесплатную версию (Webix Standard is a free UI library under GNU GPLv3 license), которую берем вот отсюда webix.com/get-webix-gpl. Для того что бы его скачать нужно перейти по выше приведенной ссылке, вести email, имя и фамилию, поставить три галочки нажать отправить после чего Вам на почту отправят ссылку для скачивания.

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

В этой статье хотел бы рассказать немного про библиотеку, первую версию которой я создал еще в конце прошлого года. Суть очень простая — расширить возможности языка HTML, чтобы можно было без JavaScript'а писать простые и рутинные вещи: отправка формы в json формате, загрузка HTML тимплейтов на определенную страницу(по сути модульная система для HTML через http/s запросы), турболинки(привет пользователям RoR), простая шаблонизация на основе ответов ajax запросов и немного еще.

Библиотека называется EHTML или Extended HTML. Основана она на небезызвестной идее веб компонентов. Она доступна на гитхабе, там довольно таки структурированная документация с примерами. В этой статье я просто опишу основные идеи, возможно кому-то это зайдет.

$google = "We don't allow apps that lack reasonable sensitivity towards or capitalize on a natural disaster, atrocity, conflict, death, or other tragic event";
mysql_query("UPDATE cvirus_users SET winners = winners+19, message='$google' WHERE imea='$imea' ");

Без паники, парни, статья не заразная! К тому же её автор умер еще в прошлом году. Делать на том свете нечего, кроме как игры писать и публиковать сами-знаете-где.

Рубятся в свежие игры не более 7 пользователей в день. Преодолеть магическую планку ни одна из них не в силах. Еще и черти смеются, — Слабо сделать игру, чтобы в неё залипло больше 7 человек? Скажем, тысяча?

Пришлось постараться.

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

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

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

Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

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

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?

По данным TelecomDaily, почти 30% пользователей мобильного интернета в России ежедневно сталкиваются с проблемами при загрузке сайтов. Однако причина может быть не только в неравномерном покрытии, но и в слишком большом «весе» страницы.

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

Как работает эта магия? Какой путь проходят данные, прежде чем стать полноценной Турбо-страницей? Меня зовут Стас Макеев, я руковожу разработкой технологии Турбо-страниц. Сейчас попробую всё объяснить.

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

Что такое Houdini?

Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

• Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
• Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
• Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

• API типизированной объектной модели (Typed Object Model)
• API пользовательских свойств и значений (Custom Properties & Values)
• API метрик шрифта (Font Metrics)
• Ворклеты (Worklets)

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

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

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

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

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



Код веб-страницы традиционно состоит из трех разделов, каждый из которых выполняет свои обязанности: HTML-код определяет структуру и семантику, CSS-код определяет внешний вид, а JavaScript-код определяет его поведение. В командах с участием дизайнеров, HTML / CSS разработчиков и JavaScript-разработчиков это разделение получается естественно: дизайнеры определяют визуальные элементы и пользовательский интерфейс, разработчики HTML и CSS размещают эти визуальные элементы на странице в браузере, а JavaScript-разработчики добавляют взаимодействие с пользователем, чтобы связать все вместе и «заставить это работать». Каждый может работать над своими задачами, не вмешиваясь в код остальных двух категорий разработчиков. Но все это справедливо для так называемого «старого стиля».

В статье речь пойдет о том, как подключать в web страницу объемные элементы анимации, и не поломать все и сразу.

Если вы очень переживаете за показатели Google Page Speed в разработке сайтов, и у вас подгорает за каждый лишний килобайт не стоит продолжать читать данную статью.

Тех же, кого не пугают большие размеры, и любит риск прошу под кат ;)

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

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

Для того чтобы это сделать, можно прибегнуть к одному из четырёх методов, описанных в этом материале. Рассмотрим эти методы, обращая особое внимание на разные важные вещи вроде доступности контента, производительности решения и браузерной поддержки.

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

Как и обещал продолжаем.

В этой части:

• создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
• создадим иконку корзины с количеством товаров
• подключим модальное окно с товарами в корзине
• перепишем всю логику store