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
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
400
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
570
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.4k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
150
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
400
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.9k
KCD Lima: eBee in Peru!
lizrice
0
100
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
170
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
120
PHPでResult型やってみよう
higaki_program
0
200
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
230
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
220
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Building an army of robots
kneath
306
45k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
116
6.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Why Our Code Smells
bkeepers
PRO
337
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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