Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS:...
Transcript of Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS:...
![Page 1: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/1.jpg)
Web Dev in 2019
![Page 2: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/2.jpg)
Yesterday was just the beginning.
![Page 3: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/3.jpg)
Where to go next?
![Page 4: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/4.jpg)
What we’ll take a peek at now
● JavaScript● More CSS● Testing● Build tools● Backend
![Page 5: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/5.jpg)
JavaScript
![Page 6: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/6.jpg)
The web tech stack
● Content○ HTML
● Design / Layout○ CSS
● Behaviour / Interactivity○ JavaScript
![Page 7: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/7.jpg)
A teaser for the upcoming talk<button>Click me!</button>
<!-- Let's make the button do something with JavaScript! -->
<script>
document.querySelector('button').onclick = function() {
alert('Hello world!');
}
</script>
![Page 8: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/8.jpg)
More CSS
![Page 9: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/9.jpg)
Your CSS will probably grow.img { /*... */ } /* all images... */
img.hero { /* ... */ } /* the big landing page image */
img.hero2 { /* ... */ } /* another big image? */
.hero-container { /* ... */ } /* a container for big images? */
.herocontainer1 { /* ... */ } /* I give up. HELP! */
![Page 10: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/10.jpg)
Methods to keep it tidy
● OOCSS: Object-oriented CSS● BEM: Block-Element-Modifier● ACSS: Atomic CSS● SMACSS: Scalable & modular architecture
![Page 11: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/11.jpg)
A sample for BEM.product { /*...*/ } /* a product tile */
.product__img { /*...*/ } /* the product image */
.product__title { /*...*/ } /* the product title */
/* modified styles for highlighted (featured) products */
.product--featured { /*...*/ }
.product__title--featured { /*...*/ }
![Page 12: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/12.jpg)
Testing
![Page 13: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/13.jpg)
Automated testing
● Encourages better code design● Faster development time, higher confidence● Test categories
○ Unit tests○ End-to-end tests
![Page 14: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/14.jpg)
Test example: Unit testtest('adds 1 + 2 and returns 3', function() {
expect(add(1, 2)).toBe(3);
});
test('adds -1 and 1 and returns 0', function() {
expect(add(-1, 1)).toBe(0);
});
![Page 15: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/15.jpg)
Test example end-to-end testdescribe('Shop page', function() {
it('clicking "buy" goes to the checkout page', function() {
cy.visit('https://example.org/shop')
cy.contains('buy').click()
// Should be on a new URL which includes '/checkout'
cy.url().should('include', '/checkout')
})
})
![Page 16: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/16.jpg)
Testing tools
● Jest● Karma● Jasmine● Cypress● Ava
![Page 17: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/17.jpg)
Build tools
![Page 18: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/18.jpg)
Automate what takes you time
● You often have to repeat certain tasks● Examples
○ Check if your code is correct & looks right○ Resize images○ Run your tests○ Minimize your code
![Page 19: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/19.jpg)
Use build tools to do that automatically
● Webpack● Gulp● Grunt● npm scripts
![Page 20: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/20.jpg)
Backend
![Page 21: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/21.jpg)
When you need to do more...
● Not everything can be done in the browser● Not everything should be done in the browser● Backends let you store data & do processing
○ Process a transaction○ Store user data
![Page 22: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/22.jpg)
Backend programming
● JavaScript (node.js)● Ruby● Python● PHP● Java
![Page 23: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/23.jpg)
A note on tools
![Page 24: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/24.jpg)
Web Dev tooling
![Page 25: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/25.jpg)
A small selection :)
![Page 26: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/26.jpg)
Different tools solve different problems.
![Page 27: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/27.jpg)
Tools...
● It’s good to have a toolbox● Use the simplest tool that solves the problem● If a tool makes your life harder, try another● Don’t listen to the haters
![Page 28: Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*](https://reader034.fdocuments.us/reader034/viewer/2022042302/5ecd1565381ce046273d9090/html5/thumbnails/28.jpg)
Keep learning & make the web