Are you over 18 and want to see adult content?
More Annotations
A complete backup of loyaltyplant.com
Are you over 18 and want to see adult content?
A complete backup of girlwithcurves.com
Are you over 18 and want to see adult content?
A complete backup of footballtradedirectory.com
Are you over 18 and want to see adult content?
A complete backup of cardinalcommerce.com
Are you over 18 and want to see adult content?
A complete backup of theqgentleman.com
Are you over 18 and want to see adult content?
Favourite Annotations
A complete backup of www.sports.ru/football/1083732416.html
Are you over 18 and want to see adult content?
Text
‘SCOPE’ IN CSS
The first line reads foo.This is because foo is defined in global scope and is later logged in global scope.bar is also logged in global scope, but is defined in ‘local’ scope, inside myFunction(), which is why the second line reads Uncaught ReferenceError: bar is not defined.We don’t have access to the bar variable because it exists in a different scope. HTML ELEMENTS, TAGS AND ATTRIBUTES 11 January, 2011 HTML elements, tags and attributes. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Elements; Tags; Attributes; This article is only a small one, and to the vast majority it won’t be of much use, but I’m still astounded that today, in 2011, professional web designers and developers are still making this fundamental mistake. NAMING UI COMPONENTS IN OOCSS 26 March, 2014 Naming UI components in OOCSS. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Using Sass’ @extend data-* attributes One of the biggest—if not most common—complaints about OOCSS is its use of ‘insemantic classes’. FULLY FLUID, RESPONSIVE CSS CAROUSEL To make this fluid is so simple. The viewport needs to fill its container, so this gets width:100%;. Easy. One pane needs to fit nicely in the viewport, so this needs to occupy 100% of the viewport. With this in mind. We have five panes, remember, so the ul needs a width of 500%. Five panes that are each the same width as the viewportgives
HASHED CLASSES IN CSS 28 May, 2013 Hashed classes in CSS. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Featured case study: NHS; I gave a talk at Beyond Tellerrand yesterday in which I shared some advice concerning the use of IDs in CSS, something which I vehemently recommend you avoid. Vitaly, who was in the audience, tweeted a snippet of the advice which was, unfortunately, a little out ofcontext.
PRAGMATIC, PRACTICAL, AND PROGRESSIVE THEMING WITH CUSTOM Let’s look at a few things::root {}: Custom properties must be defined within a scope.Because they follow the same syntax as a regular declaration (i.e. : ;), they have to exist inside a ruleset (in other words, inside of some curly braces).In order to make a variable available globally, we can just define it in the :root {} ruleset; to make it available only in our nav, we CSS: CAMELCASE SERIOUSLY SUCKS! 6 December, 2010 CSS: CamelCase Seriously Sucks! Written by Harry Roberts on CSS Wizardry.. Table of Contents. CSS is a hyphen-delimited syntax. XHTML is a lower-case language; Inconsistency within your ownrules
IPHONE CSS—TIPS FOR BUILDING IPHONE WEBSITES Things to remember. There are a few key things to remember when developing CSS for the iPhone: Avoid explicit absolute widths – where possible you should use percentage widths. Linearise everything – where possible, remove all floats. We want no content side-by-sideunnecessarily.
CSS ARCHITECTURE AND PERFORMANCE ENGINEERING Articles. There are 225 articles on this blog. Find them all on the archive page.. 26 February, 2021 Measuring Network Performance in Mobile Safari; 3 November, ABOUT ME – CSS WIZARDRY – WEB PERFORMANCE OPTIMISATION The CSS is written in Sass, and built on top of inuitcss. inuitcss is a free, open-source, Sass-based, OOCSS framework with a strong focus on performance, scalability, and a small footprint. This is then built into ITCSS, a CSS architecture of mine which is designed to aid CHOOSING THE CORRECT AVERAGECSSWIZARDRY-GRIDS
The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifthmajor grid.
CREATE A CENTRED HORIZONTAL NAVIGATION 29 January, 2011 Create a centred horizontal navigation. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; Update; Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width?You could use text-align:center; but that won’t work on 100%-width block-level elements either that’ll only work on text-level CREATING A PURE CSS DROPDOWN MENU KEEP YOUR CSS SELECTORS SHORT There we can see pretty clearly that in the first example, the browser has to look out for four things, the .nav class, then the .header class, then the body element and then, finally, the html element (browsers read selectors right-to-left).. With the second example the browser only needs to look for one thing; the .nav class. The browser has four times less work to do to match that selector. HTML ELEMENTS, TAGS AND ATTRIBUTES USING THE ELEMENT AS A WRAPPER 23 January, 2011 Using the element as a wrapper. Written by Harry Roberts on CSS Wizardry.. Table of Contents. This is a tiny little blog post that a lot of MULTIPLE COLUMN LISTS USING ONE CSS ARCHITECTURE AND PERFORMANCE ENGINEERING Articles. There are 225 articles on this blog. Find them all on the archive page.. 26 February, 2021 Measuring Network Performance in Mobile Safari; 3 November, ABOUT ME – CSS WIZARDRY – WEB PERFORMANCE OPTIMISATION The CSS is written in Sass, and built on top of inuitcss. inuitcss is a free, open-source, Sass-based, OOCSS framework with a strong focus on performance, scalability, and a small footprint. This is then built into ITCSS, a CSS architecture of mine which is designed to aid CHOOSING THE CORRECT AVERAGECSSWIZARDRY-GRIDS
The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifthmajor grid.
CREATE A CENTRED HORIZONTAL NAVIGATION 29 January, 2011 Create a centred horizontal navigation. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; Update; Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width?You could use text-align:center; but that won’t work on 100%-width block-level elements either that’ll only work on text-level CREATING A PURE CSS DROPDOWN MENU KEEP YOUR CSS SELECTORS SHORT There we can see pretty clearly that in the first example, the browser has to look out for four things, the .nav class, then the .header class, then the body element and then, finally, the html element (browsers read selectors right-to-left).. With the second example the browser only needs to look for one thing; the .nav class. The browser has four times less work to do to match that selector. HTML ELEMENTS, TAGS AND ATTRIBUTES USING THE ELEMENT AS A WRAPPER 23 January, 2011 Using the element as a wrapper. Written by Harry Roberts on CSS Wizardry.. Table of Contents. This is a tiny little blog post that a lot of MULTIPLE COLUMN LISTS USING ONE LET’S WORK TOGETHER Let’s Work Together. Harry’s tailored workshop was nothing short of fantastic, and a real eye-opener, helping our team level up their scalable CSS architecture skills. The entire team left it learning something new, and to say that what was covered will have a large impact on our work is an understatement. We can’t recommend himenough.
CSSWIZARDRY-GRIDS
The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifthmajor grid.
THE FASTEST GOOGLE FONTS Google Fonts is fast. Now it’s faster. Much faster. These results are tremendous. I’m really happy with these outcomes. First paint was a staggering 1.6–1.7s improvement on our baseline, and up to a 1.9s improvement on the previous variant in the case of CSS Wizardry.First contentful paint was improved as much as 2.8s against our baseline, and Lighthouse scores hit 100 for the first time. FULLY FLUID, RESPONSIVE CSS CAROUSEL To make this fluid is so simple. The viewport needs to fill its container, so this gets width:100%;. Easy. One pane needs to fit nicely in the viewport, so this needs to occupy 100% of the viewport. With this in mind. We have five panes, remember, so the ul needs a width of 500%. Five panes that are each the same width as the viewportgives
HASHED CLASSES IN CSS 28 May, 2013 Hashed classes in CSS. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Featured case study: NHS; I gave a talk at Beyond Tellerrand yesterday in which I shared some advice concerning the use of IDs in CSS, something which I vehemently recommend you avoid. Vitaly, who was in the audience, tweeted a snippet of the advice which was, unfortunately, a little out ofcontext.
THE THREE TYPES OF DASH The en dash – The en dash (–)–so named because it is half the width of a capital ‘M’ (an ‘n’)–has altogether different uses to the em dash.The en dash is used in ranges, for example: 6–10 years; July 10–August 1 2009; pp. 40–42 §§ 12–13 Read more specific guidelines on Wikipedia.. The hyphen. The purpose of the hyphen (-) is to join two words–for example ANNOTATED S IN HTML5 AND CSS 3 June, 2011 Annotated s in HTML5 and CSS. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; The code. The HTML; The CSS; A couple of things to note; I’ve never really been one for CSSexperiments.
‘SCOPE’ IN CSS
The first line reads foo.This is because foo is defined in global scope and is later logged in global scope.bar is also logged in global scope, but is defined in ‘local’ scope, inside myFunction(), which is why the second line reads Uncaught ReferenceError: bar is not defined.We don’t have access to the bar variable because it exists in a different scope. CSS: CAMELCASE SERIOUSLY SUCKS! 6 December, 2010 CSS: CamelCase Seriously Sucks! Written by Harry Roberts on CSS Wizardry.. Table of Contents. CSS is a hyphen-delimited syntax. XHTML is a lower-case language; Inconsistency within your ownrules
THE OPEN/CLOSED PRINCIPLE APPLIED TO CSS One way of dealing with objects in an OO language is the open/closed principle , which states that software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification. By sticking to this we know that our base objects themselves will never change; they are closed for modification. ABOUT ME – CSS WIZARDRY – WEB PERFORMANCE OPTIMISATION The CSS is written in Sass, and built on top of inuitcss. inuitcss is a free, open-source, Sass-based, OOCSS framework with a strong focus on performance, scalability, and a small footprint. This is then built into ITCSS, a CSS architecture of mine which is designed to aid CHOOSING THE CORRECT AVERAGECSSWIZARDRY-GRIDS
The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifthmajor grid.
THE FASTEST GOOGLE FONTS The median TTFB (including request queueing, DNS, TCP, TLS, and server time) for the Google Fonts CSS file across all tests was 1406ms. Conversely, the median download time for the CSS file was just 9.5ms—it took 148× longer to get to the headers of the file than it SELF-HOST YOUR STATIC ASSETS On a high latency connection, network overhead totals a whopping 5.037s. All completely avoidable. Full test. Moving the assets onto our own infrastructure brings load times down from around 5.4s to just 3.6s. By self-hosting our static assets, we don’t need to open any more connections. Full test. KEEP YOUR CSS SELECTORS SHORT There we can see pretty clearly that in the first example, the browser has to look out for four things, the .nav class, then the .header class, then the body element and then, finally, the html element (browsers read selectors right-to-left).. With the second example the browser only needs to look for one thing; the .nav class. The browser has four times less work to do to match that selector. USING THE ELEMENT AS A WRAPPER 23 January, 2011 Using the element as a wrapper. Written by Harry Roberts on CSS Wizardry.. Table of Contents. This is a tiny little blog post that a lot of CREATE A CENTRED HORIZONTAL NAVIGATION 29 January, 2011 Create a centred horizontal navigation. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; Update; Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width?You could use text-align:center; but that won’t work on 100%-width block-level elements either that’ll only work on text-level CREATING A PURE CSS DROPDOWN MENU MULTIPLE COLUMN LISTS USING ONE ABOUT ME – CSS WIZARDRY – WEB PERFORMANCE OPTIMISATION The CSS is written in Sass, and built on top of inuitcss. inuitcss is a free, open-source, Sass-based, OOCSS framework with a strong focus on performance, scalability, and a small footprint. This is then built into ITCSS, a CSS architecture of mine which is designed to aid CHOOSING THE CORRECT AVERAGECSSWIZARDRY-GRIDS
The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifthmajor grid.
THE FASTEST GOOGLE FONTS The median TTFB (including request queueing, DNS, TCP, TLS, and server time) for the Google Fonts CSS file across all tests was 1406ms. Conversely, the median download time for the CSS file was just 9.5ms—it took 148× longer to get to the headers of the file than it SELF-HOST YOUR STATIC ASSETS On a high latency connection, network overhead totals a whopping 5.037s. All completely avoidable. Full test. Moving the assets onto our own infrastructure brings load times down from around 5.4s to just 3.6s. By self-hosting our static assets, we don’t need to open any more connections. Full test. KEEP YOUR CSS SELECTORS SHORT There we can see pretty clearly that in the first example, the browser has to look out for four things, the .nav class, then the .header class, then the body element and then, finally, the html element (browsers read selectors right-to-left).. With the second example the browser only needs to look for one thing; the .nav class. The browser has four times less work to do to match that selector. USING THE ELEMENT AS A WRAPPER 23 January, 2011 Using the element as a wrapper. Written by Harry Roberts on CSS Wizardry.. Table of Contents. This is a tiny little blog post that a lot of CREATE A CENTRED HORIZONTAL NAVIGATION 29 January, 2011 Create a centred horizontal navigation. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; Update; Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width?You could use text-align:center; but that won’t work on 100%-width block-level elements either that’ll only work on text-level CREATING A PURE CSS DROPDOWN MENU MULTIPLE COLUMN LISTS USING ONE CSS ARCHITECTURE AND PERFORMANCE ENGINEERING Articles. There are 225 articles on this blog. Find them all on the archive page.. 26 February, 2021 Measuring Network Performance in Mobile Safari; 3 November, ABOUT ME – CSS WIZARDRY – WEB PERFORMANCE OPTIMISATION About Harry Roberts’ work, abilities, and services. About Me. Hi there, I’m Harry. I am an independent Consultant Web Performance Engineer from Leeds, UK. I help some of the world’s largest and most respected organisations deliver faster and more reliable experiencesto their customers.
WEB PERFORMANCE CONSULTANCY It’s my job to help you find out. Consultancy engagements are designed for specific clients and projects, but they all combine some or all of the following: Analysis: You can’t fix what you can’t measure. Let’s work out just how site-speed affects your business. Once we have an idea of exactly what web performance means for you,we’re
HTML ELEMENTS, TAGS AND ATTRIBUTES 11 January, 2011 HTML elements, tags and attributes. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Elements; Tags; Attributes; This article is only a small one, and to the vast majority it won’t be of much use, but I’m still astounded that today, in 2011, professional web designers and developers are still making this fundamental mistake. CSS ARCHITECTURE AND PERFORMANCE ENGINEERING Harry gave the team a strong footing for identifying performance issues on iPlayer. With his knowledge, we were able to roll out quick fixes to our audiences without‘SCOPE’ IN CSS
The first line reads foo.This is because foo is defined in global scope and is later logged in global scope.bar is also logged in global scope, but is defined in ‘local’ scope, inside myFunction(), which is why the second line reads Uncaught ReferenceError: bar is not defined.We don’t have access to the bar variable because it exists in a different scope. CREATING A PURE CSS DROPDOWN MENU 17 February, 2011 Creating a pure CSS dropdown menu. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Demo; The concept; The markup; The CSS. The nested lists; Final word; In redeveloping the Venturelab site we became increasingly aware that there was a lot of content that needed navigating extremely simply and fairly rapidly. HASHED CLASSES IN CSS 28 May, 2013 Hashed classes in CSS. Written by Harry Roberts on CSS Wizardry.. Table of Contents. Featured case study: NHS; I gave a talk at Beyond Tellerrand yesterday in which I shared some advice concerning the use of IDs in CSS, something which I vehemently recommend you avoid. Vitaly, who was in the audience, tweeted a snippet of the advice which was, unfortunately, a little out ofcontext.
PURE CSS CONTENT FILTER Pure CSS Content Filter. . What started off as a drunken excitable, 2am experiment in ‘I wonder if’ has actually turned out to be quite a compelling and interesting bit of functionality: filtering content using only CSS. By using CSS’ :target pseudo-selector, we can work out what a user has clicked on, and by using the adjacentsibling
IPHONE CSS—TIPS FOR BUILDING IPHONE WEBSITES Things to remember. There are a few key things to remember when developing CSS for the iPhone: Avoid explicit absolute widths – where possible you should use percentage widths. Linearise everything – where possible, remove all floats. We want no content side-by-sideunnecessarily.
Skip to main contentCSS Wizardry Menu
* Close
* Home
* About
* Services
* Workshops and Training* Consultancy
* Speaking
* Performance Audits* Downloads
* Case Studies
* Testimonials
* Contact
WEB PERFORMANCE OPTIMISATION, CONSULTANCY, AND ENGINEERING*
AUDITS
YOUR WEBSITE IS TOO SLOW AND I KNOW WHY. Web performance is big business for any industry: from recouping lost sales to increasing conversions; reducing running costs to user retention; better SEO to lowering your environmental impact. Let’s work together to identify and fix your blind-spots.*
CONSULTANCY
WHAT IS YOUR WEB PERFORMANCE STRATEGY? How much does a 1s slowdown cost you? How do you measure its impact? Is your monitoring effective or even appropriate? How much is web performance worth to your bottom line? Together, we can work out answers to all of those questions andmore.
*
TRAINING
WHAT’S BETTER THAN ONE OF ME? A TEAM OF ME. Let me show your engineers how to find and fix all of the things that I can. Get your team self-sufficient, equipped with all of the right tools and knowledge to be your own in-house web performance experts. Never runslowly again.
*
Learn more about my services or Hireme
TRUSTED BY:
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
> Harry gave the team a strong footing for identifying performance > issues on iPlayer. With his knowledge, we were able to roll out > quick fixes to our audiences without the need for big rewrites, all > within just two days. > MATTHEW BURROWS , BBC IPLAYER*
> Harry helped our team level up their scalable CSS architecture > skills, and to say that he had a large impact on our work is an > understatement. We can’t recommend him enough. > ADDY OSMANI , GOOGLE*
> Harry’s workshop was excellent; we left with tons of new ideas and > techniques to improve both the CSS architecture and overall > performance of Behance and Adobe Portfolio> .
> JACKIE BALZER , ADOBE*
> There’s a short list of people I whole-heartedly recommend for > detailed performance work; Harry is right up there at the top.> TIM KADLEC
*
> The CSS architecture I learned from Harry on the NHS project > has changed the way I> work. Bravo!
> JOSH NESBITT
ARTICLES
There are 225 articles on this blog. Find them all on the archive page.
* 26 February, 2021
MEASURING NETWORK PERFORMANCE IN MOBILE SAFARI* 3 November, 2020
SITE-SPEED TOPOGRAPHY* 19 May, 2020
THE FASTEST GOOGLE FONTS* 22 April, 2020
REAL-WORLD EFFECTIVENESS OF BROTLI* 8 January, 2020
PERFORMANCE BUDGETS, PRAGMATICALLY* 15 August, 2019
LAZY PRE-BROWSING WITH PREFETCH* 13 August, 2019
MAKING CLOUD.TYPOGRAPHY FAST(ER)* 8 August, 2019
TIME TO FIRST BYTE: WHAT IT IS AND WHY IT MATTERS* 31 May, 2019
SELF-HOST YOUR STATIC ASSETS* 25 April, 2019
TIPS FOR TECHNICAL INTERVIEWS* Older articles
Hi there, I’m Harry. I am an AWARD-WINNING CONSULTANT WEB PERFORMANCE ENGINEER, DESIGNER, DEVELOPER, WRITER, and SPEAKER from the UK. I WRITE, TWEET
, SPEAK
, and SHARE
CODE about measuring and improving site-speed. You should hire me . ------------------------- Arrange a CONSULTATION.Ship
your code to production in just a few clicks. Get $100 free credit.ads
via Carbon
PROJECTS
*
* ITCSS – coming soon…*
NEXT APPEARANCE
*
WORKSHOP
Smashing Conference
,
Remote (Online), October 2020NEWSLETTER
Infrequent updates, special offers, and exclusive content.Learn more…
Email Address
I am available for hire to consult, advise, and develop with passionate product teams across the globe. I specialise in large, product-based projects where performance, scalability, and maintainability are paramount. Arrange a CONSULTATION. CSS WIZARDRY LTD is a company registered in England and Wales. COMPANY NO. 08698093, VAT NO. 170659396Details
Copyright © 2024 ArchiveBay.com. All rights reserved. Terms of Use | Privacy Policy | DMCA | 2021 | Feedback | Advertising | RSS 2.0