Ето един злободневен пример за т.н. „корупционна кирилица“. Този път в Министерство на младежта и спорта. Покрай злоупотреби на Национална спортна база ЕАД със спортни съоръжения се разрових в порталите на министерството като принципал, за да намеря къде са скрили иначе уж публичните договори и поръчки, които би трябвало да са сключили.
Така попаднах на този дребнав пример за прилагане на любимата на руските институции, а все повече и на родните, корупционна кирилица.
Ако си имате време за губене и решите да пишете мейл на Министерството на младежта и спорта със сигнал за корупция или с въпрос или каквото и да е друго, ще ви се наложи да отидете на страницата им за контакти и да копирате мейлите от там. Ще бъдете обаче доста изненадани. Няколко букви в адресите посочени на сайта им са на кирилица, което ги прави невалидни.
При това не става дума за случайно натиснат бутон. Не е проста техническа грешка. В един и същи адрес символите „е“ и „р“ ги има на кирилица и латиница. Най-отдолу съм показал и че тази подмяна на букви се е „развивала“ през годините. Последно адресите са били вярни през 2014-та. След това през няколко месеца са сменяни букви в адресите без нищо друго да се променя по страницата за контакти. Днес, например, адресът за въпроси е различен от този през август 2020-та.
Божидар Божанов предлоложи, че може би са се опитвали да се пазят така от спам, което по негови думи е „скандална некомпетентност“. Той има повече опит в борбата с подобни практики в администрацията вече години наред. На мен не ми хрумна дори това обяснение, защото като мислене в кабинета това може да се сравни единствено с онзи виц за двете мутри, които си купили еднакви джипове и са си счупили по един фар, за да си ги разпознават. Ако утре Кралев и ГЕРБ излязат с това обяснение, буквално за този маниер на работа говорим
Това е малък детайл, който надали някой ще забележи, тъй като сигналите за корупция особено в това министерство и особено по времето на ГЕРБ и Красен Кралев специално бяха като викане на арменския поп. Не може да очакваш от създалият схемите да направи нещо по тях. Показателно е обаче до какви дребнави неща се стига, за да могат да си шетат и крадат на воля, а после да свиват злорадо рамене, че никой не бил подал сигнал.
Днес Томислав Дончев съвсем без ирония помоли да отбележи, че не трябвало да се чака съгласие за публикуване на най-големите получатели на поръчки и проекти по еврофондовете, а можело просто да се видят в портала на ИСУН.
Да, наистина – там са… почти. Липсват онези прибрали стотици милиони скрити зад Автомагистрали ЕАД и подобните паравани за безконтролно харчене. Но какво са това няколко стотин милиона между приятели?
Да, наистина може да се намерят. Дори като пуснаха портала се похвалиха, че имат отворени данни. Т.е. пак имат отворени данни, защото бяха платили за такива в стария ИСУН, който беше много хубав, ама не беше готов, особено от гледна точка на прозрачността и трябваше да го ремонтират.
Та аз като чух това се засилих към портала за отворени данни на същия този кабинет, в който Дончев така дейно работеше за електронни услуги пръснати тук-таме, че да ги пише за egov и да мирясаме. Да, там имаше данни за бенефициентите – от 2015-та. Малшанс.
Отворих ИСУН и о, чудо! – има бутон за сваляне на отворени данни. Най-накрая! Затърсих къде мога да направя подобни справки и да сваля нужното ми, но уви – нямаше. Трябваше да се сваля всичко програма по програма.
Пуснах първата и зачаках. Свали се файл от 1.7Mb за Транспорт и транспортна инфраструктура. Повторих същото още 20 пъти докато след 20-тина минути не получих 307 Mb в XML файлове.
Ако не знаете какво е XML и как се работи с него, съжалявам, ония курс по Excel в офиса дето проспахте няма да ви помогне. За практически всички журналисти данните в този формат са безполезни. Затова често се обръщат към хора като мен да ги сдъвкват в нещо потребно. Аз с така отворена информация мога да работя. Повечето, които имат нужда от нея веднага – не.
Разбира се, с данните следва да има схема и описание кое какво означава, каква е структурата и номенклатурите, но такова нещо почти не се среща в родната администрация. Затова не следва да се учудваме, че не са си документирали собствените данни. По имената на полета избрани наслуки от навярно разбрал значението им програмист аз догадих какво би трябвало да значат изначално. След това написах няколко скрипта на bash да извадя статистика за структурата, за да знам с какво си имам работа. 41280 проекта, 54451 юридически лица със 122049 взаимодействия между тях. Тръгнах да пиша нещо набързо на bash да извади имената им, взаимовръзките и прочие. Т.е. да сдъвква тия 300Mb от машинно четима информация. Утре ще си играя още.
Междувременно намерих и доста грешки и липсваща информация. Вземете например АНИВА ЕООД с ЕИК 121282600. Няма специална причина да избера тях. Нямам и идея кои са – просто бяха първите в търсачката. Уникалният код в данните им е b1be295ec5e347a7081ff257e61ab5e6f2ea4982. Според търсачката са изпълнители в 5 проекта. В отворените данни обаче се виждат само в двата от Развитие човешки ресурси, но не и в трите от Иновации и конкурентоспособност. Но какво толкова? Тук само за едни 812156.50 лв. говорим – даже за половин чехмедже няма.
Та дори сваляйки суровите данни и с нужните технически умения да се борави с тях, пак няма да получим вярна справка за реално получилите еврофондове. Нищо от това всъщност не е ново – за проблемите с данните от еврофондовете, достъпността и грешките говорим от години. То дори цели проекти изчезваха в портала с обяснение за системни грешки. Една съвсем явна управленска „грешка“ беше дългото криене на данните за селските райони. ПРСР нарочно години наред не беше вкарван в ИСУН, за да може ДПС да се нахрани скрита от погледите на обществеността.
Затова, да драги мои – наистина в ИСУН ги има данните. Повечето поне. И ако искате въпросната справка, а хора като мен не си вдигат телефона, защото изработват данъците за вилите за тъщи на заместници и съветници, за които същия този Томислав Дончев мижеше почти десетилетие по коридорите на МС, то хващайте молив и тетрадка и започвайте да смятате на ръка прелиствайки търсачката на ИСУН.
Така или иначе все още искат всичко на хартия – с мокър печат и „вярно с оригинала“. Та и отворените данни на ИСУН те така.
За да направя така, че падащото меню да се прибира при цъкане извън него реших да използвам събитието focusout на елементът, съдържащ целия компонент. Събитието focusout може да бъде прихванато от всеки елемент в йерархията, независимо дали самия елемент може да приема фокус, така че беше идеално за целта. Щом фокуса отида другаде, а това става и когато се цъкне с мишката извън него или пък потребителя се прехвърли на друг елемент с tab, значи падащото меню трябва да се прибере. Да, ама не и в Сафари. Там нещата винаги работят по друг начин.
Оказа се, че в Сафари взаимодействията с мишката не водят до промяна на фокуса. Т.е. цъкането с мишката върху бутон не поставя фокуса върху него. Съответно цъкането извън бутона няма да предизвика загуба на фокус от бутона. К’во правим сега?
Реших проблема като зорлем поставих елемента на фокус при цъкане с мишката върху него. От там нататък всичко продължава да действа както преди.
dropdown.addEventListener( 'mouseup', function( e ) {
this.focus();
e.preventDefault();
} );
Дано това да ви помогне и на вас ако срещнете подобен проблем. А самия компонент в действие може да разгледате на адрес https://www.thenaturaladventure.com/tours/. Обратната връзка е добре дошла.
Да, тъжно ми е. FOSDEM беше много важно събитие за мен и го смятам за част от израстването ми като компютърен специалист, като философ, ако щете и като човек изобщо. Това е мястото и времето, в което се включваш, макар и за малко, в пулса на цялата общност на свободния софтуер. Това, че е в университетски кампус е още по-показателно. Не успях да ида да уча навън като студент, но още първата година, когато с Jitsi отидох в ULB, все едно имах крила на обувките и търсех да видя коя сграда на кой факултет и на коя специалност е. Не намерих по-социални науки от право, май, но все едно бях в някой от онези колежански сериали, дето във викториански сгради учат ту физика, ту история на американската литература… примерно.
Тази година ФОСДЕМ няма. Е, уж има онлайн събитие, но аз не мога да следя излъчвания в мрежата. Не знам защо, просто не ми се получава. Мога да гледам записи, понякога нарочно търся нещо тематично, но наживо да следя емисии, да гледам “live-ове” – това не е за мен. А има някои неща, които много искам да следя, някои от тях имат редовни емисии – например всеки петък или веднъж на две седмици… и пак не успявам. Случвало ми се е да се сещам вече закъснял и да тичам към компютъра или пък да ровя бързо в мобилния, само за да открия, че излъчването току-що е приключило. Някои казват, че това с живите предавания на събития, конференции и дори концерти било страхотно, така сме щели да се справим с предизвикателствата на ковид – е, сори, но аз своите записи из мрежата не съм догледал, та камо ли друго.
Конференцията в Белгия е по-специална за мен и по други причини. Като франкофон ми беше още по-вълнуващо да крача из улици, сред всякаква френска реч, от разбираема до съвсем нечленоразделна за мен. Помня как първия път се загубих в нощен Брюксел и първо реших да разчитам на естествения си усет за ориентация, който бързо ме предаде и се оказах в квартали, в които не чуват точно френски говор, а фасадите бяха с една идея по-близки до мизерните квартали на София. Заговорих се на френски с полицаи и разбрах, че съм вървял бързо в обратна на центъра посока. Спомням си как с Емчо вървяхме през половината град към Beermania и като стигнахме се зарекох като се прибера, да изхвърля кубинките. Как с Ицо и Боби се заливахме от смях из нощните улици, след като в Delirium-а бяхме седяли до една италианска двойка на средна възраст, дето подозрително цяла вечер миришеха на джойнт. Разходките из града с Любо и Слави. Всички срещи с българската група там – някои редовни участници от българските конференции и общности, някои съвсем неочаквани, като Шопов. Оглеждането на опашката за жетони за бира, тъкмо пристигнал, дали ще видиш познати лица. Посрещането на Даменчо на гарата и после двата часа по тъмно отвън на по бира, с разказване как са те, как съм аз. Като бонус – всички познати лица от големите проекти, пък и от по-малките, някои легенди в средите, всички интересни проекти, щандове и лекции, на които или си искал да идеш, или случайно си попаднал, защото съседната зала вече е била пълна. Дори лицата от поредното подписване на ключове. Тук-там и някой от големите компании, дето са се свързвали с теб в миналото и ти ги знаеш по име и лице, но те не и си стоиш във фоайето на сграда K и си говориш с тях…
Още първия път, когато тръгвах, през 2014г., Светко ме пита дали не може да дойде с мен. Даже се отчая малко, като разбра, че заминавам и ще съм без него. Всеки път след това въпросът беше поставян отново, а междувременно и той, и Оги започнаха да ходят на курсове по роботика, да опитват да програмират на Scratch, даже преди две години, то вече са две години и половина, едно лято на морето започнаха да измислят компютърна игра. Няма да издавам тайни, но е свързана с море и вълни. Имахме съвсем сериозни планове като се приберем, да започна да ги въвеждам в програмиране и да имат свой проект, да разучаваме заедно – ако не бъркам, идеята беше да разучим Blender и после Unity, все свръх амбициозни планове. Така и още стои на трупчета, но пък точно миналата година реших, че е крайно време да ѝ изтупаме праха, да направим проект и да идем с децата на FOSDEM следващата година. А то… онлайн излъчване на видеозаписи на лекции.
Да, това ме амбицира още повече да направим тази игра и да помогна на момчетата да продължат сами да разучават технологии и концепции. Много е лесно, особено с това “онлайн обучение”, всички не-изкушени от технологиите да разбират от всичко и по много. Не ме притеснява това, че децата растат в такова бурно време или че се учат отдалечено. Повече се тревожа от този “вечен септември” на интернет интерактивността, който започва да създава грешни представи. Начинът да се остане “на вода” в този потоп е да се осмислят процесите и ценностите на онлайн средата.
Догодина се надявам да има и конференции, и фестивали. 2021-ва я пропускаме, но 2022-ра вече трябва да е ок, че ние остаряваме, децата растат…
Примерът, който ще дам е със стандартен блок за галерия в WordPress, но подходът може да се използва и в други случаи. Целта ни е да покажем първите девет снимки, като върху деветата покажем и броя скрити снимки. Тъй като използваме скрипт за разглеждане на картинките в пълния им размер, искаме естествено скритите снимки да са видими за него. Нещо такова:
Ключовият момент е използването на CSS Grid Layout за оформяне на галерията. Чрез използването на подходящи селектори можем да разположим всички елементи след да кажем деветия в последната клетка от решетката, като по този начин ограничим броя видими снимки.
Примерът е за галерия с по три снимки на ред, и след като искаме да са видими първите девет, следователно с три видими реда снимки. Първите двe правила задават решетката за галерията, основния трик е в третото правило. То казва, че деветия и всички елементи след него трябва да се разположат на третия ред от решетката в последната колона. За съжаление CSS Grid не ни позволява да посочваме автоматично създадените редове с отрицателни индекси когато не сме указали точния брой редове в решетката. Ако използвате инспектора във Firefox за да видите как браузъра описва решетката на галерията, ще забележите, че с индекс -1 е означена линията над първия ред. Поради тази причина се налага да посочим реда експлицитно.
До тук добре, но как да покажем броя скрити снимки? И как да направим така, че потребител, използващ само клавиатурата, да се ориентира какво се случва докато се придвижва с Tab през иначе скритите снимки? За да покажем броя скрити снимки ще използваме брояч в CSS, с който да преброим скритите снимки и да покажем стойността му в псевдо-елемент в последната снимка. И ще направим видима снимката, която в момента е на фокус, като я „повдигнем“ над останалите скрити снимки със z-index.
Освен, че показваме брояч, в горните правила изключваме обработването на събития от мишката (или докосвания ако екрана на устройството реагира на тях) за скритите картинки. Но когато дадена картинка е на фокус и съответно е над останалите, бихме искали да реагира на събитията, и за последната снимка искаме да скрием брояча, за да е видима.
С това галерията общо взето е завършена, можем да добавим подобни правила и за галерии с две, четири или повече снимки на ред, или да променим броя видими снимки за различни екрани.
Марките на автомобилите се пишат с главна буква, тъй като представляват съществителни собствени имена, и се ограждат в кавички. Повечето хора свързват автомобилите „Ферари“ с червения цвят. Ще си купувам кола и смятам да заложа на „Фолксваген“. Ако марката е написана с шрифт, различен от основния, кавички не се поставят. Повечето хора свързват […]
Той не просто е част от линията Мустанг, с 4 врати, възможност за мотори на двете оси и изцяло електрически. Той е Мустанг – бърз, мощен, като го видиш, го поискваш.
Официалното представяне на модела е през ноември 2019г. – в едни отминали времена на автомобилни изложения, точно преди изложението в Лос Анжелос и точно до дизайн студиото на Тесла в Хоторн („Съвпадение!“ – казва с усмивка Бил Форд). Но всъщност изглежда, че Форд искат да направят наистина желана електрическа кола – да продават мечта, така както правят Тесла.
И тук започва приказката – имало едно време една електрическа кола от една голяма компания: Форд Фокус. Тя била функционална, но не предизвиквала истински интерес, създали я само за да отговори на регулаторните изисквания. Резултатът бил, че за около 10 години от голямата компания продали само около 10 000 бройки. През 2017г. обаче в компанията настъпва промяна – появил се нов изпълнителен директор, който най-общо попитал: „Защо да не направим кола, която хората да искат да купят?“
И така, през следващите две години от Форд започнали да говорят за бъдещия модел – „вдъхновен е от Мустанг, а пробегът ще е цели 300 мили (483км)“. Трябвало да стане истински Мустанг със съответния дизайн и задвижване. Накрая се спрели и на име – Mach-E.
Резултатът? – SUV със стандартно задвижване от задната ос, с възможност за втори мотор и пълно задвижване, два пакета батерии (75,7кВч или 98,8кВч), максимална мощност 459к.с., ускорение под 4 секунди и максимална скорост от 200км/ч при спортната версия.
Как ви звучи? Сега и по-конкретно.
Пробег
Пробегът според ЕРА е между 210 и 300 мили в зависимост от батериите и моторите. Всеки модел има и възможност за бързо зареждане. От Форд казват, че ще имат най-голямата верига за бързо зареждане, по-голяма от тази на Тесла със 12 000 зарядни станции и общо 35 000 места за зареждане в Щатите и някои части от Канада.
Стандартно всеки Мак-И идва с мобилно зарядно, което може да зареди до 80 процента от капацитета на батерията за една нощ при 240 волта. Зарядна станция на Форд може да бъде поръчана онлайн и инсталирана от сертифициран електротехник. Станцията би осигурила 32 мили на час, за да се зареди батерията през нощта. Стандартното зарядно осигурява 22 мили на час.
От Форд казват, че с по-големия пакет батерии и задно задвижване пробегът би бил 300 мили (483км). Ако задвижването е с два мотора, тоест за двете оси, пробегът е изчислен на 210 мили (338км). Има разлика между различните модели и оборудването им, така че е трудно да се каже как ще се представи колата.
Интериор
Батерията е разположена под колата, което позволява максимално пространство за петте места, както и за товар. За разлика от външния вид интериорът има малко общо с оригиналния Мустанг – има голям вертикално поставен екран (15,5 инча или 39см), който се управлява чрез докосване. Може да регулирате осветлението в салона, да си проверите пощата през Интернет точката в колата. Има подгряване на предните седалки и на волана, стъклен покрив. Предният багажник е направен от пластмаса и има канал, така че може лесно да бъде измит.
Задният багажник може да се увеличи двойно, тъй като седалките се сгъват.
Операционната система е SYNC 4 на Форд и ще получава подобрения по въздуха. Може да съхранява персонализирани профили на 3 шофьори и един гост – в момента, в който ви „разпознае“, ще нагласи седалките, огледалата, осветлението, радиото спрямо вашите предпочитания.
Внимавайте! – може да ви разпознае по телефона и да отключи колата, без да се налага да изваждате ключ или телефон. А ако случайно ви е паднала батерията, има вариант с въвеждане на код през екрана, след което може да заредите телефона, без да се налага да търсите кабели за това – има безжично зареждане:
Обявените варианти на модела са 5:
Select: цена 44 995 долара
Premium: цена 51 700 долара
California Route 1: цена 53 500 долара
GT: цена 61 600 долара
First Edition: цена 61 000 долара
Базовият модел Select има стандартно задно задвижване, може да му се добави мотор и за предната ос, има по-малка батерия (осигурява пробег от 230 мили или 370км) и 18-инчови колела.
Моделът Premium има 19-инчови колела и версия със стандартен пробег (230 мили) или удължен пробег (300 мили).
California Route 1 има по-голяма батерия (с пробег, който се очаква да стигне 300 мили според ЕРА), но предлага само задно задвижване. Ускорението при този модел ще е между 5,5 и 6,5 секунди.
GT e с 20-инчови колела и ускорение под 4 секунди. Моторите са с най-голяма мощност – 342 кВ или 459к.с. Пробегът е 250 мили (402км).
Другите модели имат мощност от 190 до 248кВ (между 255 и 332 к.с.) в зависимост от броя мотори. Всички спецификации са прогнозни.
Ford отварят лист за резервации по време на представянето, което се излъчва на живо, с депозит от 500 долара. Петият модел, който предлагат, е специална версия първо издание. Твърдят, че се е разпродал за 10 дни, макар че компанията не казва колко са планираните за производство бройки.
Във връзка с пандемията от Форд са казали, че е имало промяна в поръчките и откази в началото на март. После нещата са тръгнали, както преди. Не са уточнили дали отново всичко е разпродадено, но смятат всичко да върви по план, въпреки че „ситуацията е динамична“. Очаква се в края на май да кажат окончателни дати, на които резервациите ще се превърнат в поръчки, а доставките ще започнат в края на 2020г.
Първото издание и Премиум версията ще са първите произведени. Планът е да започнат продажби през 2020г. в САЩ. Select и Route 1 ще се появят в началото на 2021г., а GT се очаква да се появи през пролетта на 2021г.
От Форд не са казали колко е очакваното производство, но според анализатори продажбите може да са между 30 000 и 60 000 бройки. Смята се, че голяма част от ранното производство може да отиде за Европейския съюз, предвид новите, по-строги правила за въглеродните емисии. За да избегнат глоби, производителите трябва да продават повече коли с нулеви емисии. В Америка вероятно първите бройки ще са в Калифорния – отново заради законовите мерки там. Интересно, че родният щат на Форд Мичиган не е от тези, които предлагат добри условия за покупка на електромобили. Дали новият Мустанг ще промени нещо при купувачите? Приказката продължава!
А ако случайно имате Форд или друга кола, която се нуждае от резервни части, проверете дали ги има първо на уебсайта Avtochastionline24.bg.
Само за няколко седмици светът се промени – пандемията от коронавирус е от събитията, за които ще говорим с „преди“ и „след“ нея. Отраженията са глобални както самата пандемия – от по-чист въздух, защото хората си стоят у дома и заводите не работят до цялостна икономическа промяна, която няма как да не се отрази и на електромобилната индустрия като част от автомобилната индустрия. Знаете, че заводи на огромни производители минаха в променен режим на работа или дори спряха производство. Автомобилни изложения с планирани представяния на нови коли бяха отменени.
Главният изпълнителен директор на Фолксваген Diess казва в края на март, че затварянето на заводите струва на компанията загуби от 2 милиарда евро за всяка седмица без производство.
А как са продажбите в това несигурно време? Несигурни – хората спазват ограничения, много остават без работа, така че покупката на нещо толкова скъпо като кола остава на заден план. Това се вижда ясно по продажбите – спаднали са драстично спрямо миналата година по това време. Да погледнем към Китай – страната с най-голям пазар за електромобили, но и с най-много болни и най-рано взети мерки срещу пандемията. Не е учудващо, че през февруари данните, цитирани от Ройтерс, са за спад на продажбите на всички видове превозни средства със 79% спрямо същия месец 2019г.
Добрата новина е, че през март вече се забелязва подобрение. Ако пак погледнем към Китай, и то данните за гиганта BYD, през март продажбите на електромобили са се повишили от катастрофалните 2 739 бройки през февруари на 12 256 през март, което пак е много по-малко от 30 075, колкото са били продадените през март 2019г.Да, разбира се, трябва да отчетем и други фактори освен пандемията – китайското правителство реши да отмени редица мерки, насърчаващи покупката на електромобили в средата на миналата година, което се отрази на продажбите в сектора. От Ройтерс твърдят, че правителството смята да върне част от мерките. Освен това имаме и спад на цената на петрола, което кара хората да преосмислят желанието за електромобил.
Според EV-Volumes повечето страни отчитат спад на продажбите на всички коли във връзка с коронавируса. Но ако погледнем данните по-детайлно, се вижда, че при електромобилите има повишение на продажбите в някои страни:
САЩ: продажбите на електромобили са с 6% повече спрямо миналата година за март (за целия пазар на коли има спад с 38%)
Белгия: +39% за електромобили (-45% за пазара на коли като цяло)
Холандия: +7% (-23%)
Швейцария: +11 % (-39 %)
Швеция: +70 % (-9 %)
В
други страни имаме срив в целия автомобилен
сектор, включително електрическия:
Канада: -39 % (-47 %)
Испания: -36 % (-39 %)
Норвегия: -26 % (-30 %)
Пълните данни за света и Европа ще бъдат достъпни по-нататък, но е ясно, че има влияние.
Големите производители, които трябваше да представят свои електрически модели в следващите 12 месеца, отлагат това за следващите години. Форд представи Mustang Mach E през ноември 2019, но се смята, че моделът ще е достъпен едва в първата половина на 2021г. ID.3 на Фоксваген, за който компанията говори от няколко години, също се очаква да забави появата си, макар че от компанията твърдят, че нещата вървят по план и продажбите ще започнат през лятото. GM промотират готовността си да предложат електрически модели, но по прогнози това ще се случи едва в края на 2021г. Анализатори прогнозират спад на продажбите на електромобили с 43% за 2020г. Това обаче може да има и добри страни за крайния потребител – Дженерал Моторс предлагат отстъпка от 10 000 долара за Шевролет Болт.
А на вас как ви се отразява пандемията? Да забелязвате увеличен глад – за електромобили имам предвид?
В какво се състои проблемът в решението на Атанас? За превключване към нощен режим той използва div със закачена JavaScript функция, която да обслужва събитието click, т.е. единствено интеракция с мишка или натискане с пръст. Но тъй като div не е интерактивен елемент в HTML той не може да приема фокус от клавиатурата и няма да реагира на никакви взаимодействия с нея. Това го прави неизползваем за онези потребители, които поради някаква причина не могат да използват мишка.
Проблемът може лесно да се реши ако използваме елемента button. Той по подразбиране приема фокус, реагира както ва взаимодействия с мишката, така и на клавишите за нов ред и интервал. Може да бъде стилизиран със CSS по същия начин както всеки друг елемент. Да видим как ще изглежда кодът тогава (ще подчертая промените с получер шрифт):
След като променихме елемента, се налага да направим и някои промени в стиловете – тъй като бутоните има подразбиращи се стилове, които да ги накарат да изглеждат като бутони, ние ще трябва да ги пренапишем.
Тъй като вече използваме интерактивен елемент, можем да добавим стилове, които да го отличават когато фокусът е върху него, когато е посочен с мишката или натиснат. Но това ще го оставим за домашно…
Вече имаме хубав бутон, достъпен за потребителите, използващи клавиатура, но на бутонът му липсва текстов етикет. Той е важен за потребителите, използващи екранен четец – когато курсорът на четеца или фокуса попадне на този бутон, той няма да може да даде подходящо описание на потребителя и потребителя няма да може да разбере какво прави този бутон. Най-добре би било текстовия етикет да е видим непосредствено до заобления превключвател, но за да не разваляме изчистения дизайн ще добавим скрит етикет чрез атрибута aria-label. Освен това ще е добре потребителя да може да разбере дали в момента нощния режим е включен или изключен. Състоянието на бутона можем да укажем с атрибута aria-pressed. Този атрибут служи за указване на състоянието на бутони с две състояние (включено – изключено, натиснат – ненатиснат), точно като нашия превключвател към нощен режим.
jQuery(function($) {
/*Click on dark mode icon. Add dark mode classes and wrappers.
Store user preference through sessions*/
var $button = $('.wpnm-button'),
$body = $('body');
$button.click(function() {
// Show either moon or sun.
$button.toggleClass('active');
// If dark mode is selected.
if ($button.hasClass('active')) {
//Add dark mode class to the body
$body.addClass('dark-mode');
//Save user preference to Storage
localStorage.setItem('darkMode', true);
// Reflect the state on the button itself.
$button.attr('aria-pressed', true);
} else {
$body.removeClass('dark-mode');
localStorage.removeItem('darkMode');
// Reflect the state on the button itself.
$button.attr('aria-pressed', false);
}
})
//Check Storage. Display user preference
if (localStorage.getItem("darkMode")) {
$body.addClass('dark-mode');
$button.addClass('active');
// Reflect the state on the button itself.
$button.attr('aria-pressed', true);
}
})
Както виждате, за етикета на бутона използвах PHP код, който да позволи етикетът да бъде част от преводите на темата или разширението. По този начин с малко помощ от общността на WordPress темата или разширението ни може да достигне до повече потребители.
Освен, че добавих промяна на атрибута aria-pressed, в JavaScript добавих и една оптимизация – можем да запазим в променливи jQuery референциите към бутона и елемента body, за да си спестим търсенето в DOM при всяко изпълняване на части от кода. Макар в случая да не е чак толкова критично, ако страницата има твърде много елементи или имаме много скриптове, подобен подход може да има съществен ефект върху производителността.
Това е минимума от промени, с които да направим превключвателя достъпен. Можем да подобрим още нещата, като например направим етикета видим когато фокуса е върху бутона. Това може да стане с техниката, описана от Adrian Rosseli за добавяне на достъпен етикет на емотикони, и която използвам за бутоните за споделяне в разширението ми Minimal Share Buttons (има ги и под тази статия). Можем да използваме чист JavaScript вместо jQuery, с което да намалим обема на изтегляните скриптове (освен ако така или иначе не използваме и други скриптове, зависещи от jQuery). И можем вместо допълнителен клас active върху бутона да използваме атрибута aria-pressed и в CSS за промяна на изгледа когато е включен нощния режим. За целта ще ни помогне CSS селектор по атрибут: .wpnm-button[aria-pressed="true"].
За пример ще използвам блок „Обложка“ от новия редактор на WordPress (известен като Гутенберг), който представлява картинка, върху която има текст и/или друго съдържание. Такъв блок може да играе ролята на рекламен банер или заглавие на секция.
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
В момента Гутенберг поставя изображението като фон на блока и му дава минимална височина. Обаче така пропорциите на блока нямат връзка с пропорциите на изображението и е трудно да го направите винаги да е да кажем квадратен или в пропорция 4 към 3. Освен това поставяйки изображението като фон в атрибут style, губим възможността да се се възползваме от отзивчивите изображения и ще караме потребителя да зарежда едно и също (голямо) изображение независимо от размера на екрана му.
<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim" style="background-image:url(https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
<p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">Цъкнете тук!</a>
</div>
</div>
</div>
За да постигнем желания ефект, ще поставим изображението като елемент img и ще разположим съдържанието върху него. Сигурно първото, което ви хрумва е да използвате абсолютно позициониране, но това не е добър вариант, защото тогава съдържанието няма да разпъва блока. Как иначе да сложим два елемента един връз друг? Със CSS Grid естествено. CSS Grid ни позволява да поставим повече от един елемент в дадена клетка на решетката и ние ще се възползваме от тази възможност:
<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim uses-css-grid">
<img src="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg" aria-hidden="true" class="wp-image-2499" srcset="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg 1024w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-300x200.jpg 300w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-768x513.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
<p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">Цъкнете тук!</a>
</div>
</div>
</div>
Горният CSS освен, че поставя картинката и текстовото съдържание в единствената клетка от решетката, дефинирана върху блока, се грижи текстовото съдържание да е центрирано вертикално в блока, и картинката винаги да го запълва. Ето и крайния резултат:
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
Ето го още веднъж, но този път с увеличен шрифт, за да демонстрирам как съдържанието също разпъва блока:
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
– 
