5 неща, които не знаехте, че можете да правите с HTML

Нека си признаем, уеб разработката лесно може да се превърне в бъркотия. HTML, CSS и JavaScript всички са се развили от скромен произход в продължение на много години и са до голяма степен двусмислени по отношение на начина, по който трябва да ги използвате. В резултат на това е твърде лесно да се изгради неподдържана бъркотия. Спазването на стандартите и възползването от последните подобрения в спецификациите не гарантира добър код, но със сигурност може да помогне.

Във всеки тип разработка на софтуер, модулността е важна, когато става въпрос за изграждане на поддържаем код. В резултат на това ще искате да следите отблизо уеб компонентите. Поддръжката на браузъра не е страхотна, но ако си вземете малко полифилове , можете да изпреварвате кривата и да започнете да се възползвате от персонализирани елементи, за да структурирате вашия код веднага. Този стил на развитие е бъдещето, така че си струва да се запознаете с него сега.



Поддържайте кода рационализиран за по-ясно разбиране



Поддържайте кода рационализиран за по-ясно разбиране

Самият HTML5 представи редица нови елементи (и оттегли няколко), за да насърчи добрите практики за кодиране. Може да сте чували за семантична маркировка, която се отнася до използването на описателни елементи на HTML5 като и за да посочи вида на съдържанието, което те съдържат.

как да се правят фракции в

Това наистина може да помогне за чистотата на вашия код, тъй като HTML елементите веднага ще идентифицират например кои части представляват лентата с менюта, вашите раздели на съдържанието, долния колонтитул и т.н.



Ще ви помогне и ако се възползвате от най-новите стандарти на JavaScript. JavaScript също може да стане объркан, но през последните години работата с него стана много по-лесна. Синтаксисът на ES6 се поддържа широко в браузърите и функции като функции и класове със стрелки могат да улеснят живота ви много по-лесно - въпреки това много разработчици не са запознати или са предпазливи да ги използват.

Продължавайки темата за модулното развитие, JavaScript също вече поддържа зареждане на модули, което може да ви помогне да управлявате своите зависимости чисто.

как изглежда емблемата на tesla

01. Разпознава и синтезира речта

Звукът на нещата, които идват



Звукът на нещата, които идват(Кредит на изображението: Снимка от Джейсън Розуел на Unsplash)

Някога това биха били сложни функции, изискващи специализиран софтуер, но сега те се вграждат директно в браузърите. API за уеб реч има компоненти, които поддържат преобразуване на текст в говор и говор в текст. Последният от тях ще използва или онлайн услуга (Chrome използва API на Google Cloud Speech) или услугата за разпознаване на реч на устройството. Очаквайте в бъдеще това да се използва широко на мобилни устройства.

02. Показване на избор на цвят

Изборът на правилния цвят

е окончателен разрез, струва си
Изборът на правилния цвят(Кредит на изображението: Снимка от Скот Уеб в Unsplash)

Колкото и тривиално да звучи, това е чудесен пример за това как HTML5 опростява често срещани задачи, които преди биха изисквали персонализирано кодиране на доста сложен UI компонент. ще се покаже визуален избор на цвят при щракване, като се използва инструмент за избор на цвят, присъщ на устройството. Това може да бъде особено полезно с HTML платно. Той се поддържа широко, с изключение на Safari за мобилни устройства.

03. Преоцветете потребителския интерфейс на браузъра

Цветни теми за браузъри

Цветни теми за браузъри(Кредит на изображението: Снимка от Марко Блажевич в Unsplash)

Това може да предложи приятно естетическо докосване на мобилните платформи. е предназначен да инструктира браузъра да преоцвети лентата с инструменти при разглеждане на вашия сайт. За съжаление е малко нестандартизиран, така че докато 'тема-цвят' работи с Chrome, Firefox и Opera, на iOS ще ви трябва „apple-mobile-web-app-status-bar-style“ (работи само в режим на цял екран).

04. Различни изображения за различни екрани

Посочване на изображението и разделителната способност

Посочване на изображението и разделителната способност(Кредит на изображението: Снимка от Tran Mau Tri Tam на Unsplash)

Надяваме се, че вече внедрявате отзивчив дизайн, като в този случай вашите изображения ще бъдат преоразмерени, за да отговарят на изгледа. Това не е перфектно, тъй като ще принудите потребителя да изтегли най-голямата версия на изображението, след което да го намалите. Въведете HTML5 елемент, който ви позволява да посочите различни изображения, които да се показват в зависимост от разделителната способност на екрана, на който се гледа сайтът.

05. Вибрирайте телефона си

Шакин

как да редактирате изображение в илюстратор -
Разклащане навсякъде(Кредит на изображението: Снимка от Gilles Lambert на Unsplash)

Еднозначно нареченият Vibration API излага една функция vibrate (), която ще прави точно това, което казва на устройства, които го поддържат. Функцията приема като аргумент списък, описващ вибрационен модел. Ще работи в Chrome, Firefox и Opera, въпреки че нямате късмет в Edge или Safari. Съобщава се, че някои реклами използват това, за да привлекат вниманието на потребителя, така че журито не е наясно дали всъщност е добра идея.

Тази статия първоначално се появи в Уеб дизайнер брой 266. Купете го тук .

Свързани статии: