What I learned today

https://youtu.be/T3VRz18ntjQ

Abstract

During this keynote talk I’ll be calling out some of the most important and deeply rooted misconceptions about how great products are created.

We’ll be discussing the difference between an idea and a product; the difference between implementing features and solving problems for our customers in ways that work for our business; the difference between product owners and true product managers; the difference between product teams and feature teams; the difference between scaling with process and scaling with leadership; and more generally, the differences between how the best product companies in the world work, and how the rest work. Finally, we’ll be talking about what’s involved in truly changing how you work from the rest to the best.

Key Takeaways

1. You need to solve a problem nobody has solved before

   • Most companies are working on old problems

2. You need to spend as much time as possible understanding “the problem space”

   • Ben Horowitz: The primary thing that any technology startup must do is build a product that’s at least 10 times better at doing something than the current prevailing way of doing that thing

3. You need to be an expert in the domain

   • Shreyas Doshi: True domain expertise is domain knowledge minus domain dogma

4. You need to listen to your customers

   • Jeff Bezos: No customer ever asked Amazon to create the Prime Membership program

5. You need to commit to your solution, and iterate until success

   • Kaaren Hanson: Fall in love with the problem, not the solution

6. You need product owners

   • Marty Cagan: A product owner is simply a role in a delivery process. A product manager is responsible for a product’s value and viability
   • Designers -> usability
   • Engineers -> feasibility
   • Product Managers -> value and viability

7. You need to come up with innovative product ideas

   • Steve Jobs: The disease of thinking that an idea is 90% of the work

8. You need your engineers to focus on coding

   • Steve Jobs: We don’t hire all these engineers to tell them what to do; we hire them to show us what’s possible

9. You need to focus on creating a product your customers love

   • Martina Lauchengco: One of the biggest mistakes I see companies make is not thinking about both the product and the market side of product/market fit

10. You need process people to grow your company

    • Elon Musk: The problem is that a lot of big companies, process becomes a substitute for thinking

https://youtu.be/EZ05e7EMOLM

In this talk, the speaker leads us to the origin of TDD, which was raised by Kent Beck, and gives us new directions to write real “TDD-style” tests! In simple words, test behaviors not implementation details!

https://youtu.be/5tKaMoUc48c

This talk shares with us how OpenAI people do research. Five lessons are as follows:

1. hypotheses over tasks
2. metrics
3. tooling
4. build the map
5. nurture creativity

https://karpathy.github.io/2022/03/14/lecun1989/

In this post, we can understand both at the macro and micro level that how deep nueral nets have been progressing since last 33 years. Also the author also makes some predictions for the future based on the current state-of-the-art deep neural nets.

https://zerotomastery.io/blog/developers-edge-how-to-become-a-senior-developer/

If you want to become a senior software engineer, this post is for you. The author shares 6 core skills you need and tells you why these skills matter:

1. technical skills
2. team skills
3. client/user skills
4. growth skills
5. sales/interview skills
6. community skills

https://jessitron.com/2021/11/14/symmathesies-follow-a-power-law-not-a-bell-curve/

Power laws are everywhere. This post however reminds me that results that come from interaction among people also produce power laws! So, of course, software teams are included!

https://martinfowler.com/articles/newMethodology.html

Martin Fowler talks about two principles behind agile methods, and also compares them with traditional and more planning-focused methodologies. The two principles behind agile methods are:

1. Agile methods are adaptive rather than predictive.
2. Agile methods are people-oriented rather than process-oriented.

https://matt-rickard.com/dry-considered-harmful/

This article reminds us that abstraction is a map that reflects our thinking towards how we think we can solve problems. The map is never perfect, and may change overtime. What’s even worse is a wrong abstraction. DRY is a principle developers often adhere to and don’t think too much about its legitimacy, thus this article is a good reminder to all of us!

https://render.com/blog/git-organized-a-better-git-flow

This article shares a new approach to help us organize our git flow, especially how to write commit messages pairing with exact files.

https://youtu.be/FHRYPB8Av-g

1. Build teams with the end in mind
2. Consider diversity and hierarchy
3. Go beyond surface-level diversity
4. Create space for equal participation
5. Balance participation and control

https://charlesfrye.github.io/programming/2021/12/31/aoc-rust-haskell.html

This article is about author sharing his experience programming with 3 different programming languages, Python, Rust and Haskell, and what he learned from each of them. Also author also shares his learning experience with solving leetcode-like coding challenges.

https://youtu.be/cbB3QEwWMlA

Here is short description of WebAssembly on MDN: WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together. We can treat this short video as WebAssembly 101 and learn more from its provided resources first!

https://youtu.be/vXJpOHz3_sY

Front-end developers are more powerful today. Thanks to serverless functions, now we can build server-like functionalities into our web app without really building servers! This trend is also part of characteristics of JAMStack.

https://noidea.dog/glue

This talk is about technical leadership, and especially doing glue work. Glue work is important, and often viewed as an essential ability if you are at a senior role. I think doing glue work is a high leverage activity that makes the team better; however, some companies might not appreciate this “non-promotable” work. You can learn from this talk that how you can allocate glue work more deliberately, frame it usefully and choose a career path you actually want to be in!

https://kryogenix.org/code/browser/everyonehasjs.html

This article reminds us that we may need to rethink how available of specific technology might be; and how it might affect users in unexpected ways.

https://youtu.be/qouPzSryggk

This talk is intriguing. Jem Young, a senior software engineer in Netflix, shared three big ideas the Netflix UI Engineering team has regard to engineeringhuman performance. In brief, the first idea is sometimes code we didn’t write has greater influence on the system; the second idea is we can solve problems with freedom to explore; and the last one is believe in people, not ideas!

https://overreacted.io/what-is-javascript-made-of/

We can treat this article as a mental model checklist for understanding JavaScript. Concepts explained in the article is listed below for your reference. However, it’s just a mental modal, which gives a way of understanding something better; so it may not explain things 100% correct. For example, a function in JavaScript is actually also a kind of object, but you can’t get this truth from this article.

• Value

  • Type of Value
  • Primitive Values
  • null and undefined

• Equality

  • Strict Equality
  • Referential Equality
  • Loose Equality

• Literal

• Variable

  • Scope
  • Assignment
  • let vs const vs var

• Object

  • Property
  • Object Literal
  • Object Identity
  • Dot Notation
  • Bracket Notation
  • Mutation
  • Array
  • Prototype

• Function

  • Arguments(or Parameters)
  • Function Expression
  • Function Declaration
  • Function Hoisting
  • this
  • Arrow Functions
  • Function Binding
  • Call Stack
  • Recursion
  • Higher-Order Function
  • Callback
  • Closure

https://academind.com/tutorials/javascript-tricky-parts

This article briefly discusses those tricky parts of JavaScript. You can treat this article as a door to help you dig further into JavaScript. These concepts are listed as follows:

1. Scope & Hoisting
2. Loops(for-of, for-in)
3. Primitive & Reference Values
4. Closures
5. Recursion
6. Callbacks (Indirect vs Direct Function Execution)
7. Asynchronous Code
8. The ‘this’ Keyword
9. Prototypes

https://whatwebcando.today/

If you would like to develop native-like experience web apps(a.k.a Progressive Web Apps), this website concisely lists out important features you may want to look out! In spite of short answers on whether they are supported as of now, you can also checkout how to use APIs and code snippets in this website.

https://x-team.com/blog/rxjs-observables/

RxJS says that we can think of it as Lodash for events. This article gives intuitive and simple examples on when it’s suitable for RxJS. These are 5 reasons mentioned in the article that why we should consider using RxJS:

1. An Observable is just the Observer pattern with a jetpack.
2. The RxJS library is well-known and widely used.
3. An Observable allows you to handle different asynchronous events, from a single finite operation (like HTTP request) to multiple repeatable actions (like keystrokes or cursor movements). There’s a unified API for both.
4. You can join, mix, transform, and filter different Observables with one API.
5. RxJS Observables are already used with the most popular frameworks and libraries, such as Angular (where it’s built-in) or React/Redux (redux-observable).

https://youtu.be/QyUFheng6J0

We can learn how variable hoisting, closures, event loop, async work inside JavaScript VM with simple animations here! Also you can checkout this website that emulates how JavaScript VM works.

http://antirez.com/news/112

Author of the famous in-memory database Redis wrote this article to share what qualities he believes that make the most difference among productive engineers and normal engineers.

1. Bare programming abilities: getting sub-tasks done
2. Experience: pattern matching
3. Focus: actual time VS hypothetical time
4. Design sacrifice: killing 5% to get 90%
5. Simplicity
6. Perfectionism, or how to kill your productivity and bias your designs
7. Knowledge: some theory is going to help
8. Low level: understanding the machine
9. Debugging skills

https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/

Mobile-first is a design method; while mobile-responsive is the ability of the website to adjust itself according to the screen size. With mobile-first, we focus on mobile screens first, and think about what are essential elements that are required to put on the website. You can also find out benefits of using the mobile-first design method and some testing methods in this article!

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

This article teaches the basic concepts in TypeScript. TypeScript adds the type system to JavaScript when developers are developing software. When the software is ready to be built, TypeScript will be “compiled” to JavaScript eventually. For type checking, TypeScript uses the structural type system, which focuses on the shape that values have, sometimes also called “duck typing” or “structured typing”.

https://monorepo.tools/

Monorepos become more popular these years in web development. This comprehensive article gives us a simple definition, various feature comparisons among different monorepo tools, and also some resources to learn more about the topic.

https://mathiasbynens.be/notes/shapes-ics

This article shares the fundamental concepts applied in most JavaScript engines on how they optimize for object property lookups. Once we understand these concepts, we can write more performant JavaScript programs. Besides learning the optimization tricks, we can learn how JavaScript’s object model works!

https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/

This article gives a concise introduction to workers that run on other threads in a browser. Usually JavaScript code also runs on a main thread; however, there may be a case that some computation would take longer time, thus it should run on different threads in order to have smoother user experience. In this case, we can use web workers. Service workers and worklets are also web workers, but with specific purposes.

https://stackoverflow.com/a/19183663

I also have this issue for some time. I finally set up my mind to figure out why. The problem was just git user config email on my computer not matching with my GitHub user account’s email…

https://frontendmasters.com/teachers/kyle-simpson/code-is-for-humans/

This short talk is a must watch for software engineers. We as software engineers often write code with optimization for computers, rather with optimization for humans. However, code readability is essential for software development. We read code more often than write code, also we need to understand what the code means before we can write new code. In spite of having clear variable naming, etc. tricks to write readable code, one especially important trick is to try to communicate to readers of your code why the code is written or structured this way (Since there are infinite ways to write a program). You have to make readers easily understand your mental analysis of the problem, so that code(solution to the problem) is written down this specific way!

Finally, quotes in the talk showing bellow are full of wisdom, so I decide to write them down specifically.

1. If you don’t know why your code works, you have no hope of fixing it when it breaks.
2. The program is just a suggestion to the computer.
3. Code is for communicating ideas with other people
4. Code that you do not understand is code that you cannot trust, and code that you cannot trust is code that you do not understand.
5. As much as 70% of our time spent coding is actually spent reading the code.
6. Code must first be read before it can be written.
7. If your code has to be rewritten to be fixed, improved, or extended, you failed.
8. Because of that 70% figure, shortcomings in readability compound more quickly over time. Every moment saved in readability compounds more quickly, too.
9. Documentation and tests are important, but ultimately they’re indirectly related to code quality.
10. Readability directly impacts your ability, and that of everyone else, to do their job.
11. The one thing we will always be better at than the computer: empathetic communication with other people.

https://developers.google.com/web/updates/2018/09/inside-browser-part1

There are 4 parts in the series of understanding how a modern web browser works, especially Chrome. This is the first part, which mainly covers the high-level view of browser architecture. Modern applications including web browsers run on top of an operating system, and beneath the operating system is the hardware such as CPU, GPU, RAM, etc. In the context of where programs run inside computers, it’s the implementation details of the programs. There are two main different ways of how a web browser is built, one is multiple threads inside the same process, and the other is multiple processes where each process may have more than one thread. Chrome takes the latter approach, and its recent architecture is described in the diagram below. You can also learn the benefits of taking multi-process architecture approach in the article and some techniques Chrome use to have better web security and performance.

Diagram of Chrome’s multi-process architecture. Multiple layers are shown under Renderer Process to represent Chrome running multiple Renderer Processes for each tab

https://developers.google.com/web/updates/2018/09/inside-browser-part2

There are 4 parts in the series of understanding how a modern web browser works, especially Chrome. This is the second part, which uses the scenario of navigation to illustrate how different processes and threads communicate with each other in order to display a website. In case you have used Service Worker before, you will know it runs inside a renderer process and understand how it fits to the communication mechanism among different processes and threads here.

https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript

This article briefly illustrates some heuristics on whether to choose CSS or JavaScript for web animations. In short, CSS uses declarative ways to define animations and it’s suitable for easier scenarios; while JavaScript uses imperative ways, and it can enable more complex animations.

https://jamstack.wtf/

Actually the blog you are reading now is built with the Jamstack architecture, and being deployed to Netlify.

This article is comprehensive, and it gives clear and simple explanations to common questions we may come up in our mind. In brief, Jamstack is a different way to architect web applications, it utilizes CDNs to serve web pages, so performance is a lot better. Also you can use 3rd party apis or serverless functions as backend.

https://flexboxfroggy.com/

A website that teaches you CSS Flexbox by playing games. You’ll learn these concepts: display: flex;, justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content. Flexbox is a powerful technique for positioning elements based on one dimensional layout such as row or column.

https://codepip.com/games/grid-garden/

A website that teaches you CSS Grid Layout by playing games. You’ll learn these concepts: display: grid;, grid-template, grid-template-columns, grid-template-rows, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row. Grid is a powerful technique for positioning elements based on two dimensional layout.

https://kentcdodds.com/blog/javascript-to-know-for-react

Modern frontend frameworks such as React use JavaScript a lot. Not only you can write application logic using JavaScript, you can also “write” HTML using JavaScript such as JSX and CSS using JavaScript such as styled-components. This blog post is a collection of key JavaScript concepts you should be familiar with if you would like to develop modern JavaScript applications.

Key Takeaways

1. template literals
2. shorthand property names
3. arrow functions
4. destructuring
5. parameter defaults
6. rest/spread
7. ESModules
8. ternaries
9. array methods
10. nullish coalescing operator
11. optional chaining
12. promises and async/await

https://www.merrickchristensen.com/articles/abstraction/

Dealing with complexity is one of the most important topics in the field of computer science. Abstraction can be said the most important technique for managing complexity. You can even said that all computer systems are made of layers of abstraction from hardware to software. This article mainly discusses abstraction in software people’s point of view. Having a good conceptual model towards different levels of abstraction helps you have more clear strategies on dealing with ongoing software development challenges. This article also references some interesting articles worth reading. In short, avoid hasty abstractions and having no abstraction is better than having wrong abstraction.

https://epicreact.dev/one-react-mistake-thats-slowing-you-down/

This article concisely gives a good usage of composition capabilities provided by React. With proper layout provided, we may even don’t need more complex tools such as Context APIs and Redux,etc. to solve the prop drilling issue, instead we can avoid the issue from coming up first!