Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lass Deinen Computer die langweiligen Sachen ma...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Heiko Mamerow Heiko Mamerow
April 18, 2016
Programming
0
300

Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend Coden

Slides meines Vortrages auf dem WordCamp Nürnberg 2016

Avatar for Heiko Mamerow

Heiko Mamerow

April 18, 2016
Tweet

More Decks by Heiko Mamerow

See All by Heiko Mamerow
Datenkompression - Ein praktischer Leitfaden für den Einstieg
Avatar for Heiko Mamerow heikomamerow
0
530
Stress lass nach
Avatar for Heiko Mamerow heikomamerow
0
97
Das kleine 1x1 der Web-Performance
Avatar for Heiko Mamerow heikomamerow
1
1.2k
Einführung in Grunt
Avatar for Heiko Mamerow heikomamerow
1
270

Other Decks in Programming

See All in Programming
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.2k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
390
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
150
2年のAppleウォレットパス開発の振り返り
Avatar for muno92 muno92
PRO
0
190
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
1.9k
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
550
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
5.9k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
540
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
160
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
140
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
130

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
110
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
600
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
140
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k

Transcript

  1. Lass Deinen Computer die langweiligen Sachen machen! Automatisierung beim Frontend

    Coden #wcnbg XVI-IV-MMXVI @heikomamerow

  2. Heiko Mamerow • Frontend Entwickler • Individuelle Themes • WordPress

    Genie$er

  3. ES IST NICHT EINFACH!!!

  4. Übersicht I. Die langweiligen Sachen II. Automatisierung III.How To

  5. Lass Deinen Computer die langweiligen Sachen machen!

  6. Die langweiligen Sachen • Browser aktualsieren • Formatieren (beautify/uglify) •

    Präfixe • Linting/Testen • Deploy (Dev, Test, Client) • Zusammenfassen • Redundanz • Umrechnung (PX–EM–REM-%) • Preprozessoren • Bilder optimieren • CSS Sprites

  7. Die langweiligen Sachen Wiederholung Zeitaufwand Fehlerquelle

  8. None

  9. Automatisierung => Task Runner

  10. Task Runner „Automation, performing repetitive tasks like minification, compilation, unit

    testing and linting.“ Quelle: Grunt

  11. Taskrunner

  12. How To Linux https://github.com/nodesource/distributions Mac OS X, Windows https://nodejs.org/en/download/stable

  13. How To I. npm init II. package.json III. Package IV.

    scripts V. Tasks

  14. package.json

  15. Packages • https://www.npmjs.com • Installation: npm install --save-dev [ packagename

    ]

  16. Packages: autoprefixer, postcss-cli

  17. scripts / tasks

  18. Lets try… ;-)

  19. Fragen?

  20. None

  21. Vielen Dank! :-)

  22. Fernsehturm (Slide 2) Urheber: von Kazuyanagae (Eigenes Werk) [CC BY-SA

    4.0 ( http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons Bildnachweis