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
66
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
120
Front End Workflow
mattbailey
2
1.2k
Workshop: Making Responsive Websites Fast
mattbailey
0
53
Other Decks in Technology
See All in Technology
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
AOAI Dev Day - Opening Session
yoshidashingo
2
430
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
190
エンジニア向け会社紹介資料
caddi_eng
14
220k
Featured
See All Featured
It's Worth the Effort
3n
181
27k
GraphQLとの向き合い方2022年版
quramy
36
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Building Your Own Lightsaber
phodgson
101
5.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
GitHub's CSS Performance
jonrohan
1026
450k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
YesSQL, Process and Tooling at Scale
rocio
166
14k
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