JavaScript

V Quality Hotelu Brno proběhla ve zdánlivém stínu Mezinárodního strojírenského veletrhu podobně významná akce pro jinou oborovou skupinu. Přijelo na čtyřista webařů, specialistů na frontend, JavaScript, CSS a řadu dalších technologií. Nemohl jsem chybět a zápisky samozřejmě mám.

Kluci, kteří vyvíjejí český redakční systém Contember, pořádali u brněnských Supercoders půldenní školení svého headless CMS. Protože mě zajímá vše nové, co se okolo redakčáků děje, na workshop jsem se na poslední chvíli zaregistroval a páteční odpoledne strávil ponořen do Reactu, TypeScriptu a GraphQL.

Co dělá řada webařů od začátku roku do poloviny ledna? Přece přemýšlí, na kterých webech ještě nemá automatické dopisování roku do copyrightu v patičce a ručně jej mění na aktuální čtyřčíslí. Pojďme začít rok odpočinkově a nastavit si automatiku jednou provždy.

Hledal jsem způsob, jak spustit aplikaci v Node.js, nechat ji běžet a vrátit řízení zpět do příkazové řádky. Respektive, jak něco spustit na serveru a odhlásit se z SSH, zatímco daná aplikace nebo příkaz bude běžet v režimu 24/7 do doby, než se rozhodnu jinak. Našel jsem řešení v podobě šikovného nástroje PM2.

Svoje menší webové projekty rád využívám jako jednoduché pískoviště, kde si mohu zkoušet nejrůznější nové webové technologie. Hugo, Tailwind ani Swup sice novinky nejsou, ale třeba s Tailwindem zatím začínám. Mám několik postřehů k popsané kombinaci na malém webu. Třeba se vám budou hodit.

Responzivní design stojí hlavně na CSS Media Queries, které reagují na velikost/změnu okna prohlížeče nebo třeba na změnu orientace mobilního zařízení. Co ale v případě, že potřebujete odchytit změnu velikosti nějakého prvku na webové stránce?

V posledních týdnech jsem řešil několik drobných problémů s weby pro klienty, kteří se potýkali se špatným fungováním a zobrazením v Internet Exploreru. Možná by se pár tipů mohlo hodit i někomu z vás, postřehy tedy shrnuji do článku.

Je to už delší dobu, co mi jako editor slouží Visual Studio Code. Vystřídal jsem řadu jeho rozšíření, která se nakonec ustálila na několika pluginech usnadňujících mi život tvůrce webů. Ač jsem byl ze začátku vůči VS Code skeptický, dnes jej používám každodenně.

V tomto článku se podíváme na porovnání Reactu a Vue.js. Porovnáme učící křivky, code style, nástroje které máte k dispozici a komunity u Vue i Reactu. Tento článek vznikl jako takový obecný souhrn rozdílů mezi Vue a Reactem, mohli bychom také porovnat výkon nebo single file components. K tomu se můžeme dostat v dalším díle tohoto článku.

Definovatelné vlastnosti v CSS a také proměnné už mají dostatečně širokou podporu napříč webovými prohlížeči, takže je nejvyšší čas je začít používat. Respektive ten čas nastal už loni, takže pokud jste CSS proměnnými stále nepolíbeni, je nevyšší čas to změnit. Ušetříte si totiž práci.

Tvorba RESTových rozhraní v Drupalu nikdy nebyla snazší. Potřebujete-li export do formátu JSON, stačí vám v Drupalu 8 naklikat si potřebná data ve Views a jen jim nastavit správný výstup. V článku si to zkusíme krok za krokem.

Nedávno jsem řešil potřebu dynamického zobrazování kruhové výseče na webové stránce. Měla vyjadřovat procentuální úspěšnost různých testů, tedy schopnost řešitelů testem projít. Použití SVG se přímo nabízelo, jen se mi nechtělo jej generovat ručně zápisem do HTML.

Na jaře jsem byl na školení u Martina Michálka o optimalizaci rychlosti načítání webových stránek. Tedy optimalizaci především z hlediska frontendu. Získané vědomosti plus několik dalších věcí, na které jsem se chystal, jsem postupně vnesl na jednom webu do praxe a průběžně hodnotil, jaký měly přínos.

Už mnohokrát jsem řešil potřebu nějaké reakce webové stránky poté, co ji uživatel naroluje tak, že je vidět konkrétní prvek. S IntersectionObserver API je to hračka, a navíc vám i sdělí, jaké procento daného prvku už je v narolované stránce vidět.

Navzdory mnoha škarohlídům si programátorský editor od GitHubu s názvem Atom našel množství příznivců. Já jím v případě Windows nahradil už poněkud zastaralý PSPad a v případě Macu zdarma dostupný TextWrangler. Ostatně i Atom je dostupný zadarmo – jeho funkce jdou navíc rozšiřovat pomocí pluginů.