[TWIL: 2019–05–05]The Power Of Time
I, like most people, was told many stories when I was a little kid. At that time, I only pay attention to the story itself and couldn’t feel much about it. Then, since about teenage, I feel those stories are childish and full of logical flaws. But now, since I’m older, many times in my life, when facing a situation, those old childish stories come into my mind and I think they are full of wisdom and real treasures in my head.
The story of “dripping water hollows out stone” is one of them. At the end of the story, I was told “It’s not the force of water or the weakness of stone, it’s the power of time. ” As a kid, I was so sick of this kind of preaching, but now, after feeling the power of time myself, I realized how innocent I was.
Two years ago, I chose to become a frontend software engineer, which means I have to keep learning for the rest of my life. Learning is fun, but it’s easy to get frustrated if you don’t see any improvements or output.
I found measurement is a good incentive during the years of running. I couldn’t imagine I would spend so much time on such a boring sport. Before running, I did Zumba, rugby, swimming, tennis, etc. All of them are very enjoyable. When I just came to the U.S. and hadn’t found a sports group, I tried running in Ann Arbor’s beautiful weather. Then, I kept running for years.
What changed me? I’d say my phone and all the tracking devices played a key role because I can compare my performance with my record. It pushes me to run faster, longer. I’m happy to see all the little improvements.
It surprised me when I see how I was last year, or two years ago. Before seeing that, I thought I should have been always as bad as I am, but actually, I was even worse before 😂. Then I feel, I did make some progress.
Seeing the total mileage I’ve done for this year or in the past several years, I’m proud of myself as well.
As for programming, I’m proud to say, “I learned to programme in three months”, but what after that? That’s the past, what’s after that?
I took several courses online, I solved 200 problems on LeetCode, I did several projects, but mostly, I read something and I forgot.
I don’t want to be like a bear, who can only hold two corn in his hands. (Once he picks the third one, he has to drop one. Yes, he may use the queue data structure. Or maybe stack, who knows.) So, I decided to write some notes about what I’ve learned every week.
2019–05–05
Accessible Elements
We wanted to make a toast clickable, but there’s a close button on the toast. So, I used a div around the section and made it clickable.
Here came two mistakes:
divis not an accessible element. Instead of usingdiv, I should usebuttonora.- if user clicks the close button, both the close button and the toast will be clicked.
To solve the first problem, we can add a role="button" attribute. (ref)
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>BTW, why do we want to use accessible elements? Answer.
Generally, it’s friendly for screen readers, easier to develop, better on mobile and good for SEO.
What about the click event?
The issue is caused by event bubbling and capturing and we can stop it by using event.stopPropagation() .
CSS Grid
I’ve been using grid almost since I first learned programming (which is a benefit of learning program so late), but I’ve only scratch the surface so far. After watching the recent episode of FunFunFunction Trying CSS Grid for the first time (Adam Argyle), I just picked up several more little tricks.
place-item: center center;
gap (or grid-gap): 1em;
grid-template-columns:: repeat(4, 1fr);Google i/o ’19: What’s new in JavaScript
I was pretty excited about some new JavaScript APIs after watching What’s new in JavaScript.
BigInt()doc
Though I’ve never had any scenarios needs to use in my work, but I did encounter this issue several times while solving LeetCode problems.
2. Array.flat()
It will be very handy, but I’ll also lose some fun implementing the helper API myself.
3. Array.flatMap() , Object.fromEntries() , Public and private class fields (from _ to # ) , String.matchAll() , new numeric literal (seperater: 1000000 ->1_000_000), intl.numberFormat() , Promise.allSettled() , Promise.any() ……
4. Array.sort()
I didn’t know it was not stable for bigger data! Now, I don’t have to know, because it’s gonna be stable.
5. WeakRef()
I didn’t know that Map() prevents the data from garbage collecting, but since we’ll have weakRef() I think I’d better keep in mind using it.
There is also a log of fun stuff in What’s New with Chrome and the Web (Google I/O ’19), Developer Keynote (Google I/O ‘19).
The lazyLoading HTML attribute
This is amazing, but I can’t find any docs for now. The following is a screenshot from the Developer Keynote (Google I/O ’19) 27:58.
Portal
With Portal, the transition on the mobile web will be seamless. ref.
AlgoDS
This week is a frustrating week in term of AlgoDS. May 6 was the first time in the last 10 weeks that I didn’t submit any commit on LeetCode, but I’m sure I did submit it. And it happened again on May 9. I know I only did one commit on those days simply want to keep the record, but LeetCode should let me do that!
Anyway, I wrote some code which logically correct but wasn’t accepted for 278. First Bad Version because I used bitshift (left + right)>>1` to be fancy instead of Math.floor((left+right)/2)`. B̵u̵t̵ ̵I̵ ̵l̵e̵a̵r̵n̵e̵d̵ ̵t̵h̵a̵t̵ ̵b̵i̵t̵S̵h̵i̵f̵t̵ ̵i̵s̵ ̵t̵i̵m̵e̵-̵c̵o̵n̵s̵u̵m̵i̵n̵g̵.̵ /*Update 2019–05–13*/River pointed out it’s not because bit-shift is more time-consuming. Different machines may run it in different ways. The lesson here is if there’s a native JavaScript API and I’m allowed to use it, I should use it because it’s always the most efficient way./*End update*/
To make things worse, I didn’t solve any problems in last night’s contest, which hardly ever happens and the first two problems are all easy level!
Resource
When watching the i/o videos, I realized that Google has a lot of resources, which I used before, but forgot now. If I want to get down to the fundamental, I should go through them.
To be continued…
