Meta tags:
description=CSS Conf 2016;
author=htt???/twitter.com/cssconf, htt???/twitter.com/bocoup;

Headings (most frequently used words):

the, in, css, of, verou, lea, svg, grid, is, sara, and, soueidan, boston, ma, magic, to, time, it, part, hayman, emily, webpack, green, zach, map, system, sass, suzanne, miriam, international, weight, hateful, helvetica, henri, irl, cssconf, family, coming, ditch, mcdowell, justin, nicole, seafood, salads, sandwiches, sept, american, butler, antoine, irish, 26, paul, sullivan, 27, italian, privilege, coding, ramos, alisha, retcon, great, bellamy, 2016, amelia, browser, bauhaus, royds, pixels, subtitle, conduct, sight, bugs, no, jordan, brian, profit, fun, for, programming, creativity, drasner, sarah, code, lord, sponsorship, sponsors, scholarship, diversity, lunch, transcription, live, laugh, venue, committee, program, videos, talk, jessica, nativize, var, will, variables, conference, thinking, stop, grant, keith, with, animation, smooth, silky, boyd, arrives, new, finally, layout, true, css4, kramer, jen, reuse, style, based, component, hunt, pete, normalize, soon,

Text of the page (most frequently used words):
the (3361), and (2655), you (1960), #that (1755), #this (1099), can (776), #have (715), for (584), but (559), #with (524), #like (513), are (481), #there (421), #going (386), #your (384), what (382), about (380), all (376), #here (356), not (347), css (347), #just (347), they (341), one (329), was (321), use (301), want (256), out (252), don (241), now (239), things (238), right (230), then (228), get (227), some (222), how (218), these (210), really (209), because (209), know (206), when (202), kind (189), from (182), way (180), work (179), which (177), more (175), make (173), see (173), think (172), them (170), other (166), thing (166), svg (165), using (164), our (164), actually (163), will (162), into (159), browser (155), lot (152), talk (139), something (134), very (134), also (133), would (131), set (130), people (129), need (126), code (125), where (123), time (122), web (121), little (120), size (118), claudina (117), has (117), had (113), let (113), good (112), great (111), page (110), different (109), look (109), two (108), color (105), much (105), well (104), again (103), got (101), doing (99), change (98), element (98), new (95), same (94), only (94), cool (94), down (92), those (91), pretty (91), bit (90), say (90), still (90), around (89), app (88), electron (87), yeah (87), back (87), their (87), stuff (87), take (86), were (86), value (85), any (85), variables (83), another (82), okay (81), doesn (80), first (79), font (78), who (78), should (75), pixels (74), map (73), grid (72), html (72), webpack (72), everything (72), been (72), every (71), top (71), point (71), works (70), start (70), style (70), being (69), even (68), over (68), javascript (68), box (68), many (67), could (66), support (64), does (64), why (64), design (64), might (63), example (62), sort (62), put (61), system (61), text (60), test (60), create (60), called (60), property (60), did (60), maybe (60), elements (59), working (58), based (58), sass (58), before (57), show (57), browsers (57), left (57), variable (56), used (55), properties (54), file (53), each (53), wanted (52), case (52), through (51), sure (51), said (50), last (50), flexbox (49), computer (49), too (48), width (48), transform (48), than (47), big (47), most (47), end (47), thank (47), write (47), getting (46), basically (46), come (46), name (46), chrome (46), important (46), own (45), find (45), images (45), image (45), layout (45), values (45), day (44), laughter (44), both (43), made (43), call (43), screen (43), content (43), didn (43), better (42), open (42), number (42), applause (42), having (42), together (41), part (41), default (41), background (41), animation (41), run (41), its (40), read (40), three (40), today (40), trying (40), few (40), able (39), function (39), nice (39), idea (39), feel (39), probably (39), maps (39), keep (39), tools (39), mean (39), instead (38), try (38), talking (38), team (38), give (38), looks (38), after (38), always (37), tests (37), component (37), between (36), animations (36), website (36), help (36), fish (36), done (36), anything (36), awesome (35), couple (35), question (35), thinking (35), started (35), whole (35), styles (34), space (34), column (34), means (34), main (34), science (34), place (34), media (34), transforms (34), inside (34), super (34), demo (34), she (34), version (34), problem (34), coming (33), pixel (33), may (33), off (33), source (33), side (33), list (33), world (33), mix (33), spec (32), sense (32), fun (32), build (32), tech (32), yes (32), long (32), tell (32), flex (32), move (31), shape (31), next (31), makes (31), add (31), making (31), writing (31), performance (30), ways (30), gets (30), attributes (30), weird (30), transcript (30), once (30), type (29), second (29), learn (29), everyone (29), zero (29), gpu (29), without (29), user (29), programming (28), project (28), thought (28), tool (28), whatever (28), height (28), often (28), frame (27), data (27), perspective (27), yet (27), setting (27), exactly (27), break (27), shadow (27), class (27), old (27), level (27), loader (27), running (26), markup (26), view (26), came (26), check (26), happen (26), else (26), times (26), viewport (26), real (26), apply (26), numbers (26), close (26), tree (26), bad (26), site (25), rem (25), quick (25), mode (25), already (25), apps (25), created (25), line (24), whether (24), bar (24), across (24), base (24), fact (24), responsive (24), keith (24), completely (24), simple (24), someone (24), story (24), window (23), dev (23), bug (23), interesting (23), years (23), key (23), render (23), play (23), access (23), dash (23), reason (23), while (23), away (23), slides (23), comes (23), components (23), totally (23), relative (23), units (23), react (23), changes (23), book (23), looking (23), custom (22), modules (22), edge (22), bunch (22), diversity (22), single (22), module (22), imagine (22), effect (22), colors (22), defined (22), care (22), margin (22), possible (22), year (22), geometry (22), cssconf (22), community (22), issues (22), bottom (22), anyone (22), thread (21), later (21), row (21), understand (21), never (21), remember (21), obviously (21), current (21), along (21), document (21), love (21), figure (21), button (21), course (21), black (21), terms (21), github (21), found (21), swimming (21), xml (21), goes (21), small (21), operating (21), scale (21), similar (20), either (20), path (20), mac (20), four (20), padding (20), native (20), syntax (20), finally (20), steps (20), container (20), animated (20), changed (20), equal (20), sometimes (20), multiply (20), rendering (20), useful (20), windows (20), order (19), white (19), though (19), lots (19), links (19), supported (19), saying (19), easy (19), jen (19), school (19), zach (19), hard (19), true (19), especially (19), format (19), students (19), best (19), layer (19), animating (19), dom (19), rule (19), creating (19), saw (19), animate (19), users (19), available (19), full (19), ago (18), features (18), share (18), blend (18), large (18), aren (18), systems (18), update (18), experience (18), server (18), schools (18), testing (18), coding (18), multiple (18), far (18), takes (18), postcss (18), hand (18), inline (18), anymore (18), actual (18), quite (17), border (17), matter (17), depending (17), define (17), atom (17), creative (17), request (17), art (17), yourself (17), math (17), twitter (17), mind (17), five (17), mobile (17), worked (17), longer (17), conference (17), privilege (17), building (17), focus (17), flow (17), loaders (16), cases (16), process (16), step (16), talked (16), rest (16), short (16), pass (16), everywhere (16), knows (16), taking (16), smaller (16), specific (16), parser (16), moving (16), presentation (16), firefox (16), attribute (16), unit (16), huge (16), transition (16), files (16), bugs (16), wait (16), query (16), ones (16), six (16), wasn (16), certain (16), such (16), went (16), continuity (15), mouse (15), everybody (15), happening (15), happened (15), fine (15), load (15), sizes (15), columns (15), cannot (15), companies (15), susy (15), 100 (15), modes (15), internet (15), ever (15), demos (15), common (15), ins (15), turn (15), graphic (15), anyway (15), man (15), happens (15), accelerated (15), types (15), parameters (15), believe (15), took (15), automatically (15), wrong (15), changing (15), api (15), entire (15), forth (15), her (15), familiar (15), isn (15), blending (14), push (14), axis (14), url (14), half (14), selector (14), questions (14), group (14), online (14), developer (14), learned (14), node (14), hey (14), until (14), hack (14), handle (14), sites (14), extra (14), his (14), problems (14), menu (14), child (14), jessica (14), shrink (14), sorry (14), pages (14), title (14), plugin (14), sheet (14), length (14), threads (14), seen (14), language (14), perfect (14), become (14), haven (14), mentioned (14), drag (14), section (14), issue (14), company (14), inherit (14), blue (14), transparent (14), desktop (14), itself (13), hit (13), link (13), repaints (13), follow (13), needs (13), crazy (13), wrote (13), supports (13), deal (13), technology (13), cetera (13), div (13), won (13), extract (13), guess (13), picture (13), difference (13), uses (13), non (13), lea (13), technologies (13), forward (13), bauhaus (13), less (13), context (13), within (13), creativity (13), frontend (13), early (13), future (13), sarah (13), education (13), selenium (12), feature (12), calc (12), spaces (12), yellow (12), starting (12), reload (12), learning (12), red (12), save (12), complex (12), ask (12), essentially (12), display (12), enable (12), added (12), speak (12), giving (12), individual (12), scope (12), photo (12), retcon (12), network (12), click (12), talks (12), children (12), names (12), lets (12), floats (12), zoom (12), absolutely (12), person (12), drop (12), client (12), earlier (12), pink (12), excited (12), green (12), gap (12), growing (12), answer (12), coordinate (12), facebook (12), stick (12), pete (12), however (12), stage (12), definitely (12), pull (11), accessibility (11), separate (11), job (11), loading (11), rows (11), wouldn (11), examples (11), major (11), production (11), specify (11), alisha (11), input (11), under (11), notice (11), throughout (11), basic (11), asked (11), library (11), outside (11), libraries (11), takeaway (11), please (11), magic (11), logic (11), safari (11), particular (11), depends (11), position (11), amount (11), sub (11), development (11), queries (11), fix (11), live (11), applied (11), henri (11), import (11), config (11), million (11), high (11), information (11), tip (11), fill (11), brian (11), head (11), details (11), wide (11), shapes (11), direction (11), circle (11), soon (11), says (11), program (11), stay (11), result (11), built (11), stop (11), caught (11), diverse (11), starts (11), webp (10), series (10), lines (10), bring (10), decided (10), city (10), complete (10), eight (10), sorts (10), telling (10), slightly (10), root (10), pushing (10), focused (10), local (10), bundle (10), parts (10), home (10), plugins (10), days (10), tried (10), option (10), news (10), heard (10), shown (10), scaler (10), cut (10), word (10), helpful (10), decision (10), guys (10), amelia (10), ten (10), various (10), tweet (10), hot (10), eye (10), cells (10), kinds (10), pattern (10), enough (10), scroll (10), buttons (10), computers (10), original (10), functions (10), specifically (10), wonderful (10), object (10), additional (10), somebody (10), grow (10), gives (10), week (10), core (10), effects (10), cause (10), characters (10), worry (10), since (10), boston (10), mostly (10), likely (10), 2016 (10), loop (10), normal (10), clip (10), implement (10), editor (10), copy (10), weight (10), quickly (10), jpeg (10), hour (10), bigger (10), approach (10), stack (10), divide (10), align (10), float (10), ended (10), gif (10), merge (10), dot (10), room (10), initial (9), understanding (9), interested (9), items (9), needed (9), spread (9), photos (9), complicated (9), movie (9), lights (9), hover (9), radius (9), convert (9), split (9), folks (9), passed (9), blocks (9), myself (9), calling (9), provide (9), neat (9), amazing (9), hope (9), seconds (9), including (9), reference (9), life (9), explorer (9), framework (9), gutter (9), traffic (9), usually (9), personal (9), results (9), putting (9), inherited (9), teachers (9), speaking (9), org (9), regardless (9), origin (9), bayer (9), generate (9), recently (9), via (9), larger (9), free (9), compression (9), seems (9), allow (9), configuration (9), standard (9), fixed (9), classes (9), breaking (9), self (9), sets (9), cultural (9), switch (9), dead (9), projects (9), control (9), ton (9), gave (9), written (9), draw (9), center (9), tag (9), knew (9), selectors (9), yesterday (9), networks (9), video (9), websites (9), designers (9), exciting (9), except (9), showed (9), cross (9), developers (9), hands (9), simply (9), event (9), anybody (9), boxes (8), consistent (8), currently (8), further (8), dynamic (8), declare (8), model (8), grids (8), choose (8), otherwise (8), corner (8), rectangle (8), gradient (8), bias (8), plus (8), translate (8), slide (8), sheets (8), microsoft (8), became (8), margins (8), opportunity (8), designing (8), tasks (8), behind (8), degrees (8), pre (8), resources (8), transformations (8), unique (8), places (8), megs (8), unfortunately (8), thousand (8), affect (8), straight (8), xlink (8), finding (8), target (8), implementations (8), remove (8), unless (8), during (8), filters (8), declaration (8), styling (8), icons (8), safe (8), inset (8), png (8), sized (8), output (8), painting (8), rems (8), explicitly (8), character (8), designed (8), fonts (8), constantly (8), becomes (8), specificity (8), american (8), gotten (8), locally (8), adding (8), icon (8), almost (8), savings (8), rules (8), json (8), typography (8), supposed (8), com (8), cover (8), codepen (8), state (8), drawing (8), directly (8), vox (8), known (8), women (8), comfortable (8), breaks (8), flip (8), google (8), blog (8), visual (8), thanks (8), designer (8), expensive (8), solution (8), options (8), sitting (8), easily (7), anywhere (7), trip (7), involved (7), brings (7), send (7), ideas (7), settings (7), brand (7), applies (7), justin (7), compile (7), dealing (7), keys (7), drasner (7), game (7), sweet (7), pseudo (7), seeing (7), updating (7), stable (7), updated (7), miriam (7), lay (7), requests (7), pushed (7), exact (7), match (7), widths (7), physics (7), implemented (7), funny (7), hear (7), runs (7), moment (7), horrible (7), planet (7), applying (7), showing (7), universal (7), money (7), var (7), masters (7), cucumber (7), mixed (7), decisions (7), least (7), failures (7), perfectly (7), shot (7), fallback (7), svgs (7), against (7), flows (7), stand (7), dimensions (7), block (7), reasons (7), equals (7), combining (7), standards (7), books (7), couldn (7), pictures (7), feels (7), movement (7), york (7), worth (7), dark (7), gray (7), feeling (7), remaining (7), throw (7), stuck (7), area (7), lucky (7), reflows (7), nested (7), race (7), jquery (7), figuring (7), challenges (7), family (7), meaning (7), barcelona (7), pipeline (7), statement (7), flag (7), middle (7), emily (7), beyond (7), nodes (7), calls (7), dive (7), wondering (7), appear (7), wrapper (7), history (7), nothing (7), favorite (7), past (7), search (7), powerful (7), repo (7), versions (6), pulling (6), compute (6), necessarily (6), specification (6), combine (6), docs (6), updates (6), hasn (6), forever (6), hopefully (6), underrepresented (6), orange (6), reduce (6), header (6), defaults (6), darker (6), passing (6), apis (6), bundles (6), eyes (6), mondrian (6), fall (6), screenshot (6), script (6), century (6), return (6), average (6), inner (6), literally (6), fully (6), readable (6), efficient (6), raster (6), points (6), equivalent (6), anyhow (6), near (6), wrap (6), keeps (6), continue (6), bootstrap (6), recognize (6), recent (6), teams (6), weren (6), soueidan (6), moved (6), sara (6), defining (6), implementation (6), heart (6), particularly (6), properly (6), prefix (6), rate (6), template (6), raise (6), difficult (6), expect (6), conduct (6), ends (6), cascade (6), straightforward (6), 2015 (6), inclusive (6), faster (6), smooth (6), quote (6), racial (6), article (6), valid (6), vertical (6), social (6), engineers (6), instance (6), fantastic (6), areas (6), footer (6), modern (6), african (6), shows (6), yep (6), reverse (6), walk (6), hitting (6), public (6), fit (6), grab (6), artists (6), woman (6), concept (6), industry (6), prefixes (6), versus (6), abstract (6), platform (6), clicking (6), minutes (6), product (6), slack (6), meant (6), purple (6), gone (6), slow (6), career (6), displaying (6), device (6), transcription (6), solutions (6), heading (6), closer (6), platforms (6), chat (6), aside (6), exist (6), iris (6), ourselves (6), developing (6), keeping (6), visible (6), poster (6), floated (6), turns (6), member (6), wants (6), offer (6), phone (6), parse (6), situation (6), reach (6), felt (6), fairly (6), meet (6), regular (6), 000 (6), sharing (6), premises (6), truly (6), term (6), wider (6), abstraction (6), saturation (6), stroke (6), pieces (6), mass (5), fly (5), speaker (5), proper (5), join (5), realized (5), month (5), force (5), noticed (5), experimental (5), understands (5), explore (5), ahead (5), photoshop (5), meter (5), research (5), compare (5), serious (5), rearrange (5), causes (5), mine (5), nearly (5), broken (5), sequence (5), fallbacks (5), kept (5), pleasant (5), spend (5), following (5), devices (5), america (5), whenever (5), pick (5), parameter (5), covered (5), increase (5), justify (5), detail (5), margolis (5), hacking (5), bounds (5), german (5), spaced (5), plug (5), watching (5), concepts (5), frames (5), date (5), software (5), medium (5), per (5), student (5), transformation (5), structure (5), studio (5), suddenly (5), brothers (5), net (5), failure (5), potentially (5), somewhere (5), implications (5), theme (5), below (5), distance (5), thoughts (5), calculate (5), lossless (5), patterns (5), error (5), beautiful (5), significant (5), snippet (5), recommendation (5), menus (5), global (5), others (5), society (5), jpg (5), must (5), connection (5), cutting (5), consulting (5), piece (5), keywords (5), jank (5), teach (5), boundaries (5), leading (5), hue (5), population (5), card (5), impose (5), whose (5), shouldn (5), handy (5), yay (5), whatnot (5), adjustments (5), inheritance (5), tschichold (5), chain (5), inspired (5), selectable (5), corners (5), trick (5), strong (5), glad (5), employees (5), lose (5), filter (5), application (5), override (5), tables (5), empty (5), hidden (5), variations (5), welcome (5), runners (5), body (5), environment (5), god (5), dialogue (5), designs (5), frameworks (5), accessible (5), ran (5), related (5), auto (5), progress (5), lastly (5), minus (5), fewer (5), zone (5), millions (5), swim (5), accent (5), communities (5), doc (5), invalid (5), transitions (5), checking (5), outline (5), unconscious (5), download (5), aware (5), performant (5), final (5), tons (5), ellipse (5), weeks (5), artificial (5), assuming (5), array (5), panel (5), pair (5), products (5), represent (5), rotated (5), positioning (5), broke (5), layouts (5), forget (5), specs (5), experimenting (5), keyword (5), seriously (5), business (5), increasing (5), integrate (5), linux (5), given (5), minecraft (5), realize (5), figured (5), lists (5), curriculum (5), easier (5), cell (5), shift (5), applications (5), heights (5), scales (5), levels (5), percentage (5), establish (5), hyper (5), closes (5), sounds (5), cat (5), argument (5), told (5), dolly (5), rather (5), hiring (5), typing (5), loads (5), select (5), cancel (5), hello (5), taken (5), none (5), arbitrary (5), musical (5), associated (4), shared (4), activity (4), afterwards (4), craft (4), greensock (4), present (4), therefore (4), balance (4), polygon (4), limited (4), waiting (4), logo (4), pain (4), lighten (4), manipulate (4), internal (4), friends (4), rotating (4), kit (4), anyways (4), contrast (4), manifesto (4), named (4), opening (4), scratch (4), location (4), advantage (4), heavy (4), sees (4), terrible (4), asking (4), fruit (4), technically (4), act (4), academia (4), toronto (4), degree (4), seem (4), latest (4), ability (4), draggable (4), avoid (4), basics (4), conferences (4), needing (4), technical (4), playing (4), drawings (4), poor (4), guide (4), stress (4), emulate (4), pro (4), signed (4), interactive (4), required (4), leave (4), startup (4), caps (4), mail (4), dynamically (4), humans (4), clients (4), steve (4), philosophy (4), round (4), normalize (4), attach (4), questioning (4), rectangles (4), 1970 (4), methods (4), gutters (4), adds (4), themselves (4), scripts (4), reorder (4), table (4), removed (4), recommend (4), condition (4), correctly (4), formula (4), naming (4), lower (4), blown (4), database (4), represents (4), house (4), max (4), opacity (4), words (4), overlay (4), frameless (4), food (4), false (4), john (4), clear (4), attention (4), plane (4), edit (4), expand (4), articles (4), spans (4), extreme (4), conversations (4), tricks (4), incredible (4), returns (4), ie10 (4), guy (4), webkit (4), workload (4), planning (4), conversion (4), memory (4), commit (4), deep (4), bars (4), door (4), nest (4), north (4), quality (4), verou (4), objects (4), scoped (4), silky (4), nearby (4), alpha (4), hadn (4), channel (4), sauce (4), previous (4), vendors (4), outer (4), music (4), architecture (4), vary (4), smoothly (4), buckets (4), foundation (4), count (4), reality (4), enjoy (4), tab (4), notable (4), infinite (4), becoming (4), scrolling (4), hold (4), duration (4), frankie (4), turquoise (4), grunt (4), driver (4), finish (4), camera (4), fancy (4), experiences (4), eventually (4), hire (4), gold (4), interview (4), reloading (4), basis (4), vanishing (4), listener (4), pointer (4), include (4), ready (4), brains (4), gosh (4), audience (4), higher (4), tutorials (4), touched (4), third (4), sidebar (4), honest (4), contents (4), failed (4), due (4), challenging (4), agree (4), shoes (4), wonder (4), matters (4), opera (4), tweaking (4), processes (4), mention (4), tricky (4), bummer (4), explain (4), repeat (4), positioned (4), sign (4), board (4), months (4), special (4), treated (4), https (4), npm (4), scholarship (4), flexible (4), events (4), brain (4), naturally (4), techniques (4), exists (4), district (4), instruction (4), wealth (4), bringing (4), happy (4), post (4), existing (4), oftentimes (4), languages (4), ignore (4), con (4), parent (4), turned (4), opened (4), triangle (4), serve (4), circles (4), rasterization (4), rid (4), programs (4), taught (4), chance (4), region (4), schwitters (4), usable (4), es6 (4), screens (4), cost (4), loops (4), general (4), spending (4), whereas (4), discussion (4), whoa (4), harvard (4), category (4), note (4), popular (4), eventual (4), situations (4), route (3), folder (3), contrived (3), decrease (3), weapon (3), groups (3), tweak (3), chunk (3), talented (3), luminosity (3), maintaining (3), roll (3), strings (3), wish (3), abstractions (3), sponsors (3), recursion (3), impact (3), workflow (3), boundary (3), solved (3), interface (3), extend (3), optimized (3), bang (3), scss (3), modernist (3), subject (3), baseline (3), stretch (3), replicate (3), helvetica (3), goal (3), presented (3), babel (3), front (3), configurations (3), offset (3), item (3), hsla (3), track (3), apart (3), navigation (3), beginning (3), percentages (3), revoltpuppy (3), hugo (3), gropius (3), normally (3), blur (3), fight (3), command (3), experiments (3), composite (3), paint (3), emphasize (3), exploring (3), touch (3), mics (3), gulp (3), darken (3), powered (3), factory (3), stretched (3), minification (3), primary (3), prefixing (3), differences (3), resize (3), liner (3), lighter (3), bright (3), appropriately (3), consistently (3), light (3), played (3), inverse (3), cms (3), alternate (3), stays (3), removing (3), simplify (3), generating (3), grant (3), honestly (3), plan (3), careful (3), older (3), manual (3), effort (3), hash (3), opaque (3), chris (3), trouble (3), opinions (3), hashed (3), kevin (3), generative (3), distribute (3), precedence (3), bacon (3), managed (3), shadows (3), opposite (3), maintain (3), layers (3), param (3), layouting (3), achieve (3), him (3), predictable (3), angular (3), garde (3), dig (3), specified (3), definition (3), texts (3), modular (3), scenarios (3), recall (3), clearly (3), critical (3), sweat (3), timing (3), composition (3), mistakes (3), established (3), nicer (3), maximum (3), closed (3), justification (3), accept (3), multiplying (3), forcing (3), videos (3), blended (3), print (3), autoprefixer (3), sizing (3), paintings (3), karasz (3), ages (3), offers (3), aligning (3), laying (3), multiplies (3), mic (3), square (3), http2 (3), magical (3), sections (3), liked (3), war (3), listed (3), published (3), dropping (3), candidate (3), win (3), paths (3), rebeccapurple (3), theming (3), canvas (3), robot (3), annoyed (3), assume (3), demonstrate (3), filled (3), miss (3), driven (3), transitioned (3), engineer (3), luckily (3), knowledge (3), identifier (3), random (3), encourage (3), tips (3), implicit (3), manage (3), ensure (3), carrying (3), urls (3), classroom (3), researchers (3), volunteer (3), overflow (3), pool (3), accessing (3), press (3), geographically (3), south (3), stressful (3), emulating (3), tutorial (3), inputs (3), candidates (3), sadly (3), culture (3), stereotypes (3), moves (3), cursor (3), smart (3), defines (3), odd (3), thrown (3), prepend (3), alluded (3), foo (3), concatenate (3), scrolled (3), supporting (3), report (3), errors (3), dice (3), falling (3), gifs (3), extremely (3), successful (3), transparency (3), labs (3), antiquated (3), pngs (3), movies (3), edited (3), minute (3), died (3), brought (3), reboot (3), environments (3), ship (3), decide (3), thon (3), 2013 (3), turtle (3), lossy (3), exif (3), careers (3), sit (3), puts (3), reusable (3), explaining (3), helps (3), dives (3), mom (3), planned (3), exposed (3), responsibly (3), improve (3), usual (3), independent (3), velocity (3), machine (3), afternoon (3), vector (3), compatible (3)

Text of the page (random words):
out like if you think about a whole series of pictures coming in you have a bunch of pictures coming in from the server you don t know how many pictures you re going to get need to lay out on the page flexbox is awesome for this still going to have similar kinds of markup we re going to have rows and cells they re going to be called flex containers and flex items okay and you have to have both of those in order to work they re really good at vertical centering and equal heights that s like one of the awesome things about flexbox that s why everybody s really excited about it it s very very easy to reorder boxes another reason that people are excited about flexbox but the major disadvantage is once again as really designed i m calling it one dimensional layout it s designed to take a long line of things and sort of wrap it around and display it to actually harness it and have the browser do what you want it to do at every point along the way correctly is going to take some extra code it s going to take some extra code i m going to show that in a second and the browser syntax can be challenging depending on which browsers you want to support you may be stuck with prefixing depending how far back you have to support internet explorer and i feel bad for the people at the federal government still supporting ie7 these people still exist so like you know it s still a thing all right so three versions of flexbox we have gone through a couple of iterations for how the syntax works for this anybody for the bonus question today anybody know the one browser that supports the tweener syntax from 2011 ie10 ie10 yeah seriously so you have to do something special for ie10 and again prefixing may still be required here s a little bit about the support if you re interested in that and so the way that html looks is as follows so once again basically the same way we had for floats in terms of how we re going to lay this out make it work our rows are going to have a different kind of code on them so the notable things here is that our widths are not really widths when we work with flexbox so we use something called flex basis which is kind of like a width we ll say here i said auto but you may say it s like 45 it s kind of 45 wear going to try to smoosh it in unlike a float where it s actually going to wrap on to the next column if things don t add to 100 flexbox is going to smoosh things around and try to make them work for you this is me being lazy should have media queries wrapped around each one of those anyways this is how to make the widths flex spaces a little bit different for each one of your various devices change that and to reorder it s easy order one two don t have to mess around with relative positioning or any of that nonsense so far so good all right for ya ll are falling asleep again no okay good all right so then finally we re on to css grid yay so why css grid all right first of all it is in development the specification is changing all the time we have yet another editor s working document published today hooray so you know what i say right now may be going out of the date as i speak which makes it challenging to do a talk on this but anyway so the specification is under development there s really no row markup required here we re not clearing things anymore okay we re going to put a big wrapper around our whole page that s added but not necessarily thinking of things in a row by row fashion the grid is used to work in two dimensions i will explain better what i mean and finally the big recommendation here the big takeaway is that we ought to be using flexbox for these ui elements so that image gallery or the series of media boxes or whatever you got but we re going to use grid for the major layout on the web page okay grid for the major layout on the web personal injury this is the graphic that comes from the css working group it s explaining flexbox here on top you notice here we have eight things and for whatever reason the browser laid it out with three in one row and five in the next it s just the browser doing math and based on the settings that you chose for it that s what it calculated may not be what you want but that s what you re going to get and look at the bottom here that s the grid layout call spans and row spans essentially if you remember the table based layout so we re back to that kind of thing again but what is the big issue with css grid anybody know how is the browser support zero awesome yeah support without flags need to set flags in the browsers to work even with flags 5 bazillion bugs especially in firefox work in chrome set the flag and spec is not implemented fully until some browsers and or there are bugs you think you have the code correct you have the spec doesn t render correctly it may not be you okay it may be the browser all right so what does the code look like this time so same kind of thing i have the div with the class of wrapper notice i have individual classes for each one of these dives anybody annoyed by that i m annoyed by that i m so old i remember class what s wrong with you people so coming along here there are going to be some various types of additional selectors that will allow us to select individual elements here without dropping all these classes in so there s pseudo classes coming in a couple others way near as i can tell they re not nearly supported in browses just yet this is the way we re working with it now each cell in the grid layout is going to have its own class associated with it the wrapper itself is going to get this type of definition so display of grid and then a grid gap of ten pixels the grid gap being the distance between the cells and the rows and so forth and who is offended that i said ten pixels anybody some of you are offended that s great you should be offended it should be percents but percents don t work in the browser this is a known bug if you read the spec it will tell you that the the fact that this should be percents is if they get to it they ll actually try to make that work but right now they re just makes it work with pixels and isn t the talk after mine or tomorrow the one about why we should not use pixels anymore tomorrow in the afternoon excellent here s the way this code looks so there s a couple of different ways to write your grid based layout code and this is the one that sort of resonates with me and we re going think about it this way if you start counting the i don t know separator lines between each one of these cells that we have here we can start numbering them count like humans not engineers we start with one not zero which is really nice and we re going basically write this out so for each one of the cells what is it going across one to two grid column one two make sense the next one two three three four and i ran out of rime what s the last one four 5 that s the way it s going to work a slightly more complicated example what happens when you have a layout like this you re going to have things going down the page and things next to it you can do that with a grid row property so this thing here on the left column one is going to go from one skip two down to three so 1 3 for that and that s going to be that s location on the page now there is some alternate syntax for this i like the numbering version of this there s also individual property elements where you can have your grid column start and end and start and end nobody s going to do that nobody s going to be typing all that stuff so i picked this the alternate syntax is actually to have some named grid template areas so puck actually define these areas inside of your code and say here s a header and here s a footer and where that s going to appear in your grid based layout and refer to those areas in this of the rest of your styling and i just sort of ran out time to talk about that but if you go to rachel andrew s site gridbyexample com she does have an example of this and you can take a look at how that works all right so then if we think about reordering so if we take sort of that kind of ideal that i had my wrapper and inside of that a header an article and an aside how might this kind of reordering work show that to you right now just to point out there s code posted if any of you would like to access that and then i will go ahead and show you this in the browser and this is a reordering example so here we go so here we are we have an aside we have a header we have a title i m not a graphic designer i type in background color yellow green and blue really well they kind of go together and so as we start to shrink the page down here at some point in time we can completely rearrange things how cool is that all right awesome huh so i moved my header all the way down to the bottom of the page and move my aside to the right that s what you can t do with the grid and if you shrink down further let s say this is the mobile layout this is actually the source order for this html so the source order it is really important for accessibility purposes you want people to be able to read this very easily from top to bottom and search engines like that also so this is going to allow you to put the source order in exactly the way it should be to best serve those populations and you can make it appear anywhere on the page that you want now why you would do this in real life i have no idea just because you can doesn t mean you should okay don t get all excited backend people if we have any backend people oh that s awesome i m totally doing that don t do that it s just an example all right i guess i ll show you some of my other examples that i ve gotten at the moment i have a page that i coded the same way three times because only you guys can get excited about that laughter so i just got back from barcelona like i said this is the palau de la musica in barcelona this is the web page and pictures this is a float based layout here and as i shrink my page down things are going to rearrange things are going to stack on top of each other they re going to change size until i get down to the mobile version let s call that the gold standard yay then i coded the same thing with flexbox this is a flexbox based grid system i purposely didn t do a whole lot with the images this is the images displaying their regular size they re going to do whatever they re going to do we can apply a little bit more css to make them behave the way we want them to so as i shrink the page down they stack on top of each other like this with flexbox it looks a little odd but it still works you can still understand what s going on and then they re going to go like this underneath and then we re going to shrink it down again to a single column all right so that s flexbox and then grid so how did i code this what cells here are under control of grid yeah the layout part so my fine website my aside and the article here how did i handle the pictures flexbox flexbox right so once again as we shrink the page down here that s going to go ahead and rearrange itself so these all look fairly similar is the takeaway for that like i said the html and the css are up on github how am i doing on time i don t think i have a lot of time to go through all that code you are welcome to look at it and i m on twitter if anyone wants to tweet questions all right so let s just wrap up here that s my code example so if you are interested in learning more there are some really great resources out there on the web oops except the wc3 editor s draft was updated today not then i should have updated that these are really good resources on that and in terms of my current recommendations how to lay out your web pages first of all if you need browser support can t go wrong with floats can t go wrong with floats all right don t have to worry about browser support it just works and if you re okay with a few prefixes and learning something new flexbox is a reasonable interim step until we get support in all the browsers flexbox and bootstrap 4 so the grid system in bootstrap 4 and the foundation is float by default but for both frameworks go into the sass files there s a property there you can toggle on and say use the flexbox based layout instead retile and you can use the flexbox based instead of the grid system that s there it s in bootstrap 4 coming soon it s kind of mainstreaming flexbox time to learn it and keep waiting for css grid good stuff it always five years ago this is probably five years away maybe get lucky and it ll only be three i have had mention that maybe somebody will write a polyfill for it and how cool would that be and people say polyfill and yada yada yada the browser is what it is and we re going to get the support we re going to get keep your fingers crossed it s going to be great when it gets here and i m around if you have any other questions so thank you very much applause claudina want to come sit in the chair the future jen thank you claudina so do you teach your students this new stuff that hasn t come out yet jen i do i have a two semester course of extension modern frontend web design one and two so in the fall they re actually learning selectors specificity actually they learn float based layout and they learn regular positioning because my feeling is that they don t actually know that claudina right how many of us know that jen they don t know it when they get done with my class they know it and in the spring we get into flexbox grids animation some hot cutting edge stuff get into the basics first if you don t know the basics hard to learn the fun stuff claudina do you teach pre processers jen i do in the spring term customization with sass and maybe bootstrap i haven t decided yet and i think it s an important skill these days if you truly know html and javascript you can learn the next framework that comes along not an issue and unfortunately the way that the industry is trending as i see it i know angular so i m hot stuff today until react is the hot thing and then you re no longer hot stuff right so if you learn the basics of these things you can switch to whatever you want to do but there s still definitely a place for knowing how these frameworks work you have to read the documentation you have to figure it out and make it work so i do incorporate either foundation or bootstrap because i want students to start getting that sense of how do i read a framework and start to implement it i will not always be there for me claudina i love what you re talking about the basics of understanding like the core languages and also that you teach new stuff because i feel like that is so absent in so much web education it s kind of like oh well here s this thing that you need to know and yeah welcome and you see these hires and you re like what what are you learning there s so much interesting stuff out there jen we in academia have not done a good job of servicing our students that s serious academia never figured...