6 ms·

It would be very appreciated if anybody who can afford to take the time watching all of these videos would like to extract the key information into a synopsis a

It would be very appreciated if anybody who can afford to take the time watching all of these videos would like to extract the key information into a synopsis and maybe a cheat sheet or at least a list of URLs. You can skip the first one, that is a verbose introduction that starts with CERN web history. Key message: "build for all deviecs". No more valuable info, unfortunately, and I have to spend time now on other things. I am sure 10 minutes reading an article I would have been able to extract some more. Advice to video tutorial makers: please value your viewers time most, make this a very high priority in your production workflow. Think twice about every sentence you write into the playbook and after one or two days write the sentences again with a target of 50% time reduction. Absolutely never just talk ten minutes something that just comes into your mind - this will just waste the viewers time. Tutorials are not for time wasting. Keep the information very precise and to the point. Always provide at least a cheat sheet of key info. Thanks!

molf 9y ago
Could not agree with this more. This is why I hate videos without a transcript or textual summary.
- PMan74 9y ago
  I think video in general is not well suited: skim, skim, skim, read that one section 3 times, skim, skip back to that section at the start to re-read, skim, .... is a lot easier to do on text than video. At least for me anyway.
  - gajju3588 9y ago
    I feed videos are better as you are forced to listen to the whole thing and that helps you get the complete picture. While reading the text, if we find something that is easy to grasp, our mind goes into auto-pilot mode and skips a lot of content.
    - corobo 9y ago
      I think I am the almost exact opposite of that. If I have a video on I'll be more likely to find a shiny pen of something else to do, do that while the video is plodding on in the background and come back to the video having learned nothing While reading text it's pretty hard to be doing something else at the same time There's also the factor of when I'm reading I read at my speed in my voice. I'm not distracted by a particularly nasally voice[0] or a slow talker rambling on [0] Not saying the videos here are that, it's just one of those voice types that I remember being different enough to become distracted
    - rkachowski 9y ago
      I agree, another aspect to this is that you are forced to absorb the information at a fixed rate. You can read as fast or as slow as you want, but a video will throw the information at you at the authors own pace. This either leads to frustration or information overload.
mettamage 9y ago
Final edit: I skimmed all videos (the content was fluffy) and got the following links and lessons out of it. Don't consider them to be the best notes, but I feel most of this is pretty self-explanatory. Personally, I was hoping for some more technical content, but at the same time if I want to quickly hack and get the job done, then this knowledge will help. Tip: if you want to quickly see the Video headings CTRL + F or CMD + F and type in Video so that you can highlight it. I don't know how to make proper headers on HN. Video 2 The whole theme of video 2 is: what can I get away with? caniuse.com statcounter.com (caniuse.com uses it as a data source) Use GA to see what you can get away with chromestatus.com developer.microsoft.com/en-us/microsoft-edge/platform/status platform-status.mozilla.org bugzilla.mozilla.org Edit video 3: What happens when a feature isn't supported and you use it? It strikes it through. / It ignores it. It's okay that websites don't look identical in every browser. In fact, they never ever do. CSS is not like JS where it breaks / generates an error. It just ignores stuff it doesn't know. shape-outside circle example: it works when it works. It is a square if it doesn't work. Users won't necessarily know that it is different. shape-outside polygon example: it works with supported browsers and is a square when it doesn't work. CSS Error handling: it just ignores stuff Edit video 4: Counting on how CSS handles is enough. Other times it is not quite enough. You want to make adjustment for browsers that do not support many things. CSS Overrides help. Basic example: the header is the height of the viewport. header { display: flex; height: 100vh; } h1 { margin: auto; } What happens in browsers that do not support display flex? The functionality gets lost. Client in said example says it wants a bigger height for older browsers. Solution: header { display: flex; height: 500px; height: 100vh; } h1 { margin: auto; } caniuse viewport units caniuse flexbox Browser supports viewport units but not flexbox. We want the headline in the middle Solution: header { display: flex; height: 500px; height: 100vh; } h1 { padding: 2em 0; /* cannot use margin since the next line overwrites margin / margin: auto; } Check 5:30 for all the different output examples Firefox inspector: play with CSS. Edit video 5: feature queries caniuse initial-letter? Not really, only in Safari p::first-letter { color: rgba(255, 255, 255, 0,9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } Initial-letter makes a giant initial letter. Feature queries look like this: @supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { color: rgba(255, 255, 255, 0,9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } } This means that browsers that do not support it, won't show it. Example of grid and how feature queries help when grid isn't applied. Code is on 7:15. It is too big to write. 8:30 is more in-depth on the syntax of @supports There is also one bad idea to use @supports and this is: @support not Edit video 6: feature queries advanced info Every version of IE does not know what a feature query is. Safari also did not know it for a long time. What they do is: they block the whole code. There are 4 combinations: (1) browsers that support feature queries && do understand the specific feature (2) browsers that support feature queries && do not understand the specific feature (3) browsers that do not support feature queries && do understand the specific feature (4) browsers that do not support feature queries && do not understand the specific feature We do not want (3). Example @supports (display: flex){ / code */ } When using feature query know that you ignore Internet Explorer and Safari. With older properties you might not want to use feature queries (e.g. flexbox), but for new feature queries you may want to. Edit video 7: what happens when the browser doesn't understand the CSS? Ask yourself: how well does a particular feature fail? Maybe you don't want to use the property at all because it fails horribly. Example: h1 { writing-mode: sideways-lr; } caniuse writing-mode? yes 94% Yet in most browsers sideways-lr doesn't work in most browsers! Why does caniuse lie to us?! caniuse represents the level 3 specification of writing-mode, but she is using level 4! go to the MDN network to checkout support One solution to this problem is to ignore the feature and create the same output like so: h1{ writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; text-orientation: sideways; }
benp84 9y ago
The Video Speed Controller browser plugin changed my life. With the key bindings you can dynamically adjust the speed to the complexity of the content and always be watching at exactly the rate you can process it.
- mixmastamyk 9y ago
  I’ve used YouTube dl and vlc for this but sounds good as well.
- Kagerjay 9y ago
  I've been using this plugin for the longest time, I rebinded my keys to [ speeddown ] speedup v display speed settings Speeds of 4x has audio cutoff, 16x is max playback speed Also, enable captions on video helps out a lot when speeding through a video, in the event you misheard something at faster playbacks

molf 9y ago

Could not agree with this more. This is why I hate videos without a transcript or textual summary.

PMan74 9y ago
I think video in general is not well suited: skim, skim, skim, read that one section 3 times, skim, skip back to that section at the start to re-read, skim, .... is a lot easier to do on text than video. At least for me anyway.
- gajju3588 9y ago
  I feed videos are better as you are forced to listen to the whole thing and that helps you get the complete picture. While reading the text, if we find something that is easy to grasp, our mind goes into auto-pilot mode and skips a lot of content.
  - corobo 9y ago
    I think I am the almost exact opposite of that. If I have a video on I'll be more likely to find a shiny pen of something else to do, do that while the video is plodding on in the background and come back to the video having learned nothing While reading text it's pretty hard to be doing something else at the same time There's also the factor of when I'm reading I read at my speed in my voice. I'm not distracted by a particularly nasally voice[0] or a slow talker rambling on [0] Not saying the videos here are that, it's just one of those voice types that I remember being different enough to become distracted
  - rkachowski 9y ago
    I agree, another aspect to this is that you are forced to absorb the information at a fixed rate. You can read as fast or as slow as you want, but a video will throw the information at you at the authors own pace. This either leads to frustration or information overload.

mettamage 9y ago

Final edit: I skimmed all videos (the content was fluffy) and got the following links and lessons out of it. Don't consider them to be the best notes, but I feel most of this is pretty self-explanatory. Personally, I was hoping for some more technical content, but at the same time if I want to quickly hack and get the job done, then this knowledge will help. Tip: if you want to quickly see the Video headings CTRL + F or CMD + F and type in Video so that you can highlight it. I don't know how to make proper headers on HN. Video 2 The whole theme of video 2 is: what can I get away with? caniuse.com statcounter.com (caniuse.com uses it as a data source) Use GA to see what you can get away with chromestatus.com developer.microsoft.com/en-us/microsoft-edge/platform/status platform-status.mozilla.org bugzilla.mozilla.org Edit video 3: What happens when a feature isn't supported and you use it? It strikes it through. / It ignores it. It's okay that websites don't look identical in every browser. In fact, they never ever do. CSS is not like JS where it breaks / generates an error. It just ignores stuff it doesn't know. shape-outside circle example: it works when it works. It is a square if it doesn't work. Users won't necessarily know that it is different. shape-outside polygon example: it works with supported browsers and is a square when it doesn't work. CSS Error handling: it just ignores stuff Edit video 4: Counting on how CSS handles is enough. Other times it is not quite enough. You want to make adjustment for browsers that do not support many things. CSS Overrides help. Basic example: the header is the height of the viewport. header { display: flex; height: 100vh; } h1 { margin: auto; } What happens in browsers that do not support display flex? The functionality gets lost. Client in said example says it wants a bigger height for older browsers. Solution: header { display: flex; height: 500px; height: 100vh; } h1 { margin: auto; } caniuse viewport units caniuse flexbox Browser supports viewport units but not flexbox. We want the headline in the middle Solution: header { display: flex; height: 500px; height: 100vh; } h1 { padding: 2em 0; /* cannot use margin since the next line overwrites margin / margin: auto; } Check 5:30 for all the different output examples Firefox inspector: play with CSS. Edit video 5: feature queries caniuse initial-letter? Not really, only in Safari p::first-letter { color: rgba(255, 255, 255, 0,9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } Initial-letter makes a giant initial letter. Feature queries look like this: @supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { color: rgba(255, 255, 255, 0,9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } } This means that browsers that do not support it, won't show it. Example of grid and how feature queries help when grid isn't applied. Code is on 7:15. It is too big to write. 8:30 is more in-depth on the syntax of @supports There is also one bad idea to use @supports and this is: @support not Edit video 6: feature queries advanced info Every version of IE does not know what a feature query is. Safari also did not know it for a long time. What they do is: they block the whole code. There are 4 combinations: (1) browsers that support feature queries && do understand the specific feature (2) browsers that support feature queries && do not understand the specific feature (3) browsers that do not support feature queries && do understand the specific feature (4) browsers that do not support feature queries && do not understand the specific feature We do not want (3). Example @supports (display: flex){ / code */ } When using feature query know that you ignore Internet Explorer and Safari. With older properties you might not want to use feature queries (e.g. flexbox), but for new feature queries you may want to. Edit video 7: what happens when the browser doesn't understand the CSS? Ask yourself: how well does a particular feature fail? Maybe you don't want to use the property at all because it fails horribly. Example: h1 { writing-mode: sideways-lr; } caniuse writing-mode? yes 94% Yet in most browsers sideways-lr doesn't work in most browsers! Why does caniuse lie to us?! caniuse represents the level 3 specification of writing-mode, but she is using level 4! go to the MDN network to checkout support One solution to this problem is to ignore the feature and create the same output like so: h1{ writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; text-orientation: sideways; }

benp84 9y ago

The Video Speed Controller browser plugin changed my life. With the key bindings you can dynamically adjust the speed to the complexity of the content and always be watching at exactly the rate you can process it.

mixmastamyk 9y ago
I’ve used YouTube dl and vlc for this but sounds good as well.
Kagerjay 9y ago
I've been using this plugin for the longest time, I rebinded my keys to [ speeddown ] speedup v display speed settings Speeds of 4x has audio cutoff, 16x is max playback speed Also, enable captions on video helps out a lot when speeding through a video, in the event you misheard something at faster playbacks