elpíčko 15. 05. 2024

elpíčko

příště: 12. června (upřesníme)
mezitím v Brně: AI a přístupnost

note:

• poslední brněnský sraz, videa na našem YT kanále

Letem swwwětem

note:

• představit spolek

  Budujeme a vzděláváme komunitu frontendových vývojářů a designérů

• organizační náležitosti

Dnes

• Jiří Cerhan
  Jak se stát lepším vývojářem i člověkem
• Jan Kryšpín
  Unit testy v SCSS
• kwwwíz: 30% sleva na {F}rontKon

note:

• Honza Kryšpín: včera 33
• {F}ronKon: call for papers!!!
• Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Call for papers AKA náležitosti na webu Frontendisti.cz

WWW minulém díle jste viděli

• Adam Kulhánek - Lifestyle medicína a zdravotní hacky pro vývojáře - jak přežít rutinu
• Pavel Ungr - SEO ještě neumřelo, co dělat aby žilo co nejdéle?
• Adam Kudrna - Toast notifikace: kolik zvládne moderní CSS?

note:

• všechny přednášky na minulém srazu zarezonovaly, každá na jinou strunu
• Adam Kudrna
  • bude přednášet i na Webexpu – od design systémech, jak jinak
  • dnes je to na den přesně 5 let, kdy na tehdejším srazu oznámil vznik Frontend.garden
• YT kanálu Frontendisti.cz

Prohlížeče

Firefox 126

vydán 14. května 2024

• :state()

note:

• pseudotřída state pro custom elements => totéž i Chrome; Safari již v březnové verzi 17.4
• opravy a doplnění různých API, ale jinak nic, co by stálo za řeč

Chrome 125

vydán 8. května 2024

• anchor positioning

  .kotva {
    anchor-name: --kotviste;
  }

  .plavidlo {
    bottom: anchor(--kotviste top);
    left: calc(anchor(--kotviste center) - (var(--sirka-plavidla) * 0.5));
  }

note:

• vztah kotva-plavidlo lze nastavit i v HTML pomocí atributu anchor (hodnotou je id kotvy)
• demo: anchor positioning
  • obsáhlý článek, který uvádí problematiku pomocí současných možnotí (JS, absolutní pozicování), řeší fallbacky, ošetřuje scrolování (využívá další vlastnost anchor-scroll) atd.
  • KoutPen
• Safari: stále čekáme na 17.5 (zatím jen beta)

Zachyceno v síti

Ondra Konečný pracuje na výzkumu

Identifikovat a analyzovat bariéry v psaní CSS, zlepšit informovanost mezi vývojáři a frontendovou komunitou a případně i podpořit inovaci nových i stávajících nástrojů.

Kdo by chtěl poskytnout Ondřejovi 15–30 min času, nechť vyplní dotazník

Help us invent CSS Grid Level 3, aka “Masonry” layout

note:

• výzva

Bramus boří mýty okolo specificity

(1,0,2)

1. specificita není destinné číslo

2. užitím atributu style nezvýšíme specificitu

3. ani užitím !important nezvýšíme specificitu

note:

• nezvýšíme specificitu, i když to tak vypadá
• když je toho moc, použijte Bramusovu kalkulačku

const compare = (s1, s2) => {
    if (s1.a === s2.a) {
        if (s1.b === s2.b) {
            return s1.c - s2.c;
        }
        return s1.b - s2.b;
    }
    return s1.a - s2.a;
};

note:

• vyčíslení specificity pro javascripťáky

Heydon Pickering: What is utility-first CSS?

• utility first === exception first

p {
    margin-inline: 1rem;
}

<p class="font-sans text-base leading-6 my-16">And</p>
<p class="font-sans text-base leading-6 my-16">on</p>
<p class="font-sans text-base leading-6 my-16">and</p>
<p class="font-sans text-base leading-6 my-16">on</p>
<p class="font-sans text-base leading-6 my-16">and</p>
<p class="font-sans text-base leading-6 my-16">on</p>
<p class="font-sans text-base leading-6 my-16">and</p>
<p class="font-sans text-base leading-6 my-16">on</p>
<p class="font-sans text-base leading-6 my-16">etc</p>
<p class="font-sans text-base leading-6 my-16">etc</p>

note:

• používá někdo Tailwind
  • styluje výhradně pomocí TW?
• pokud neznáte CSS, může vám TW přijít úžasný, ale pokud ho znáte…? Čím více znáte CSS, tím spíš nechápete k čemu utility-first framework. (A jakýkoli framework…)
• utility => užitečnost, prospěšnst, což anglicky mluvící mate
• aneb není užitečnější napsat pár řádků CSS nežli generovat HTML se spoustou tříd?
  • jestli se vám zdá, že něco chybí: spoustu už nastavují tzv. výchozí styly prohlížeče (user agent styles)

Heydon Pickering: What is utility-first CSS?

I believe there’s a kind of CSS 80/20 rule wherein about 80% of your styling should be done with just 20% (or less!) of your CSS.
Heydon Pickering

note:

• CSS umí spoustu: rozměry, barvy, rozvržení… nejde o to co, nýbrž jak
• proč TW frčí?

návrhy, které máme za úkol kódovat, jsou často prdelní a my potřebujeme stejně pojebané nástroje, abychom je zvládli. Částečně je to proto, že zkurvené nástroje, které jsme si osvojili pro psaní zasraného JavaScriptu, si příliš nerozumí s CSS nebo třeba s HTML.

Tero Piirainen: Tailwind vs. Semantic CSS

note:

• opakování kódu vs jeho opětovné užívání
• Sémantická verze je několikrát menší (75 kb vs 8 kb), vykresluje se rychleji a nevyžaduje žádné další nástroje CSS.

Tero Piirainen: Tailwind vs. Semantic CSS

note:

• spousta zbytečného kódu

Tero Piirainen: Tailwind vs. Semantic CSS

note:

• nejvíce autorovi vadí úzké svázání vzhledu s obsahem

Tero Piirainen: Tailwind vs. Semantic CSS

But why is Tailwind so popular then?

Because mastering CSS requires practice. It takes several failed attempts before you get it. Most developers haven't gone through that so they only remember the bad things.

note:

• CSS for JS devs
  • autor slibuje, že CSS může být zábavné
• Protože sám jsem Tailwind zatím nikde nepoužil, rád bych slyšel, co si vy myslíte vy, jakou máte zkušenost s TW, souzníte s výše uvedenou kritikou atd.?

CSS is the only language that gets blamed when the author is bad.
Josh Collinsworth

note:

• CSS je jediným programovacím jazykem, kterému se spílá, i když by zasloužil spíš špatný autor.

Díky, prezentace za chvíli na @frontendisti