Dot All 2023

I’ll keep this space updat­ed with thoughts and notes on the pre­sen­ta­tions from Dot All 2023. 

• Dot All sessions
• Get a tick­et here (there’s a livestream option, so you can join us remotely)

Day 1: Craft 5 Work­shop #

Today’s agen­da:

• go over fea­ture tour of Craft 5
• Q&A
• Local set­up
• Break
• Group activ­i­ty
• Lunch
• Show & Tell
• Plu­g­in Lab

Craft 5

• plan­ning for sev­en years
• the team has been work­ing towards this day for a long time; excit­ed they’re here
• require­ments
  • PHP 8.2
  • allows access to enums, read­on­ly prop­er­ties, read­on­ly class­es, never return type, null, true and false types
  • con­stants in traits
  • dynam­ic prop­er­ties in class­es deprecated
• Lazy Eager-Load­ing
  • .eagerly() — how you do lazy eager loading
  • entry.featuredImage.eagerly()
  • field types will need to do some work to sup­port — only if they’re sup­port­ing eager-load­ing and extend­ing the base rela­tion field.
• Vol­ume subpaths
  • allows reusable file sys­tems across the volumes
  • since Craft 4 launch they got feed­back to repur­pose file sys­tems in dif­fer­ent volumes
  • “No two vol­umes can over­lap with­in the same file system”
• Ele­ments chips and cards
  • Cp::elementChipHtml($entry) — gen­er­ates the chip
  • Cp::elementCardHtml($entry) — gen­er­ate the card html
  • sup­port­ed auto­mat­i­cal­ly by all fields that imple­ment PreviewableFieldInterface
  • intro­duc­ing ThumbableFieldInterface — any fields that want to pro­vide thumb­nails — any­thing where an ele­ment thumb­nail would make sense. 
• Inline Ele­ment Editing 
  • Edit ele­ments in the ele­ment list­ing view
  • InlineEditableFieldInterface — any field can imple­ment to get sup­port for this — can be cus­tomized but most sim­ple fields shouldn’t need much work to get support.
• Con­tent Storage
  • same basic struc­ture and data­base schema since 1.0
  • two prob­lems:
    • row size lim­its on larg­er sites where there are too many fields
    • too rigid
    • No con­tent table in Craft 5
      • replac­ing it with the content col­umn in the elements_sites table; it stores JSON
      • why JSON?
        • stored on disk like a text col­umn, so it doesn’t affect row size
        • only stores the val­ues actu­al­ly need­ed for each element
        • JSON is flexible
        • per­for­mant
        • fetch­ing the JSON val­ues requires three dif­fer­ent ways 
          • they cre­at­ed helper func­tions that make this easier
            • Field::getValueSQL() — get that fields spe­cif­ic val­ue with­in the JSON column
            • field.getValueSql()
            • real­ly only applic­a­ble for advanced imple­men­ta­tion where you need to look up a col­umn name
    • BaseContentRefactorMigration — any plu­g­ins that define a cus­tom ele­ment type will need to include this class
      • used in a migration
      • becuase of JSON usage, can now sup­port utf8mb4 by default (allows emo­jis, etc)
• Field Instances (reusable fields)
  • because of JSON usage, can now sup­port Field Instances
  • sup­port­ed by default for field types that man­age their own data storage
  • field types can opt out via isMultiInstance()
  • field lay­out can over­ride field handles
  • Fields’ JSON val­ues are indexed by the field lay­out element’s UUID.
  • Planned: fields/merge command
  • Field groups removed in Craft 5
• Field Type changes
  • valueType() => phpType()
  • getContentColumnType() and hasContentColumn() => fdbType()
  • modifyElementsQuery() => queryCondition()
• Decou­pled Entry Types
  • new Entry Types set­tings, no Entry set­ting in Sec­tion settings
  • choose one or more entry types from a list assign them to the section
  • they will intro a new com­mand to clean up all of the entry types
• Entri­fi­ca­tion
  • remov­ing categories
  • remov­ing tags
    • tags UI will be brought to entry fields
  • Glob­al sets => Singles
    • plan was to dep­re­cate in Craft 5 and remove in 6 — howver, they are con­sid­er­ing remov­ing it ear­li­er because of the con­tent table changes
  • matrix blocks are entri­fied in Craft 5
    • block types become entry types
    • block type filds become glob­al fields
    • con­flict­ing entry type and fild han­dles get renamed automatically. 
    • orig­i­nal field han­dles are retained with the field out
    • entries are no longer required to have titles
    • entries can now belong to either a sec­tion for ele­ment + field
    • craft\services\Sections -> craft\servicesEntries — sec­tion ser­vice no longer exists; Rec­tor takes care of this for you
• new view mode in field set­tings => Ele­ment Index view
  • you can also inline edit in the ele­ment index view in a field
  • you can also use ele­ment index view in user fields, too
• Address Field Type
  • new field type in Craft 5
• More to come…
  • SSO
  • 2FA and passkeys
  • Cross-site field copying
  • trans­lat­able alt text
  • Entry porta­bil­i­ty
  • Con­tent releas­es — Cre­ate a release and asso­ciate mul­ti­ple drafts with that release. Tech­ni­cal­ly sim­ple but a UI challenge,
  • Uni­fied con­tent view — still con­sid­er­ing the cor­rect approach for this
• Craft 5 dev pre­view avail­able today

When will Craft 5 be released? Q1 2024

Day 2: Dual-Track Talks #

Reac­tive Front-ends with Sprig

by Ben Croker

This talk has a lot of code and cod­ing, so I won’t be able to cap­ture everything!

• Demo of tick­ets sell­ing for an event
• Ben wants to make just part of a page reac­tive with­out destroy­ing the rest of the DOM on the page
• “sprigi­fy­ing” a tem­plate — con­vert­ing the tem­plate from a nor­mal tem­plate to a Sprig/​reactive tem­plate or component
• Ben walks through some exam­ples of how Sprig can be used: mul­ti-step form, con­di­tion­al fields, faceted fil­ters. ​“Very easy to get a lot of stuff done” in Sprig
• htmx — HTML Extended
  • small JavaScript library
  • the only depen­den­cy that Sprig has
• Lis­ten -> Fetch -> Swap
  • lis­ten­ing for an event, Ajax requests fetch­es data from serv­er, swaps out element/​content in DOM
• Ben shows Github send­ing HTML over the wire to swap out con­tent in the DOM
• “What JavaScript library should I use along with Sprig?”
  • Ben: don’t use any­thing extra
  • htmx can han­dle this; it expos­es APIs that make a lot of event han­dling possible
  • <button s-on:click="html.toggleClass('#more', 'hidden')">Show/hide</button>
  • what about for roundtrip to the serv­er? Sprig real­ly shines here
• “Let’s Build Something”
  • sim­ple com­po­nent, results page with entries, nav­i­gat­ing the pages of results
  • Ben is demon­strat­ing how to code this com­po­nent using Sprig
• Com­po­nent Layouts
  • what Ben just showed is one com­po­nent on the page but you may have mul­ti­ple com­po­nents on a page.
  • Ben is show­ing a demo of a shop­ping cart page that is cur­rent­ly set as one large com­po­nent. Updat­ing the num­ber of prod­ucts, it updates the entire sin­gle component. 
  • That’s the eas­i­est way to use Sprig and the way Ben rec­om­mends to get started.
  • Show­ing an indi­ca­tor to cre­ate a spin­ner via s-indicator
  • Refresh on load
    • sprig.isInclude — is the Sprig com­po­nent part of the ini­tial page render
    • <div sprig s-trigger="load"></div>
  • There are rea­sons you want to split your com­po­nents up — if you need to only update parts of a page at a time
• Lis­ten for a refresh
• Out-of-bounds swaps
  • s-swap-oob="true"
• Sprig in the Wild
  • release over 3 years ago
  • 11k active instal­la­tions accord­ing to plu­g­in store
• Ben’s entire pre­sen­ta­tion was pow­ered by Sprig and Craft

Craft CMS and DDEV Together

Randy Fay

• main­tain­er of DDEV for about 7 years
• DDEV mot­to is ​“Make Devel­op­ers Happy”
• Agen­da:
  • why local development?
  • DDEV and Dock­er basics
  • Fun­damne­tal tasks with DDEV
  • and more I missed
• Why local development?
  • we need to work on our copy in the local development
• There are sev­er­al ways to run Docker:
  • Orb­Stack
  • Dock­er Desktop
  • Col­i­ma
  • Ranch­er

• ddev export-db --file=filenameandpathhere
• ddev snapshot — save entire full state of the database
  • ddev snapshot --name=demo — not a text export, but a full snap­shot export of the database
  • a great fea­ture for doing migra­tions or iter­a­tive work
  • ddev snapshot restore
• ddev list
• ddev describe — great way to see the ser­vices and soft­ware ver­sions running 
• ddev config
• Check in the .ddev direc­to­ry so it’s shared with your team. You should ver­sion con­trol the entire .ddev. DDEV han­dles git­ig­nor­ing the files that don’t need ver­sion control.
• ddev share shares your local project via ngrok so any­one can view it at a pub­lic URL

Prac­ti­cal Tips for Mak­ing Your Web­site Accessibility

Kait­lyn Mar­tinez and Lupe Camacho

• 1 in 6 peo­ple have a sig­nif­i­cant disability
• becom­ing an access­bil­i­ty is not expect­ed overnight

• Web Con­tent Acces­si­bil­i­ty Guidelines

  • WCAG
  • a glob­al stan­dard that helps us gauge whether our con­tent is accessible
  • Suc­cess Criteria
    • POUR
      • per­ceiv­able
        • text alt for images, cap­tions for videos
      • oper­a­ble
        • user can oper­ate the interface
      • under­stand­able
        • infor­ma­tion and UI must be under­stand­able; help­ful instruc­tions, nav­i­ga­tion consistent
      • robust
        • con­tent can be inter­pret­ed by browsers and assis­tant tech
    • 3 con­for­mance levels
      • Lev­el A — basic, meets all A criteria
      • Lev­el AA — strong, meets A and AA
      • Lev­el AAA — excel­lent, meets all levels 

• Work­ing with Designers

  • Don’t solve prob­lems in devel­op­ment that should be solved in design
  • rel­a­tive cost of rework gets high­er the far­ther along you get into a project
  • >80% of WCAG suc­cess cri­te­ria are affect­ed by design
• Col­or Contrast
  • 4.5:1
    • con­trast ratio for para­graph text
  • 3:1
    • large text over 18.66px bold­ed or 24px nor­mal weight
  • WebAIM con­trast col­or checker
• UI Com­po­nents
  • Keep track of the dif­fer­ent states of UI com­po­nents, like form fields. This should be han­dled in design.
• Col­or as an enhance­ment, not the only indicator. 
  • use pat­tern, shape, or text
  • Exam­ple of Spo­ti­fy adding a dot below the shuf­fle icon when it is enabled
• CMS Ux
  • what we can do when build­ing out sites in Craft CMS
  • Alt text
    • in Craft 4, there’s a native alter­na­tive text field in the field lay­out set­tings per field
    • don’t use text in images, should be used on the page instead
    • native alt text field also pulls up in the video pre­view modal
  • Rich Text Edi­tor set up
    • very sim­pli­fied tool­bar to help pre­vent con­tent author from cre­at­ing too many acces­si­bil­i­ty issues
  • Links
    • show clients how to cre­ate links (i.e. not ​“click here”)
  • Video
    • Add CC to video
    • add tran­script via a cus­tom field
  • Doc­u­ment Language
    • when you add a doc­u­ment lan­guage to your HTML ele­ment, it sig­nals to the screen­read­er what lan­guage it should be speak­ing when it reads the doucment.
    • imple­ment­ed using a lan­guage attribute on the html ele­ment: lang="en-US"
    • update lan­guage attribute when chang­ing lan­guages using a switch­er for mul­ti-lang sites
  • Live Regions
    • relates to load­ing spin­ners or visu­al sta­tus changes
    • comm­ni­cates with the acces­si­bil­i­ty tree to tell the screen read­er to out­put a mes­sage that shares what is hap­pen­ing on the page e.g. ​“Load­ing search results”
    • <span id="loading-live-region" class="sr-only" role="status"></span>
    • <span id="loading-live-region" class="sr-only" role="status">Loading</span>
      • this inser­tion of text trig­gers the screen read­er to read this text
    • <span id="loading-live-region" class="sr-only" role="status">Content Loaded</span>
  • Dis­clo­sure Widgets
    • some­thing that shows/​hides something
      • Accor­dions
      • search icon that expands the search box
      • ham­burg­er nav­i­ga­tion on mobile
• WCAG-EM
  • Define scope
  • Explore site
  • Select a rep­re­sen­ta­tive sample
  • Evaulate a sample
  • Report find­ings

Buy vs Build: How Craft Com­merce Agen­cies Win an E‑commerce SaaS World

Matt Riopelle

• Pain in my SaaS => Shopify
• Bou­tique web shops can­not sup­port with the resources of Shopify
• but there are some things we can extract from Shopi­fy and oth­er play­ers in that space that helps us reach our cus­tomers better.
• what is Shopi­fy doing bet­ter than what we can do in Craft Commerce?
  • prod­uct-mar­ket fit

• busi­ness model
  • cre­ate the most val­ue for the peo­ple who’ll val­ue it the most
• “Mer­chants don’t want cus­tom com­merce soft­ware. They want a reli­able way to sell their prod­ucts online.”
• “Rela­tion­ships, not transactions”
  • the goal isn’t to build an e‑commerce store but to help our clients build their business
• “All prof­it is derived from risk”

Per­for­mance, Per­son­al­iza­tion and Perfection

Zoltan Vara­day

• What does it mean to be fast?
  • 273ms medi­an human reac­tion time 
• 0.1s lim­it for user to feel like they’re inter­act­ing with something
• 1s lim­it for user feel­ing that they are freey lynav­i­gat­ing with­out hav­ing to undu­ly wait for the com­put­er - 10s anythign slow­er than 10 sec­onds need a progress indi­ca­tor as as a clear­ly sign­post­ed way for the user to inter­rupt the opeation
• Web Met­rics: TTFB, CLS, 
• Astro and Next.js
  • Zoltan look at per­for­mance opt­miza­tions for each framework
• Web Perf plu­g­in by NyStudio107
• Light­house in the Chrome devel­op­er tools
• Issue with TTFB? Look at data­base queries first
• For con­tent-heavy sites use some com­bo of caching and inter­ac­tive islands + js sprin­kles to help make it dynamic

Pri­va­cy, Please

Shaw­na O’Neal

• Rules, reg­u­la­tions, lat­est news
• Glob­al attitudes
• Data and track­ing relevancy
• con­sent
• tips & tricks
• July 2020 Pri­va­cy Shield was over­tuned — EU data could not be on US servers
• new pri­va­cy frame­work as July 2023; you can use GA with­out the US data stor­age problem

• Is GA4 GDPR compliant?
  • It depends… you need to do some addi­tion­al steps
    • make sure GA fires scripts only after the user’s consent
    • keep non-com­pli­ant fea­tures turned off
    • Enter a data pro­cess­ing agree­ment with Google, and dis­close with­in a pri­va­cy policy
    • Do not send PII through Google
• GDPR fines are applied to the ​“under­tak­ings” and not one com­pa­ny. Any enti­ty involved in the vio­la­tion is part of the undertaking.
• Is it worth the cost to get the data?
  • don’t col­lect more data and fig­ure out how to use it lat­er — it can cause brand damage
  • Track­ing scripts are the lead­ing cause of web­site slowness
  • Prod­ucts like GTM put devel­op­ers and mar­keters at odds
  • Mar­ket­ing ​“suc­cess” can over­ly focus on data points, not results
  • Once con­sumer trust is lost, it’s near­ly impos­si­ble to get back
• Con­sent
  • silence is not con­tent — x’ing out of a cook­ie con­sent ban­ner does not mean con­sent, it’s a non-action. Only track data when you get actu­al resent
• min­i­mize the data requested
• con­text mat­ters — don’t ask a new vis­i­tor for a bunch of data right off the bat
• be trans­par­ent and human cen­tric in how we request it
• treat user data with care and respect
• reward qual­i­ty of data, not quantity 
• build client relationships
• “If you wouldn’t ask on the first date, don’t ask the new web­site visitor”
• Google Ana­lyt­ics alts that are GDPR compliant:
  • Fath­om
  • Mouse­flow
  • Plau­si­ble
  • Mato­mo
  • PostHog
  • Uma­mi

Day 3: Sin­gle-Track Talks #

State of Craft

Bran­don Kelly

• Recap:
  • This year P&T cel­e­brat­ed 10 years since Craft 1.0.
  • Craft has 75k licensed unique domain names (not includ­ing subdomains)
  • 8k peo­ple in Discord
  • 645 Craft 4 plu­g­ins in the store, up from 511 one year ago
  • $7M paid out to plu­g­in developers 
  • Sales steadi­ly upward trend
  • Craft Con­sole launched (update to Craft ID)
  • Craft Gen­er­a­tor — CLI tool for scaf­fold­ing plu­g­ins, mod­ules and components
  • Updat­ed CKEditor
  • Shopi­fy plu­g­in launched
  • com­merce-stripe updat­ed for lat­est Stripe inte­gra­tions, Com­merce 4.0.0
  • Craft 4.3, 4.4, 4.5
    • asset vol­ume navigation
    • activ­i­ty monitoring
    • val­i­da­tion summaries
    • work­ing toward WCAG AA com­pli­ance — ​“We will get there”
• Craft Cloud
  • it has been almost six years since they start­ed think­ing about Craft Cloud
  • excit­ing news
  • Brad Bell on the stage
  • “A scale host­ing plat­form from the team behind Craft”
  • Why are we doing this?
    • Gives them a chance to con­trol the user expe­ri­ence from the appli­ca­tion all the way to the infrastructure. 
    • No more ven­dor blam­ing because they con­trol they entire stack — soft­ware and infra
  • Sus­tain­abil­i­ty
    • P&T wants to try their best to not have a neg­a­tive impact on the environment
    • Server­less, on-demand infrastructure
  • Craft Cloud demo
    • Github source con­trol integration
    • US, EU, APAC regions
    • Brad cre­at­ed a new project in Cloud and is deploy­ing it 
  • auto-scal­able, high­ly avail­able infra
  • glob­al CDN, pow­ered by Cloudflare
  • MySQL, Post­gres
  • CICD build pipeline
  • Auto­mat­ed backups
  • Enter­prise-grade WAF
  • Auto SSL
  • Craft CLI commands
  • mul­ti­ple environments
  • on-deman queue workers
  • on-deman image transforms
  • ful­ly supported
  • Craft Pro license included
  • $260/​mo USD
  • annu­al: $240/​mo if annual
  • pri­vate invites at the end of this month
  • Read more about Craft Cloud
  • lunch n learn today with Jason and Tim to talk about plu­g­ins with Craft Cloud
• Com­merce 5
  • A major focus for Com­merce 5 has been mul­ti-store, mul­ti-cur­ren­cy sup­port — the most request­ed fea­ture they’ve had 
  • mul­ti-store
    • each store gets its own base currency
    • in the com­merce set­tings you’ll be able to add an addi­tion­al store
  • Cat­a­log pricing
    • gen­er­at­ed and stored prices in the system
    • Cat­a­log pric­ing rules: sim­i­lar to Sales sys­tems that exists in Com­merce at the moment
    • pro­mo­tion price field — no need to cre­ate a discount
    • they updat­ed the Spoke & Chain demo to use Com­merce 5 to demo the mul­ti-store functionality
    • launch­ing Q1 2024
• Craft CMS 5
  • Craft has always been about AX and con­tent modeling 
  • con­tent mod­el­ing improvements
    • con­tent stor­age refac­tor (see my notes from the Craft 5 work­shop)
      • con­tent col­umn replaces the con­tent table
    • decou­pled entry types (stand alone now)
    • Entri­fi­ca­tion
    • incep­tion fields
    • Field instances
      • reusable fields with­in the Craft con­trol panel
    • Entri­fi­ca­tions in Craft 5
      • Cat­e­gories => structure
      • Tags => chan­nel section
      • Glob­al sets => singles
      • Matrix blocks => entries 
    • Incep­tion Fields
      • no longer need­ed incep­tion field as planned
      • matrix field as entry solves this, along with View Mode toggle 
    • enable table view for matrix fields
    • inline edit­ing in every ele­ment index in Craft 5
• One more thing…
  • Long­form content
    • used to be done with matrix fields
    • but the author­ing expe­ri­ence wasn’t as good as it could be
    • it’s impor­tant to them that they solve this AX challenge
    • some solu­tions out there that are ​“Notion”-ish
      • every ele­ment is a block
    • but authors want rich text, not clean data behind the scenes
    • they want some­thing that looks like CKEditor
    • com­bine pow­er of Matrix & nest­ed entries with the sim­pler UI of CKEditor
    • Craft 5 will include a large update to CKEditor
      • CKEd­i­tor field that has entire entries embed­ded in it

Human­iz­ing UX

Lakeisha Wright

• using 10 years in urban plan­ning to approach UX strategy
• it was a seam­less expe­ri­ence mov­ing from one field to another
• She still keeps up with her two urban plan­ning certs because they help her be a bet­ter UX strategist
• What does humaiz­ing your UX strat­e­gy real­ly mean?
• Diver­si­ty mat­ter, emo­tions mat­ter, person’s past, present, and future matters
• What’s the dif­fer­ence between humans users?
• humans are complex
• users are with­in the prod­uct — human com­plex­i­ty adapts to ful­fill the product’s requirements
  • curb cuts as an exam­ple of adapt­ing a prod­uct to fit the indi­vid­ual using it
• human are permanent 
• users are tem­po­ral; once you’re a user, you stop being a user of a prod­uct (e.g. putting your phone down); the per­son being flex­i­ble to the device
• “Humans allow for the pur­suit of equity”
• “Users allow for the for pur­suit equality”
• “Humans have emo­tions that affect prod­uct use”
  • peo­ple bring their own emo­tions and emo­tion­al responses
• “Users have emo­tions tied to the product”
• one of her job as an urban plan­ner was to watch peo­ple ride trains.
• she start­ed to pick up on pat­terns on how peo­ple act­ed, includ­ing misconceptions
• when peo­ple missed their train…what did they did do? they weren’t on their phones..it was always peo­ple who were deep in thought/​daydreaming, not on their phones
• Why is UX stat­e­gy important?
• empa­thy
• inclu­siv­i­ty
• engage­ment
• “For me” mentality
• ulti­mate goal when it comes to UX
• peo­ple should think ​“this is built for me”
• 7 Prin­ci­ples of Uni­ver­sal Design (exam­ple from urban planning/​design)
  • equi­table use
  • flex­i­bil­i­ty in use
  • sim­ple and intu­itive in use
  • per­cep­ti­ble information
  • tol­er­ance for error
  • low phys­i­cal effort
  • size and space for appoach and use
• 10 Usabil­i­ty Heuris­tics for User Inter­face Design (UX ver­sion of 7 principles)
• Use the pow­er of emotions
• PS Salon — serve seniors with retire­ment communities
  • Hap­py Cog was redesign­ing the dash­board famili­ies used to enroll, etc.
  • how do the peo­ple when they’re about to use your prod­uct? some info
  • how are peo­ple feel­ign when they are start­ing to use your dash­board? more info
  • how are peopel feel­ing before they even knew this PS Salon was an option? a lot of info
    • instead of ask­ing how are they feel­ing when using the soft­ware, instead ask how they feel about the whole experience.
  • emo­tions mattered
• No one is unbiased
• lean into the bias, embrace your per­son­al experiences
• lean in with understanding
  • be self aware
  • prac­tice humility
  • chal­lenge your assumptions
  • seek diverse perspectives
• Work­ing with the over­whelm­ing nature of diversity
• under­stand your audience
• cre­ate cus­tomiz­able options
• com­muncate clearly
• gath­er con­ti­nous feedback
• Con­text Matters
• pri­or­i­tize actions
• con­tin­u­ous improvements
• have informed tradeoffs
• Ask Ques­tions
• espe­cial­ly the ​“dumb” ones
• obvi­ous questions
• she asks the obvi­ous ques­tions to make sure she’s not mak­ing assumptions
• Impact and Accountability

Light­ning Talks

• Matt Bloom­field
  • US Cham­ber of Commerce
  • mul­ti­ple sites, sim­i­lar builds
  • com­po­nent dri­ven development
  • Com­po­nent library requirements
    • run in PHP using Twig
    • means of view­ing and test­ing components
    • well orga­nized
  • they tried to use Frac­tal but they had prob­lems with TwigJS
  • they built their own com­po­nent viewer
    • end users see all com­po­nents available
    • devel­op­er see impe­men­ta­tion details
    • cypress tests against components
    • aus­tom acceesi­bil­i­ty via AXE
    • visu­al­ly com­pare changes across environments
• John Rip­meester
  • Brik agency
  • Nomios
    • 8 sites, mul­ti­ple languages
    • mar­ket­ing teams across world
    • 105,000 ele­ments per language
    • Plu­g­ins: Blitz, SEO­mat­ic, Rich Vari­ables, Site Copy X
    • sav­ing an ele­ment kicks off a lot of queue jobs, and they hit a job queue of over 46k jobs
  • Egil Fujikawa Nes
    • Enter­prise Craft Pow­ered by SAP

Pix­el & Ton­ic Q&A

I was mod­er­at­ing the pan­el dis­cus­sion, so I couldn’t take notes.

Plan­et Sav­ing Pix­els: Cre­at­ing a Web That is Good for Peo­ple and the Planet

Lucy Williams

Sus­tain­able web design is an approach to design­ing web ser­vices that are good for peo­ple and the planet.

If the inter­net was a coun­try, it would be the 4^th most pol­lut­ing coun­try in the world.

• how do we mea­sure the impact?
  • page weight, data trans­der, serv­er requests
  • page views, time on a page
  • ener­gy cosumed to run the servers
• The Orig­i­nal Web­site Car­bon calculator
• Bea­con and Ecograd­er are oth­er options
• stream­line user journeys
• don’t load as much con­tent unless it’s real­ly nec­es­sary (relat­ed arti­cles, side­bar con­tent, etc)
• opti­mize web typography
  • use sys­tem fonts, if possible
  • use few­er weights
  • cus­tomize those fons weights
  • con­vert WOFF — much faster 
  • remove unnecce­sary languages
  • only use sub­set of char­ac­ters that are actu­al­ly need­ed by the site
  • self host font files
• dark colous use less energy
  • blue col­ors use more ener­gy than red or green
  • reduc­ing col­or vari­a­tion in imagery reduces file size
• opti­mize media
  • only send down the pipe the larest size needed
• opti­mize page size
• Green Web Foun­da­tion — find green hosting

How I Saved My Agency From Myself

Stephen Cal­len­der

• Prof­it First Method
• Self-report­ing for developers