Ataccama 09. 11. 2022

příště:
14. 12. 2022, Superkoders v Brně
8. 2. 2023, Heureka v Praze
partneři: Ataccama, Emplifi, Artin, Pipedrive a Superkoders

note:

• poslední letošní setkání v Praze
• pojeďte s námi do Brna na tradiční superkóderský punč
• v Praze v únoru opět minikonference

Pozvánky

JS Fwdays Europe

The Full Stack JavaScript online conference for JS enthusiasts

čt 10. listopadu 10.00–16.30

note:

• témata: TypeScript, CSS, Micro-frontends, Remix, React
• konference je v EN

S Théseem bez překážek 2022

Online konference o digitální přístupnosti

čt 10. listopadu, 10.00–15.00 (přestávka 12.00–13.00)

note:

• vysílá se živě na facebookových stránkách Střediska Teiresiás.

Letem swwwětem

Prohlížeče

note:

• oddechový čas po jarní a letní smršti
• vynechávám Edge: novinkou je svislá lišta se záložkami…

Firefox 106

vydán 18. října 2022

Nic zásadního…

note:

• pro frontendisty nic nového (pokud nepoužívají FF jako svůj výchozí prohlížeč ⇒ novinky v rozhraní a programu)
• lze editovat PDF, respektive do PDF něco dokreslit, dopsat a uložit jako PDF

Chrome 107

vydán 25. října 2022

• HEVC codec
• Chrome 108 mění chování overflow u nahrazovaných prvků

note:

• kodek je úspornější v kompresi dat, podporován od Safari 14, FF zatím ne
• uvidíme se až v příštím roce, na konci listopadu vyjde 108
  • přináší změny, které mohou rozbít některé designy
  • shrnutí na CSS tricks
  • A change to overflow on replaced elements in CSS
  • 108: dynamické jednotky – vlákno o tom, proč to trvalo

Safari 16.1

vydáno 24. října 2022

Opravy

note:

• přináší jen opravy nově podporovaných vlastností
• totéž chystaná 16.2

Zachyceno v síti

Container queries: demos
Container queries: intro

note:

• Ahmad Shadeed představuje velmi stravitelně container queries se sadou ukázek

Nástroje a generátory

• Font inspector
• Fallback font generator

note:

• inspektor: vytáhne z nahraného fontu všechny dostupné informace + vygeneruje CSS pro @font-face

• fallback pomůže vyladit záchranný font, aby se předešlo CLS

• Retouch photos

note:

• nahrajete fotku a retušujete s pomocí AI (lze překliknout vlevo nahoře na originál)

• Paper CSS

note:

• Paper CSS: repozitář s prvky ostylovanými jako načmáraný prototyp: když se chcete soustředit na prototypování a obsah
• ukázka

Generátory CSS

note:

• generátory: kdo nějaký generátor použil? (já třeba gradienty a svého času border-radius)

• šetří čas v prvotních fázích projektu

• pomohou prolomit paralýzu z prázdné stránky a rychle začít

• generátor gridu

• plastelína

• mléčné sklíčko

• šišatoidy za hubičku

• Animista

• všecko dohromady

note:

• neumorphism: tvary s dvojitým stínem a zaoblením ⇒ působí plasticky

• knoflíkář

• vlnky, vlny, vlnobití

• stínítko

• AnimatiSS – sada minimalistických animací

• Keyframes.app
  note:

• buttons: kliknutím se zkopíruje CSS, lze hned použít

  • viz CodePen

• stínítko: chytře využívá proměnné vlastnosti

• getwaves: generuje SVG

• AnimatiSS: „animovací utility“

• Keyframes.app: opačný přístup než předchozí, animaci si vytváříte sami

  • vizuální kontrola, vyladíte animaci, neřešíte kód

• sada generátorů pro CSS i JSX

• SVG generátory – článek na Smashing Magazine

• Figma Autoname

note:

• přistály mi v newsletteru po redakční uzávěrce…
• generátory: přítomné programátorky a programátoři si můžou zkusit nějaký napsat jako projekt do svého portfolia

Holograms, light-leaks and how to build CSS-only shaders.

note:

• hutné efekty na obrázcích vytvořené moderním CSS
• kompletní ukázky až dole na stránce

Your account content is permanently suspended gone: nesvěřujte svůj obsah cizím

note:

• ukládejte si obsah na své servery, můžete o něj snadno přijít

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

note:

• Pavel Peroutka - Ataccama
  • Sranda s Ramda: Funkcionální programování v příkladech
  • Lambda kalkulus, monada, high-order funkce, currying! Příklady ne teorie!
• Petra Nuličková - Pale Fire Capital
  • Když ptáčka lapají... aneb na co si dat pozor než příjmu nabídku
• Martin Michálek
  • Container Queries: krátká přednáška o velké věci