DEV Community: Wenchen (Neo) Li

(Correctly) Telling git about your SSH key for signing commits

Wenchen (Neo) Li — Fri, 26 Aug 2022 21:30:47 +0000

GitHub recently added a feature to support SSH commit verification, which in my opinion, should be easier than using GPG. (Git has released signing with SSH key since 2.34.)

After generating your SSH key pair (which you can learn about from here, you now need to tell git about it. And the way to do it is through the user.signingkey git config.

Good

However for some reasons, almost all of the tutorials and instructions online are saying you would need to copy and paste the literal public key as the git config value like this:

// NOT 100% correct example, explanation below
$ git config --global user.signingkey 'ssh-ed25519 AAAAC3(...)'

Better

While it seems to work (actually only with non-physical keys), I found that you could also provide your public key file path like this, which might be better in some ways:

git config --global user.signingkey ~/.ssh/id_ed25519.pub

At the same time I also found that the "proper" way to do literal public key value is to prefix with key::, like this:

git config --global user.signingkey "key::ssh-ed25519 (...)"

I found out from what appears to be the git mailing list archive? https://lore.kernel.org/git/20220628162342.ootjobbjtxg7b7ay@fs/t/

Physical security keys

All the FIDO2 devices (not only the more sophisticated YubiKeys, which can do resident/discoverable keys though) should be able to generate SSH keys since OpenSSH 8.2. So I wanted to utilize my physical security keys with this, and that's when I got this error:

Couldn't load public key sk-ssh-ed25519@openssh.com AAAA(...)
: No such file or directory?

That's actually when I had to search and found out for a SSH key pair generated from a physical security key which has sk-ssh prefixed in public key literal string, or _sk suffixed in the key file name, a prefix of key:: is required for the literal public key git config value:

git config --global user.signingkey "key::sk-ssh-ed25519@openssh.com AAAA(...)"

File path is just easier

So in conclusion, using file path for this config is just easier in many ways and would prevent the prefix missing error (No such file or directory?) from the root of it.

Some lines for copy and paste

Lastly as bonus content, here are some lines for your convenience 😆

Git config to use SSH for signing:

git config --global gpg.format ssh

Turn on commit and tag signing respectively by default:

git config --global commit.gpgsign true
git config --global tag.gpgsign true

Set the user.signingkey to a pub key generated from a physical security key:

git config --global user.signingkey ~/.ssh/id_ed25519_sk.pub

// or for an ECDSA key
git config --global user.signingkey ~/.ssh/id_ecdsa_sk.pub

You can also set it to automatically use the first available key from your ssh-agent:

git config --global gpg.ssh.defaultKeyCommand "ssh-add -L"

Note that all of the --global git config option shown is optional as it's what you likely want, however you can set all of these as local config.

Also note that while I don't know whether there's any difference in other OSs, this was tested on macOS 12.3 only.

Enjoy signing commits with your SSH key! 🎉

New laptop sticker from Hacktoberfest!

Wenchen (Neo) Li — Fri, 10 Jan 2020 19:30:33 +0000

So last week I received my t-shirt and stickers from Hacktoberfest last year. I am a minimalist when it comes to laptop stickers; I have had no stickers for a very long time, and then I had just one for a very long time.

So when I got the stickers, at first I thought I wouldn't want any more stickers on my laptop. But then after carefully thinking about it, I decided to put the sloth on and be like:

So it would be like: my website is faster than yous, (then pointing to the sloth) and this is your website. 😆

How to requestPermission for devicemotion and deviceorientation events in iOS 13+

Wenchen (Neo) Li — Fri, 13 Sep 2019 00:03:48 +0000

Background

Since iOS 12.2, Apple decided that for privacy reasons, the in-browser access to the device motion and orientation events is off by default. And now maybe they realized this might be a mistake, so in iOS 13 they changed the permission request behavior similar to how the camera permission is requested.

So now when we try to addEventListener to devicemotion or deviceorientation, we would see this warning in the console:

To request permission, we would just need to call a method on the DeviceMotionEvent or DeviceOrientationEvent: requestPermission 😂 It would return a promise that always resolve to a PermissionState which could be granted or denied (so basically Promise<'granted'|'denied'>).

One more thing

One more thing to keep in mind is that requestPermission could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.

Otherwise you would get this error:

The code to copy

For devicemotion events:



  function onClick() {
    // feature detect
    if (typeof DeviceMotionEvent.requestPermission === 'function') {
      DeviceMotionEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('devicemotion', () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }

and for deviceorientation events:



  function onClick() {
    // feature detect
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
      DeviceOrientationEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('deviceorientation', () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }

That's it. Thank you for reading!

Pursue a CS Degree or not? As a Front-End Developer

Wenchen (Neo) Li — Sat, 30 Mar 2019 14:30:00 +0000

I've been considering this for a while, that if I should go pursue a undergrad degree in computer science after I had self-taught myself front-end development and have been working for time for 2.5 years.

I guess it also depends on my career goals: if I want to keep doing pixel perfect performant web stuff, and then become a manager some day in the future, then I probably don't need a degree. But if I want to explore more in the programming world, or even science part of the computer world with other career options, then I probably would want to go back to school for it...

What's your experience? What do you think? 🤔

Today I Finished MITx 600 Part 1!

Wenchen (Neo) Li — Fri, 22 Mar 2019 01:40:47 +0000

Tonight I finished the MITx: Introduction to Computer Science and Programming Using Python right on deadline! (well actually a little passed the deadline) 🎉

As a front end developer who doesn't have a degree in computer science, I always desire to learn more about "the real stuff" of computer science. Last year I took HarvardX CS50x (only the C part though) and felt really great about it. The content is not only useful but also fascinating.

So this year I decided to try this MIT one out again; I said again because I actually tried it when I was in school but couldn't finish it (twice!). But this time despite the fact that I'm working now and have less time to work on this, I am still able to finish it! (Big thanks to my girlfriend @rachel for supporting and producing me! 😄)

To continue this momentum of success, next week I'll start on the second part of the MITx 600 course: Introduction to Computational Thinking and Data Science.

In the future I'm hoping to also get some more math in my brain. I've been looking at the courses from here. And by the way, this is a great resource to gradually learn computer science with a clear plan! I really appreciate the community that put this together:

ossu / computer-science

🎓 Path to a free self-taught education in Computer Science!

Open Source Society University

Path to a free self-taught education in Computer Science

Summary

The OSSU curriculum is a complete education in computer science using online materials. It's not merely for career training or professional development. It's for those who want a proper, well-rounded grounding in concepts fundamental to all computing disciplines, and for those who have the discipline, will, and (most importantly!) good habits to obtain this education largely on their own, but with support from a worldwide community of fellow learners.

It is designed according to the degree requirements of undergraduate computer science majors, minus general education (non-CS) requirements as it is assumed most of the people following this curriculum are already educated outside the field of CS. The courses themselves are among the very best in the world, often coming from Harvard, Princeton, MIT, etc., but specifically chosen to…

View on GitHub

Cool, that's all I wanted to share, and I hope we could all keep learning and having fun!

React SSR with PHP and WordPress

Wenchen (Neo) Li — Thu, 14 Mar 2019 19:32:59 +0000

I am looking for a solution that use React for the font-end and WordPress for the backend with the following requirements:

No static rendering at build time:
- Was actually thinking Gatsby or React Static at first, but it requires not to re-build every time the content updates
No node.js middleware:
- Cannot add a middleware to call the WordPress api and then render React
No classic SPA:
- For SEO and performance considerations, we want not just a blank page coming back from the response

A potential solution we're looking at is to use Gatsby or React Static to build and then use PHP to update the generated HTML and JSON with the latest content, which isn't really an ideal solution in my opinion; so reaching out to see if there's any other solutions.

Thanks a lot!

Microsoft open-sources its Windows calculator on GitHub

Wenchen (Neo) Li — Fri, 08 Mar 2019 16:45:53 +0000

I believe no one has posted this after a few days of them making it open source.

Microsoft has been really trying to embrace the open source community! And we are really happy to see that! 😆

microsoft / calculator

Windows Calculator: A simple yet powerful calculator that ships with Windows

Calculator

The Windows Calculator app is a modern Windows app written in C++ and C# that ships pre-installed with Windows The app provides standard, scientific, and programmer calculator functionality, as well as a set of converters between various units of measurement and currencies.

Calculator ships regularly with new features and bug fixes. You can get the latest version of Calculator in the Microsoft Store.

Features

Standard Calculator functionality which offers basic operations and evaluates commands immediately as they are entered.
Scientific Calculator functionality which offers expanded operations and evaluates commands using order of operations.
Programmer Calculator functionality which offers common mathematical operations for developers including conversion between common bases.
Date Calculation functionality which offers the difference between two dates, as well as the ability to add/subtract years, months and/or days to/from a given input date.
Calculation history and memory capabilities.
Conversion between many units of measurement.
Currency conversion based…

View on GitHub

🎉

CSS Animation: Growing SVG Arrow

Wenchen (Neo) Li — Thu, 28 Feb 2019 17:00:01 +0000

I have been doing CSS animations with SVG arrows, I thought they're pretty unique but aren't sure if other people think the same. So I'm wondering if there are people who find these interesting and want to know (if haven't already) how to make cute and unique animations like these:

Please leave a comment below to let me know what do you think! (interested, not really interested or already know how and it's too easy) ❤️

Selecting elements in children components within CSS modules

Wenchen (Neo) Li — Thu, 21 Feb 2019 17:00:02 +0000

CSS modules are great, they encapsulate component styles to themselves: so that we could start using .container for everything in everywhere again 😆

Not too long ago create-react-app released version 2 with the feature of using CSS modules. I'm sure once people upgrade to react-scripts@2, they would immediately opt-in with excitement and start using CSS modules without a doubt: it makes CSS modular like everything else!

Inevitable problem

But sooner or later, you would realize there is one thing we cannot easily do anymore in CSS modules – a rather important (if not fundamental) thing in CSS: selecting and overwriting the styles of the (deep nested) child component that’s in a different module from the parent.

How Angular and Vue solves the problem

Before we come back to react, let’s take a look at how Angular approaches the problem. In Angular, style encapsulation is actually done in a different way with emulated shadow DOM. The actual implementation is through adding extra generated attributes to the DOM elements (rather than changing the class names, which will be mentioned below).

The way to target the child components is simple: you would just need to use ::ng-deep (or /deep//>>>) before the children selectors. And it would generate the styles for that element without any attribute attached, thus achieving the goal to target any nested child elements and get around the view encapsulation.

With Vue, I haven’t work with it that much, but I saw this and assumed it is pretty similar to Angular in terms of implementation.

How we could do it in React with CRA

But in CSS modules, the actual implementation is to hash and rename the class names to make sure they are unique.

That made my first trial to do things in a way that’s similar to Angular failed. My first intuitive way to do it is to use the : global keyword to un-encapsulate (or de-encapsulate) the child selectors, but that didn't work as the children's selectors are hashed and renamed, which can't be easily targeted in this way.

Then I talked to @alemesa and found out @donghyukjacobjang and he are doing each component with an un-scoped normal string class name which has the sole purpose of being targeted from outside of the CSS module. This way has been working for them quite well, but in my opinion, this way is more like a convention that people have to follow; and it somewhat defeats the purpose and benefits of using CSS modules.

After doing some searches, I still couldn’t find anything that’s quite similar to how Angular and Vue do it. But I did find an interesting solution here that could satisfy me and my needs. It suggests that we could define a child and its styles in a parent module first, and then import the child class name and pass that down to the child as one of the props in JSX. This solution, in my opinion, is still kind of a way by convention as the children would need to know to expect and use the class names from the props. But it’s the best solution I could find/think of at the moment, and it also provides more predictability and stability compared to the Angular/Vue way.

Conclusion

Although at the moment if you ask me, I would still prefer the shadow DOM implementation and emulation with HTML element attributes like the way in Angular, CSS modules are great too! It’s very easy to opt-in (thanks to CRA too!), and also you could migrate to it gradually and starting enjoying its benefit today.

All I have to say is that with all the benefits, it also comes with some minor issues that you need to consider before jumping into it, and the problem we discussed here is one of them. Moreover, I’d like to also point out a few other things I noticed for your consideration:

It is recommended that you use camelCase for the class names. (You could use kabab-case, but you would not want to.)
The generated class names (with the CRA setup) are not uglified and usually very long (long enough to increase the bundle size).

Please leave a comment to share your opinions and solutions to this problem, cheers!

The pursuit of difference between CSS grid and flexbox

Wenchen (Neo) Li — Fri, 15 Feb 2019 16:00:01 +0000

Yesterday I came across the discussion of this question:

Chris Coyier

@chriscoyier

For y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference?

15:53 PM - 25 Jan 2019

And it seemed like the best answer is this from Rachel:

Rachel Andrew

@rachelandrew

@chriscoyier Flexbox is for one dimensional layout. A row OR a column. Grid is for two dimensional layout. Rows AND columns.

15:55 PM - 25 Jan 2019

It's a very straight forward answer and I was like "oh, ok." and moved on.

🤔

But last night when I was in bed, I got started thinking about this again: I just didn't think this is it.

And when I was thinking it more, I realized it's also about the organization and relationship between the parent and the children: in flexbox, the children dictate how the layout is organized as well as its own space proportion; meanwhile in grid, the parent decides how things are aligned and what proportion of space each child should take.

After realizing that, I went to sleep peacefully. 🌝

And this morning, I can't wait to share my discovery with the community.
When I was looking for the tweets above to embed, I saw the other branch of the thread, which has the same conclusion as I do! 🤓

Chris Coyier

@chriscoyier

I'm not the world's biggest fan of the 1D vs 2D differentiation of grid vs flexbox, only because I find most of my day-to-day usage of grid is 1D and it's great for that. It is a strong distinction though that 2D layout is _possible_ with grid though in ways it is not in flexbox.

16:11 PM - 25 Jan 2019

Rachel Andrew

@rachelandrew

@chriscoyier There is a more subtle difference in whether you want to specify down from the parent, or up from the children. I often explain flexbox as being best when you have a bunch of stuff of different sizes and just want a reasonable in proportion layout from them.

16:20 PM - 25 Jan 2019

So the conclusion is that the difference between flexbox and grid is not just one dimensional or two, but also whether the parent or the children should specify the size and proportion of the content.

Last but not least, in case you're wondering which one to choose and use, here's a way to help you decide:

Rachel Andrew

@rachelandrew

@chriscoyier If you start constraining all your flex items with a width, then more often than not it will be easier to use grid.

16:21 PM - 25 Jan 2019

Cheers and ciao! 😆

React Hooks Released! (Finally 🎉)

Wenchen (Neo) Li — Wed, 06 Feb 2019 16:28:16 +0000

After a lot of waiting...
// Detect dark theme var iframe = document.getElementById('tweet-1092920897143521287-460'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1092920897143521287&theme=dark" }

We finally have React with Hooks to use! https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

I also created a custom hook to use scroll position last month:

neo / react-use-scroll-position

A react hook to use scroll position

react-use-scroll-position

A react hook to use scroll position.

Usage

In a React functional component:

import React from 'react';
// Usually you would just need to import one of the following
import { useScrollPosition, useScrollXPosition, useScrollYPosition } from 'react-use-scroll-position';

function Example() {
  const { x, y } = useScrollPosition();
  const scrollX = useScrollXPosition();
  const scrollY = useScrollYPosition();
  return (
    <>
      <p>
        {x} should equal to {scrollX}.
      </p>
      <p>
        {y} should equal to {scrollY}.
      </p>
    </>
  );
}

In a custom React hook

import { useScrollPosition } from 'react-use-scroll-position';
function useYourImagination() {
  const { x, y } = useScrollPosition();
  return getSomethingAwesomeWith(x, y

…

View on GitHub

DEV Community: Wenchen (Neo) Li

(Correctly) Telling git about your SSH key for signing commits

Good

Better

Physical security keys

File path is just easier

Some lines for copy and paste

New laptop sticker from Hacktoberfest!

How to requestPermission for devicemotion and deviceorientation events in iOS 13+

Background

One more thing

The code to copy

Pursue a CS Degree or not? As a Front-End Developer

Today I Finished MITx 600 Part 1!

ossu / computer-science

🎓 Path to a free self-taught education in Computer Science!

Open Source Society University

Contents

Summary

React SSR with PHP and WordPress

Microsoft open-sources its Windows calculator on GitHub

microsoft / calculator

Windows Calculator: A simple yet powerful calculator that ships with Windows

Calculator

Features

CSS Animation: Growing SVG Arrow

Selecting elements in children components within CSS modules

Inevitable problem

How Angular and Vue solves the problem

How we could do it in React with CRA

Conclusion

The pursuit of difference between CSS grid and flexbox

🤔

React Hooks Released! (Finally 🎉)

neo / react-use-scroll-position

A react hook to use scroll position

react-use-scroll-position

Usage

In a React functional component:

In a custom React hook