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

Lass Deinen Computer die langweiligen Sachen ma...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Heiko Mamerow Heiko Mamerow
April 18, 2016
Programming
320
0

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

More Decks by Heiko Mamerow

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

Other Decks in Programming

See All in Programming
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
Avatar for yasunori yasunori0418
1
150
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
130
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
510
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
Avatar for shiro seike seike460
PRO
0
140
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k
Coding as Prompting Since 2025
Avatar for Jimmy Moon ragingwind
0
830
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
Avatar for Terisuke terisuke
1
470
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
220
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
550
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
110
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
0
210
CDK Deployのための ”反響定位”
Avatar for watany watany
4
780

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
150
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
230
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
520
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
300
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
Between Models and Reality
Avatar for mayunak mayunak
3
270
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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