Similar Posts
WPGR: Learn about the Developer Tools in your browser
Firefox Developer Tools – Topher Inspector – look at HTML/CSS behind a web page Responsive Display Mode Console – look for errors (security/resource loading issues) Different results depending on when you open – loading vs loaded Debugger – for JavaScript Style Editor – for changing CSS Performance – monitoring page load performance Network – Storage – Local browser items, page cache, cookies, etc. Chrome Developer Tools – Brian Shortcuts – keyboard commands to open dev tools (CTRL-OPT-I[Mac OS X]/CTRL-SHIFT-I[ChromeOS]) Docking – SHIFT-CMD-D(Mac OS X) / CTRL-SHIFT-D(Chrome OS) Elements (inspector) Styles – Filter allows for viewing specific CSS states (i.e. :hover) Add specific element styles Color Swatch – has a color picker, can save swatches Computed Styles View a visual representation of spacing See the CSS that…
Lifelong Learning As A Developer
“if you’re not enjoying learning new things about your job, what are you doing working that job in the first place?” – Bruno Skvorc
WordCamp GR 2017 – Development With Material Design – Matt Christensen
Matt Christensen – https://www.mattchristensen.net/ History Announced 2014 2015 Most Google apps use it Intended for Android Focused on Native Mobile, web was an afterthought What Is It? – https://material.io/ A metaphor – think paper Uniting Style – look the same everywhere Design as a physical medium Paper and Ink Seams & Edges Motion has meaning Web Features – https://getmdl.io/components/ Cards – base component (could be used as a means to layout “table” data) Drawers Snackbar – nice feedback component, can hide automatically Tables Out of the box there is styling but not responsive jQuery Alternative – https://datatables.net/ Frameworks MDL (Material Design) Materialize – http://materializecss.com/ (stay away from Materialize WP, not much development) MDLWP – http://mdlwp.com/ (most features in commercial) Bootstrap Material Design – http://fezvrasta.github.io/bootstrap-material-design/ How Do You Design? What are you…