Enjoy/use/peruse at your own risk.
Some of these notes were taken rather quickly and may be wrong or contain typos. Human stuff like that. Overall, should be helpful content.
Most methods don’t run against arrays this large (in the browser), so the significance of these findings is unclear.
Maybe this applies more in node.js where it might be more likely to use massive arrays? Even then, though, a million? Seems like a massive edge case.
Per domain, right? The user can run 2 web sites at once which both have them, I assume?
It “installs” then “activates”. After that it listens for “fetch” and “message”.
That’s all! There are no other events.
By default is hidden in most browsers. Will need to change the setting to see it.
She highly recommends this one.
She recommends console.trace instead of using .log or any other consoles, so that you can see exactly what the code is doing.
Because the users will have a different environment than mine, I want to know what errors they experience with the stack track. This is what window.onerror() does.
Otherwise, we don’t know what error trace the user experienced.
Loggong in the error on the server for future reference.
Isn’t data science just a rebranding of business intelligence?
No. It’s more of an evolution of BI.
You’re giving the job of programming to the machine itself.
The output of the first process is rules for the next process to use. This is AI, I believe.
You want to keep your model somewhat generic.
Otherwise you have “overfitted” it.
Python, very popular. He recommends this.
Attended my first DevNexus today (and yesterday). It was great! While it’s put on by the Atlanta Java Users Group (I believe), DevNexus is meant for all developers. It has good content for UI folks.
Below are notes from 3 of the 6 sessions I attended. These three were fantastic! Of the other three, two were pretty poor, and the third was too far outside my knowledge to be valuable to me, so I’m not posting notes from those. But the three below were absolutely worth my time. These notes are written with my mind in view, i.e. for me to review/understand later. If things don’t make sense to you, that’s why! And there’s likely typos, not my normal post.
HTML supports validation baked in… so I guess you don’t need JS for this? Very interesting.
so cool! It looked much easier.
Would need to run some comparisons about how much time is used to make certain functions.
And not all things will be immutable. That’s how things work.
Functional Style JS is about using less brain power and making things easier.
It’s about making your life easier.
Mondas are things that get around the “no side effects” rule.
He says “screw monads” because he DOES NOT CARE about the “no side effects” rule.
as you write a line a code, ask yourself “is this the simplest way of getting this done?
And to use less brainpower.
Red – Start by writing a failing test.
Green – Write just enough code to make the test pass.
Code is ugly at this point.
I know the code works.
Refactor – Optimize your code for readability, maintainability, and quality.
That’s why you want tests.
So that as you refactor you don’t worry about breaking previously-written stuff.
And so that as time passes, and you get further and further away from remembering what you were thinking when you first wrote the code, your tests will do the thinking for you.
As you’re writing the tests, you write just enough code to make the test pass.
They (TDD and BDD) are not mutually exlcusive, because they are different types of things.
Qunit, on my app, is way easier than what he was showing.
I was lucky enough to attend the Forward JS conference in San Francisco in late July. It was fantastic!
The conference occurs twice a year: in the earlier part of the year it is your standard in-person conference, in the later part of the year it is an online conference.
While the content on the conference day was nice, I attended this conference because of the workshops. In fact, if I could have skipped the conference day, I would have. Why? I wanted hands-on, stick-in-my-mind, non-fluff non-excited-for-the-sake-of-being-excited (i.e. the way I assume most conferences are) kind of information.
Note: I prepared the following notes for a presentation/workshop that I recently gave at work to the UI Engineer community.
Official Name: period or dot or wild.
If the lefthand side is found, it will skip the righthand side.
A slightly more official name might be “subexpression”.
They can be nested to any depth.
However, it also create a variable which some call a “backreference”.
Match: the first character, if it doesn’t exist try the next one, etc.
Matches each character individually (i.e. it is not matching a string of characters).
The order of the characters does not matter.
If set to global, will match all characters.
If it’s before a letter, it means the letter following must be at the beginning of a string.
If it’s inside square brackets, it means “not”.
Matches: If after a letter, it means the letter previous must be at the end of a string.
I don’t know what I want! I just know I don’t want a lot of it.
I’m the star, I’ll take everything, even if it’s not there.
“Even if it’s not there” means it won’t break the regular expression.
Find all variations of Jennifer and includ the last name (whether or not it exists).
Find dollar amounts with or without dollars (i.e. could be sense only).
He always wants more friends, and won’t take no for an answer.
Matches: forces the following metacharacter to be treated as a literal character.
Break into pieces, and/or step through the pieces.
A page can perform well, but be a bad user experience.
How fast is the CDW.com homepage?
The execution is top down and single threaded.
As soon as the parser hits a closing script tag, it must download and execute the entire script before parsing any more of the HTML (source).
Unless it has the async attribute.
JS can not execute until all CSS has been downloaded.
It seems that’s when all CSS is downloaded and all JS has been executed… that can not be right.
Read the HTML and parse it into a DOM tree.
When reflow happens, it executes faster if DOM is not super deep.
Scripts are parser blocking, meaning when the browser comes to a script tag, it downloads the entire file before continuing with the parsing.
Good to use when the DOM does not need to be finished while this JS runs and when no other scripts depend on this one being loaded.
Best used for third party scripts.
There’s no need to use async of script is loaded at the bottom of the page.
Download and execute while the page is loading.
This may be something that we ignore as we use a CSS preprocessor. And that’s fine with me.
Load content above the fold quicker than all other content.
Reassure users during wait times.
How fast is my function?
There’s certainly a Phase 2 or Phase 3 worth of features I’d like to add, to make it far more valuable, and I don’t think it’s totally bug free, but, “beta version” is live.
Both interesting UX and a story worth following.
I think the user should be able to exit out of an experience so immersive. I originally viewed it on a very large monitor, and the experience was ultimately overwhelming. It wasn’t too long before I was wanting controls to be able to view the content in a different format.
Their layout and interactions are unique but not unintuitive – definitely creative and certainly thought provoking for considering more new/different/effective layouts and animations.
This is an interesting layout, also with some great animation, but it doesn’t work on all breakpoints. Probably just needed a bit more work.
Appropriate, smart use of the full-screen approach – beautiful for this journalistic enterprise.
Love this as an excellent example of responsive design. Also the particular design elements they chose aren’t obvious, so it’s a nice deviation from the normal (for example, no use of the hamburger icon).
Divs should be used as a last resort.
Feel free to use them. As a last resort.
How do I know when to use a div?
When no other tag will do.
How do I know when no other tag will do?
By learning what those other tags do.
But it’s all so amorphous! Everything is so unclear! We don’t know exactly when to use these tags!
Second, they are intentionally broad in scope. This is called flexibility.
Third, this is where your team comes in.
Decide how you plan to use the tags.
Leaving some flexibility is ok and probably preferable.
Giving your team time to learn is ok, in fact, it’s expected.
Fourth, to some small extent, the standard is still being developed.
This is normal in web development and does not negate the value that using the standard provides.
Fifth, this is not moral.
This is not a situation of right and wrong. No one dies if you do this “wrong” (primarily because there is no wrong). These are HTML tags for crying out loud!
Do I replace all divs with sections?
A section is a set of elements you wish to group.
Most likely your section will contain many divs.
Are these nestable? How many times can I use them?
All are nestable (although probably not nav and button).
There is no limit to how many times you can use them.
Why? You probably have more than one nav, more than one article or section, etc.
Principle of the matter: each set of content is wrapped in something which accurately describes the purpose of the content inside.
Inside sectioning elements (article, aside, section, and nav), these restart (i.e. you start over at H1).
They should still be used.
Didn’t they provide structure before?
No, they didn’t. Read the smashing magazine article below.
We have a worthless DOM otherwise.
A primary purpose of the DOM is to communicate the meaning of the content. Since, by definition, divs mean nothing, making divs the backbone of your page means your DOM is communicating nothing.
With a non-worthless DOM, we give parsers what they’ve always needed: a DOM which actually communicates the meaning of primary parts of the page.
There’s also CSS and JS benefits we can get into later.
It still doesn’t make sense!
Give yourself time to learn (and also fix anything I may have gotten wrong above).
You may be wondering what OOP means by now. Object Oriented Programming is a relatively new concept, whereas the sum of the parts of a program make up the whole. Think of it this way: you are building a model car. You build the engine first. It can stand alone. It is an engine and everyone can see it's an engine. Next you build the body. It can also stand alone. Finally, you build the interior including the seats, steering wheel, and whatnot. Each, by itself is a object. But it is not a fully functioning car until all the pieces are put together. The sum of the objects (parts) make up the whole.
Continuing with the model car example, when you built the engine, you didn't use any of the parts that would later build the seats (a 350 four-barrel engine with a seat belt sticking out if the piston would look pretty silly). The point is that all the parts that made up the engine were of a certain class of parts. They all went together. Ditto with the body and then the interior.
Replace the numbers of an ordered list with your own, automatically generated, so that you can style them. CSS only. Super helpful, easy, works well.