Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GPMD - Our Journey
Search
Matt Bailey
April 22, 2015
Technology
0
71
GPMD - Our Journey
Our technical journey over the past three years - where we've come from and what's next.
Matt Bailey
April 22, 2015
Tweet
Share
More Decks by Matt Bailey
See All by Matt Bailey
How I acheived a pretty good Google PageSpeed Insights score
mattbailey
1
130
Front End Workflow
mattbailey
2
1.3k
Workshop: Making Responsive Websites Fast
mattbailey
0
56
Other Decks in Technology
See All in Technology
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
350
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
240
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
1
230
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
300
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
250
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
100
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
210
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
TypeScript 上達の道
ysknsid25
3
430
An introduction to Claude Code SDK
choplin
3
3.3k
Building GoReleaser - from shell script to paid product
caarlos0
0
260
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Site-Speed That Sticks
csswizardry
10
720
A Tale of Four Properties
chriscoyier
160
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
GitHub's CSS Performance
jonrohan
1031
460k
A designer walks into a library…
pauljervisheath
207
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing for Performance
lara
610
69k
Transcript
Our Journey
Where have we come from?
Design • Style tiles • More focus on component based
design • Move into browser quicker
Responsive Web Design • First RWD site: The Watch Gallery
• One site for every screen • Mobile first and content first • Media queries • Adaptive and fluid layouts
CSS Preprocessors • First Less… • … Then Sass •
Huge increase in efficiency • Like working with a proper programming language
Frontend Frameworks • HTML5 Boilerplate • Bootstrap • Foundation •
Time saving… • … But can lead to ‘bloat’
CSS Coding Style • BEM (Block, Element and Modifier) •
ITCSS (Inverted Triangle CSS) • Clearer, cleaner code • Much more modular • Easier to reuse
New CSS Stuff • The picture element • Flexbox
Task Management • Grunt • BIMA tasks: autoprefixer, clean, concat,
concurrent, copy, imagemin, jshint, modernizr, sass, scsslint, symlink, uglify and watch.
Package Management • Composer • NPM • Bower
Documentation • Style guides • Pattern libraries • Component libraries
• Hackpad
Automation • Set up scripts • environment specific frontend builds
• Githooks • Deployment with Fabric
Testing • TDD • BDD
Virtual Machines • Vagrant • Great idea in principle •
Worked well for a time • Mostly borked now • Need to simplify and lock down dependencies
Performance • Critical Rendering Path • Code quality • Code
efficiency • Code reviews
What’s next?
More Efficiency
More Automation • Magento and SilverStripe ‘products’ • Tools like
Yeoman for project scaffolding
More Documentation • Automated style guides • Automated component libraries
• Git merge requests
Modular, Reusable Code • Our own Github projects, Bower components,
Composer modules • Less time spent on repetitive tasks • Less reliance on frameworks • Leaner, better code
More Performance • The new ‘in’ thing • It’s not
going to go away • Tools such as sitespeed.io • StyleStats
More Testing • Visual Regression Testing • PhantomCSS • BackstopJS
Code Style & Quality • More scss-lint • Merge requests
and code reviews
More Virtual Machines • Done properly • Vagrant, Docker? •
Virtual Box, VMWare? • In the cloud: Koding, Cloud9?
Better Deployment • Build server? • CI?
We’ve come a long way
We’re going even further
It requires a team effort
Thank you for all your hard word
Goodbye