Will WSLv2, new terminal, and PowerToys make me switch?

So I’ve been using Linux on my devices for 2 years now, including Arch (btw) for the past 6 months. Here is what I think about Windows 10 after using it for a week.

WSL v2

You might’ve heard, Windows 10 will soon ship a real Linux Kernel with the newest releases. No need for Cygwin or a Linux VM.

Image for post
Image for post

It’s surprisingly lightweight as it runs on Hyper-V, and doesn’t use much RAM or CPU at all. It launches pretty fast and is even integrated into VsCode.

What’s the catch then? Is it slow? …


A quick tutorial using Netlify and Buddy

Image for post
Image for post
Photo by Simone Pellegrini on Unsplash

For this tutorial, I will be using React and Gatsby, as it supports some really great features out of the box (like GraphQL, image compression, and progressive web apps). However, you can use pretty much anything you like:

  • Gridsome — uses Vue.js.
  • Nextjs — uses React, even supports server-side rendering and AMP pages.
Image for post
Image for post
A basic React blog.

To get started, you’ll first need to install gatsby-cli and create a basic project:

npm i -g gatsby-cli
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
cd my-blog

If you want to run the project locally, use npm start. This will launch your project on port 8000:

Image for post
Image for post

You will probably want to make some changes to it and then upload the project to GitHub; you can find the link to mine here. …


Forward ports to your local machine

Image for post
Image for post
Photo by Daniel Jerez on Unsplash.

Let’s say you own the domain example.com and the port 22 works as an SSH port for some VM/server. This means that you can SSH into it like so:

ssh user@example.com

But SSH can do much more. One of its features is a reverse TCP proxy, which can expose a port on your local device with one command:

ssh -R \*:80:localhost:8080 -N root@example.com

The -N flag isn’t required, which is to say that we don’t need to execute any commands after SSHing. …


VS Code has nothing on Emacs

Image for post
Image for post
https://unsplash.com/photos/vc3iVL_znJ8

1. Org Mode

You’ve probably seen/used Markdown before. Org mode has a similar syntax and is also supported by GitHub READMEs, but unlike Markdown it has one specification and it doesn’t have hundreds of flavors.

Keep reading to see what can actually be done, or skip to the following sections:

  • 3. Export Org to presentations and documents.
  • 5. In-editor LaTeX preview.
  • 6. Org agenda
  • 9. Executing code blocks.
  • 11. Org tables.

2. Vim Bindings

Doom Emacs has great Vim bindings, and so, so many great leader features out of the box.

Unlike VS Code, the Vim bindings plugin isn’t terribly slow, it feels as fast as native, not to mention that they work everywhere; the terminal, opening files, search and replace, and much more, but more on that later. …


How I use my XPS 15 with Linux, Vim, and TeX Live/Pandoc to take high-quality notes that will last forever

Image for post
Image for post

My Background

I’m a first-year computer science student at the University of Southampton, England. I don’t like taking notes on paper. For my A-levels, I used my Note 8 with its stylus to take my notes.

I tend to lose my paper notes or spill things on them, leading to me rewriting them which becomes counter-productive really quickly.

Writing my notes on a laptop allows me to access them anywhere, anytime. I can also go back to them in five to ten years if I forget something, without having to keep thick folders with old paper notes. …


Hardware Acceleration to reduce CPU usage

How videos are rendered (Generally)

Storing information about each frame of the video would be a total waste of your internet bandwidth, which is why we have different encoding systems. One of the main ones include:

  • MPEG — sends information about changes since last frame rather than transmitting another full frame
  • H.264 — same as MPEG, but with extra features such as Motion Compensation (detects movement of small blocks each frame), and a Deblocking Filter (removes high compression artefacts).
  • VP8/VP9even more complex compression, main difference is the ability to compress each frame and changes between frames.
  • And many more, but this isn’t a Video Codec comparison article. …


Switching from VS Code to Neovim for React and TypeScript development

Image for post
Image for post

Disclaimer

If you’ve never used Vim before, you’ll struggle with following this tutorial. However, if you want to see what can be done with Vim, I have .GIFS so keep scrolling.

Installing Neovim

Linux

If you’re running Ubuntu or any other Linux distro, you can use its package manager as such:

sudo apt install neovim

macOS

Same goes with macOS’ Homebrew:

brew install neovim

Windows

On Windows, you can use one of the package managers such as Chocolatey:

choco install neovim

Or Scoop.

scoop install neovim

If you’re having problems with installation, please visit the installation Wiki.

Setting Up Neovim

Although you can install Neovim on any platform, I’d highly recommend running Linux/macOS. …


Do we need React/Angular/Vue in 2019?

With many EcmaScript features coming to the modern browsers, you might be wondering what else do we need web frameworks for. Looking back, Angular 1.x, Backbone, JQuery and other libraries come and go, but the new features such as const , let , class and many others are here to stay, so it might be worth looking into the new kids on the block.

Custom Elements v1 + Shadow DOM v1

Image for post
Image for post
>87% of the browsers already support custom elements

with Custom Elements, you can create your own HTML tags that contain your own component logic and self-contained styles, all that without a single library used. But is this enough to replace react’s component system? …


Learn how to build a zoom feature for your react app using react-pose

What I will be building

You might have noticed that Medium has a pretty great image preview UI and this is what I will be implementing today:

Image for post
Image for post

And if you would like to see my final implementation of if, this is it:

Image for post
Image for post

Tip: Use Bit (Github) to easily share and reuse your React components between your apps, and build faster as a team with a shared component hub.

Picking React & React-Pose

I decided to go with react for this one. The algorithm could be easily ported to Angular, Vue or even pure web components but I think React is the main web standard at the moment.

Image for post
Image for post

In terms of the transitions, I don’t think this type can be easily done with CSS, so I needed to pick between JS animation solutions for React and decided to go with react-pose as I already used it before and it’s a pretty great library which is also available for other libraries and pure JS. …


Techniques you can implement to make your React app blazing fast

Almost 60% of users leave if the page doesn’t load within 3 seconds. 80% of users don’t come back. So if you want your business/app/website to succeed, you need it to be fast.

Benchmarks

Before I tell you what I did differently, here are the numbers. This is assuming you have a fast 3g connection, but in reality, most users will have a much faster connection these days.

Image for post
Image for post
  • For all the loading benchmarks, I enabled fast 3g throttling and measured the load time on chrome dev tools > network
  • First load = caching disabled
  • 2nd load= load after caching enabled

As you can see the difference is pretty large especially on slower networks. Now, time to see how I did it all. …

About

Dominik Tarnowski

Don't forget to clap 👏 and follow. Student & Software Developer. React. Go. Rust. https://tdom.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store