High Performance CSS

Editor's Notes

1. Antony Kennedy Worked for BBC, C4, Sky, Disney, Mercedes, Shell, Tescos, Vodafone, Philips, and someone I can’t tell you about (Apple).
2. Most important thing - be consistent. Agree coding styles. So, let’s go through them.
3. Most important thing - be consistent. Agree coding styles. So, let’s go through them.
4. Most important thing - be consistent. Agree coding styles. So, let’s go through them.
5. Most important thing - be consistent. Agree coding styles. So, let’s go through them.
6. Most important thing - be consistent. Agree coding styles. So, let’s go through them.
7. Naming conventions - pick something that makes sense. Use camel case. Save special characters for special situations.
8. Semantics. Don’t use underscore. Use hyphens as a separator – namespacing, OOCSS
9. Semantics. Don’t use underscore. Use hyphens as a separator – namespacing, OOCSS
10. Semantics. Don’t use underscore. Use hyphens as a separator – namespacing, OOCSS
11. We don’t need things like this.
12. We don’t need things like this.
13. Make your CSS portable, and references shorter Google likes hyphens Spaces == %20 == work Common abbreviations always understandable
14. Make your CSS portable, and references shorter Google likes hyphens Spaces == %20 == work Common abbreviations always understandable
15. Make your CSS portable, and references shorter Google likes hyphens Spaces == %20 == work Common abbreviations always understandable
16. Make your CSS portable, and references shorter Google likes hyphens Spaces == %20 == work Common abbreviations always understandable
17. This huge URL–
18. No quotes. abbreviations. No repetition. Hyphen instead of space.
19. So, let’s go through them.
20. So, let’s go through them.
21. So, let’s go through them.
22. So, let’s go through them.
23. So, let’s go through them.
24. So, let’s go through them.
25. Color can be “black” - easier to read top left same as 0 0 margin can use shorthand, and 0 background - usse shorthand. color can be shortened border can be shortened no 0 needed
30. Antony Kennedy Run a business called Silver Squid Agile Evangelist. Big fan of process. Investigated and experimented with agile processes at several companies and no-one reports bugs properly. Worked for BBC, Channel 4, Sky
31. On older computer punch cards were used to store data. No hard drives or magnetic medium. Data was represented as little holes in cards. In 1947, Grace Murray Hopper was working on the Harvard University Mark II Aiken Relay Calculator (a primitive computer). On the 9th of September, 1947, when the machine was experiencing problems, an investigation showed that there was a moth trapped between the points of Relay #70, in Panel F. The word went out that they had "debugged" the machine and the term "debugging a computer program" was born In today’s web 2.0 world, we have more complicated software, and more bugs. We have dedicated teams of testers just to find them.
32. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
33. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
34. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
35. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
36. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
37. What’s a build script? Know about gif, svg, png, jpg and the fireworks hack Use your tools to compress You can use imageoptim a lot of times all browsers/servers support gzip
38. It’s ugly. but it’s tiny. only for prod.
40. So, let’s go through them.
41. So, let’s go through them.
42. So, let’s go through them.
43. So, let’s go through them.
44. So, let’s go through them.
45. BBC’s ID cookie big enough to map all particles in the known universe
46. BBC’s ID cookie big enough to map all particles in the known universe
47. BBC’s ID cookie big enough to map all particles in the known universe
48. BBC’s ID cookie big enough to map all particles in the known universe
49. BBC’s ID cookie big enough to map all particles in the known universe
50. BBC’s ID cookie big enough to map all particles in the known universe
51. BBC’s ID cookie big enough to map all particles in the known universe
58. BBC’s ID cookie big enough to map all particles in the known universe
59. BBC’s ID cookie big enough to map all particles in the known universe
60. BBC’s ID cookie big enough to map all particles in the known universe
61. BBC’s ID cookie big enough to map all particles in the known universe
62. BBC’s ID cookie big enough to map all particles in the known universe
63. BBC’s ID cookie big enough to map all particles in the known universe
64. So, let’s go through them.
65. So, let’s go through them.
66. So, let’s go through them.
67. So, let’s go through them.
68. So, let’s go through them.
69. Slides will be on my blog later. Questions?