Master web development with over 9000 tricks(medium.com)
medium.com
Master web development with over 9000 tricks
https://medium.com/@david.gilbertson/master-web-development-with-these-9-985-weird-tricks-77c71d1d96f3#.pvqsolvp0
8 comments
Thanks for the useful feedback, it's much appreciated. Buttons are now full background colors, looks much better. It also should now be easier to see which nodes have children.
Please have a look at this issue: https://github.com/davidgilbertson/know-it-all/issues/8
I need to have a think about (and see what other people think) how to deal with inheritance of 'scores'. If you click "I don't care" to WebGL, it should trickle down, but probably not for "I know it". So I need to cover the different scenarios but stay intuitive.
I also need to have a think about how to show some information about what's happening below an item in the tree. Maybe just a % unrated for each row or something.
Regarding flashcards, love the idea, don't love the amount of work it would be :) I left a reply to a comment on medium about this if you're interested.
Please have a look at this issue: https://github.com/davidgilbertson/know-it-all/issues/8
I need to have a think about (and see what other people think) how to deal with inheritance of 'scores'. If you click "I don't care" to WebGL, it should trickle down, but probably not for "I know it". So I need to cover the different scenarios but stay intuitive.
I also need to have a think about how to show some information about what's happening below an item in the tree. Maybe just a % unrated for each row or something.
Regarding flashcards, love the idea, don't love the amount of work it would be :) I left a reply to a comment on medium about this if you're interested.
Really amazing work.
+1 on all of these, especially full background coloring, completeness of children, and more contrast on left-hand children indicator.
Having filled out a bunch of these, I second the idea that the knowledge level of a node should be the sum of its leaves. I "know" CSS, but I don't know certain tiny details of CSS. Showing completeness of knowledge as a percentage would be much more interesting to me.
As an alternative to having to save everything yourself, an import/export as text or json would be great and allow transfer, backup, and third-party tools.
+1 on all of these, especially full background coloring, completeness of children, and more contrast on left-hand children indicator.
Having filled out a bunch of these, I second the idea that the knowledge level of a node should be the sum of its leaves. I "know" CSS, but I don't know certain tiny details of CSS. Showing completeness of knowledge as a percentage would be much more interesting to me.
As an alternative to having to save everything yourself, an import/export as text or json would be great and allow transfer, backup, and third-party tools.
> So the goal is all green?
> Why you gotta be like that? No, the goal is to have no red. That doesn’t mean you need to know everything.
This might be obvious, but I think its also super important, especially in ones early years of programming. Maximize your "known unknowns" and rest easy knowing you can Google it later. Being able to recognize when an API, technique, etc., can be used is half the battle.
> Why you gotta be like that? No, the goal is to have no red. That doesn’t mean you need to know everything.
This might be obvious, but I think its also super important, especially in ones early years of programming. Maximize your "known unknowns" and rest easy knowing you can Google it later. Being able to recognize when an API, technique, etc., can be used is half the battle.
Reading the post made me feel I was reading a P. G. Wodehouse short story set in contemporary times.
This is an awesome app, wonderfully curated content!
From a design / usability POV the site could use a little bit more contrast.
From a design / usability POV the site could use a little bit more contrast.
Site is using Helvetica Neue, weight 300, which should never be used for body text. I can only imagine how it looks on a non-retina display.
I've changed it to 400 now.
Agreed on the contrast. Just spent about a minute scrolling around looking for more items because I did not see the "expand" arrows to the left of each item. On my screen (2011 iMac) they are one shade away from invisible. They could at least get darker when you mouseover.
i hate websites that utilize so light grays... they're pretty much indistinguishable from white on my screen.
(the triangles in front of the items on the website he's blogging about)
thankfully, styler extensions exist for both chrome and firefox, with which i can overwrite the color themes. its still annoying though.
thankfully, styler extensions exist for both chrome and firefox, with which i can overwrite the color themes. its still annoying though.
This has been common feedback, my monitor must be quite high contrast, I will fix when I get home tonight. Thanks for the feedback!
You may want to calibrate your monitor and be sure you have the correct colour profile.
Yikes yeah several shades of poor contrast greys with a BRIGHT RED background, I wanted to play with this but it's giving me a headache.
The arrows are a contrast ratio of 1.32:1, the row bg color just 1.09:1.
The arrows are a contrast ratio of 1.32:1, the row bg color just 1.09:1.
Agreed that the contrast on these is too low, though perhaps "hate" is too strong of a word :)
I laughed out loud at that. I have improved the contrast now so they will have to find something else to hate. Probably kittens.
If that doesn’t get your juices flowing, this app isn’t for you, and you should get your juices checked.
Hilarious, but my insurance doesn't cover that.
Hilarious, but my insurance doesn't cover that.
The obsessive compulsive in me suddenly feels the urgent need to find 15 more tricks. How did you resist this?
That's not an example of obsessive compulsion
A compulsion to continuously check a website out of constant ruminating about missing out on knowledge seems like it could fall under OCD if it were highly disruptive to a person's functioning!
(Not to take this off the rails, since I realize the original comment was using obsessive compulsive very gently)
(Not to take this off the rails, since I realize the original comment was using obsessive compulsive very gently)
There were legitimately exactly 10,000. The anarchist in me took out 15.
Throughout the years I found Excel and Word to be powerful Engineering tools. It's interesting to see the author relied heavily on these tools to assemble the database.
Excel, in particular, at least for me, has always been a powerful productivity booster. A small list of what I've done with the program includes:
- Calculation and exploration of coefficient tables for polyphase FIR filters for FPGA designs (including auto-magically producing Verilog code to paste into my modules).
- Generation and maintenance of C code for embedded system control panel menu state machine. Version control was easily handled using sheets. Again, copy-and-paste code right into compiler.
- Acoustics calculations for professional digital theater design including room resonant modes, full surface material database, sound management calculators (Helmholtz resonators, etc.).
- Entry, generation and maintenance of I/O definitions for 1,000+ pin FPGA designs with copy-and-paste Verilog code output. This makes something that is virtually impossible to maintain with a code editor into a thing that is absolutely manageable.
- Entry, generation and maintenance of PCAD and later Altium Designer schematic symbol and PCB footprint for components with full IPC parameters. While Altium has improved this over the years there was a point in time when defining and maintaining something like a 400+ pin FPGA could take days (particularly with it's predecessor, PCAD). Using Excel for data entry by copy-and-pasting directly from PDF data sheets changed a days-long process into about an hour tops. This required about three months work writing a custom Excel tool in Visual Basic for Applications, which turbocharges Excel. Moving signals around, swapping banks and other options that would instill fear in almost any engineer were reduced to a five minute procedure using Excel.
- Automated processing and maintenance of design BOM's. Again, some custom VBA code. Grab BOM from PCAD/Altium and turn it into something that can be used, versioned and maintained during production.
- Simulation of FIFO input/output buffers for the implementation of a frame store in a real-time FPGA video processor project.
- Simulation of packet processor for the same project.
- Calculation and optimization of clock multiplier parameters for the generation of multiple desired frequencies within specified tolerance ranges
The list goes on. I also used PowerPoint with VBA code to simulate the operation of a control panel for both presentation and later product training applications. This code imported the aforementioned state machine definition and transformed otherwise static slides into something that worked almost exactly as the actual product.
This is something online versions and competitive online products (Google) have failed to effectively translate. The desktop versions of the MS Office suite are incredibly powerful. Granted, most people don't even begin to scratch the surface of what these can do. I believe it is very important for engineers to be very well versed on what these tools, particularly Excel, can do.
As a side note, I highly recommend this Excel add-on. It's a real time saver and makes for powerful processing of all manner of data you might need to shape and clean in producing everything from code to database table data:
http://www.asap-utilities.com/
No affiliation whatsoever, just a happy paid user for many years.
Excel, in particular, at least for me, has always been a powerful productivity booster. A small list of what I've done with the program includes:
- Calculation and exploration of coefficient tables for polyphase FIR filters for FPGA designs (including auto-magically producing Verilog code to paste into my modules).
- Generation and maintenance of C code for embedded system control panel menu state machine. Version control was easily handled using sheets. Again, copy-and-paste code right into compiler.
- Acoustics calculations for professional digital theater design including room resonant modes, full surface material database, sound management calculators (Helmholtz resonators, etc.).
- Entry, generation and maintenance of I/O definitions for 1,000+ pin FPGA designs with copy-and-paste Verilog code output. This makes something that is virtually impossible to maintain with a code editor into a thing that is absolutely manageable.
- Entry, generation and maintenance of PCAD and later Altium Designer schematic symbol and PCB footprint for components with full IPC parameters. While Altium has improved this over the years there was a point in time when defining and maintaining something like a 400+ pin FPGA could take days (particularly with it's predecessor, PCAD). Using Excel for data entry by copy-and-pasting directly from PDF data sheets changed a days-long process into about an hour tops. This required about three months work writing a custom Excel tool in Visual Basic for Applications, which turbocharges Excel. Moving signals around, swapping banks and other options that would instill fear in almost any engineer were reduced to a five minute procedure using Excel.
- Automated processing and maintenance of design BOM's. Again, some custom VBA code. Grab BOM from PCAD/Altium and turn it into something that can be used, versioned and maintained during production.
- Simulation of FIFO input/output buffers for the implementation of a frame store in a real-time FPGA video processor project.
- Simulation of packet processor for the same project.
- Calculation and optimization of clock multiplier parameters for the generation of multiple desired frequencies within specified tolerance ranges
The list goes on. I also used PowerPoint with VBA code to simulate the operation of a control panel for both presentation and later product training applications. This code imported the aforementioned state machine definition and transformed otherwise static slides into something that worked almost exactly as the actual product.
This is something online versions and competitive online products (Google) have failed to effectively translate. The desktop versions of the MS Office suite are incredibly powerful. Granted, most people don't even begin to scratch the surface of what these can do. I believe it is very important for engineers to be very well versed on what these tools, particularly Excel, can do.
As a side note, I highly recommend this Excel add-on. It's a real time saver and makes for powerful processing of all manner of data you might need to shape and clean in producing everything from code to database table data:
http://www.asap-utilities.com/
No affiliation whatsoever, just a happy paid user for many years.
After playing around with it on desktop, I have some (feature) requests, I hope you don't mind :)
* is it open source? [EDIT: scratch that, found the source: https://github.com/davidgilbertson/know-it-all ]
* full background coloring of pressed buttons, not just edge
* visual cue as to whether a node has children without having to click on expand
* visual cue of completeness of node's children when collapsed. E.g. I know CSS, but not all of its children. When collapsed, it looks "green".
* Total % counters for each category to help with tracking total goal.
* Description, links to MDN / ... right there in the node somewhere (being open source would help with this a lot, through PRs)
Aside from that, I'm not sure about the usefulness of having buttons on non-leaf nodes, anyway... you'd expect that someone who knows of all a node's leaves knows about the node. I know it's not strictly the same, but is the difference important? It would help simplify the model. Then again I guess that's just personal preference.
Also note that this is very close to a learning system called flashcards. If you added automatic decay and quizzing (you can trust the user to be honest) you get a great way to keep knowledge current. That's the semantic problem with this; I know and will forever know about <base>, but I might soon forget a lot of minutiae I currently happen to know about push notifications because I've been working with them recently. Flashcards take knowledge decay into account.
But again: great stuff! Love it.