Forem: Kapil Gorve

Create bootstrap like columns using css grid

Kapil Gorve — Wed, 27 May 2020 00:00:00 +0000

Create responsive columns

Create a container and three children. These three children each will occupy 33% available width. We are going to use css grid to create this columns like structure. We are adding background and height to make better visual comparison.

 <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

<style>
.item {
    height: 100px;
    background: yellow;
}
</style>

So it will look like this.

Let's add display:grid property to the container. We will use grid-template-columns property to specify children responsive widths.

.container {
    display: grid;
    grid-template-columns: auto auto auto;
}

Now three-item children each should take 33% width available on the screen. Make sure to match the number of children and their width in grid-template-columns. The width taken by children is responsive. So it will be relative to their parent width. It will take the respective % width available to their parent element.

Now it will look like this -

Using grid-template-columns you can specify number of columns and their widths for a grid container element. What if you want to add some gap between those columns without specifying external margin ? We can use grid-gap for that. Let's add 20px gap between these columns.

.container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
}

Now it will look like this -

CSS grid is a powerful feature to create complex responsive layouts. We don't need special library to create responsive layouts if we take advantage of features like CSS grid and flexbox.

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

aws cli s3 commands

Kapil Gorve — Thu, 30 Apr 2020 00:00:00 +0000

List buckets

aws s3 ls

Output:
Microsoft Windows [Version 10.0.19041.207]
(c) 2020 Microsoft Corporation. All rights reserved.

D:\work>aws s3 ls
2018-11-22 12:23:27 kapilgorve
2020-01-08 10:36:12 macosimage

D:\work>

List files and folders inside a bucket.

aws s3 ls kapilgorve/

Output:
D:\work>aws s3 ls kapilgorve/
                           PRE all/
                           PRE covers/
                           PRE push-notification-react-native/
2019-04-28 14:03:03 0

D:\work>

Copy single file to s3

aws s3 cp test.jpg s3://kapilgorve/blog/covers/

Copy single file to s3 and make public

aws s3 cp test.jpg s3://kapilgorve/blog/covers/ --acl public-read

Copy complete folder to s3

aws s3 cp myfolder s3://kapilgorve/ --recursive

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

How to move WSL2 distro

Kapil Gorve — Wed, 29 Apr 2020 00:00:00 +0000

Edit -

As pointed out by lxrunoffline author, it is supported to move WSL2 distro. No conversion needed. This post is applicable for older lxrunoffline versions. If you are on latest version follow this post - /blog/install-move-wsl-distro-from-c-drive-to-another-drive/

You can use LxRunOffline tool to move WSL 1 distros. I faced errors for moving wsl2 distro. You need to convert your distro to v1 and then move. Then convert again to v2.

Move WSL2 distro from C drive

Install LxRunOffline tool. choco install lxrunoffline

- Stop your distro.

wsl --list --verbose List all the installed distros on your system. I get output like this.

D:\work>wsl --list --verbose
NAME STATE VERSION
docker-desktop Stopped 2
Ubuntu-18.04 Stopped 2
docker-desktop-data Stopped 2
D:\work>

wsl --set-version Ubuntu-18.04 1 This will convert your distro from v2 to v1.
lxrunoffline move -n Ubuntu-18.04 -d G:\wsl\. Move your distro to another drive. My distro name here is Ubuntu-18.04. I am moving it to G drive and wsl folder inside it. It would take some time to finish moving.
wsl --set-version Ubuntu-18.04 2 This will convert your distro from v1 to v2 again.

That's it. You can start to use your distro again.

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

What are the things you found difficult while working with ReactJs ?

Kapil Gorve — Tue, 28 Apr 2020 11:37:49 +0000

Context - Like getting a job with React. Writing React Code. OSS solutions in React. Experience with the community. Available resources. Working as a Team with React codebase.

For me - Not learning Redux prevented me from lot of jobs. I had a difficult time learning Redux.

Move/Install WSl distro from C drive to another drive

Kapil Gorve — Sun, 26 Apr 2020 00:00:00 +0000

I have a small 128GB SSD. I run out of space when I install ReactNative related dev tools. So I wanted to find a way to install/move my existing distro to different location than C drive.

Move WSL to another drive

- Install `LxRunOffline` tool. `choco install lxrunoffline`

lxrunoffline list List all the installed distros on your system. I get output like this.

Microsoft Windows [Version 10.0.19041.207]
(c) 2020 Microsoft Corporation. All rights reserved.
D:\work>lxrunoffline list
Ubuntu-18.04
docker-desktop
docker-desktop-data
D:\work>

lxrunoffline move -n Ubuntu-18.04 -d G:\wsl\ . Move your distro to another drive. My distro name here is Ubuntu-18.04. I am moving it to G drive and wsl folder inside it. It would take some time to finish moving.

You can use the same move command to move your distro from default location to a different location inside C Drive.

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

Set environment variable in Windows and WSL Linux in terminal

Kapil Gorve — Tue, 21 Apr 2020 00:00:00 +0000

Windows set env variable from the command line

Open command line. set API_KEY=123
echo %API_KEY% should print your API_KEY.
This env variable is set for the context of the current cmd line.

Windows set env variable permanently using the command line

Open the command line as admin. setx API_KEY "123" /M
Close the current shell. Open a new shell.
echo %API_KEY% should print your API_KEY.
This env variable is set for all future shell instances permanently for your system.

WSL Linux set env variable from a bash terminal

Launch your wsl instance.
$ API_KEY=123
$ echo $API_KEY should print your API_KEY.

WSL Linux set env variable permanently from a bash terminal

Launch your wsl instance.
$ sudo vim ~/.bashrc
Enter your password.
Press i to go into edit mode. Go to the end of the file using arrow key.
Add your variable as API_KEY=123 at the end of the file. If your variable has spaces, use quotes.Example - API_KEY= 'My Key'
Press esc key to get out of edit mode.
Enter :wq and press enter . This will save and close the file.
$ source ~/.bashrc will load your recent changes into your current shell.
$ echo $API_KEY should print your API_KEY.

This post was originally published at https://www.jskap.com/blog/set-environment-variables-windows-wsl-linux/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

GatsbyJs - Add environment variables

Kapil Gorve — Mon, 20 Apr 2020 00:00:00 +0000

Development Environment

Create a new file named as .env.development at the root of your project.
Add your variable to the newly created file. Example - TEST_KEY=123
Change your npm run develop command to set environment.

For Windows -

    "develop": "set GATSBY_ENV=development && gatsby develop"

For Linux -

    "develop": "GATSBY_ENV=development gatsby develop"

Restart your dev environment. So Gatsby will load your new env file.
You should be able to access your env variables using process.env.TEST_KEY in any js file.

Production Environment

Create a new file named as .env.production at the root of your project.
Add your variable to the newly created file. Example - TEST_KEY=123
Change your npm run build command to set environment.

For Windows -

    "develop": "set GATSBY_ENV=production && gatsby develop"

For Linux -

    "build": "GATSBY_ENV=production gatsby build",

This is only if you want to build on local.

If you are using any providers like Netlify use the Linux version. You will also need to add environment variables in the service provider.

For Netlify it is in Site Settings > Build&Deploy > Environment

This post was originally published at https://www.jskap.com/blog/gatsby-add-environment-variables/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

Gatsby Error - Do not use quotes and apostrophe in frontmatter properties

Kapil Gorve — Sun, 19 Apr 2020 00:00:00 +0000

Error Message - can not read a block mapping entry; a multiline key may not be an implicit key at line

I was using Apostrophe in the title. This is a parsing error. Remove quotes or apostrophe from your markdown frontmatter properties.

This post was originally published at https://www.jskap.com/notes/gatsby-error-cannot-read-block-mapping-entry/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

Create React App Error - Template not provided

Kapil Gorve — Mon, 13 Apr 2020 00:00:00 +0000

^{Photo from CRA Docs}

Create React App Error

Error Message - A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported.

Solution

New versions of Create React App doesn't support global installs. Remove it globally.Try npm uninstall -g create-react-app. Then try again. Didn't work for me. Even after removing create-react-app globally. If your system has any projects using CRA in parent directory npm will pick up that version.

Try npx --ignore-existing create-react-app my-app. This will ignore any installs you have in your system.

Final Solution

I had to manually remove CRA from global installs.Windows path - C:\Users\your_username\AppData\Roaming\npm .Delete file named create-react-app and create-react-app.cmd.On Unix systems it should be located in - /usr/local/bin. Don' forget to remove executable file. For windows it was .cmd file.

CRA - create-react-app

This post was originally published at https://www.jskap.com/notes/create-react-app-template-not-provided/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

React Testing Library fireEvent.change example

Kapil Gorve — Thu, 09 Apr 2020 00:00:00 +0000

Example -

import React from 'react';
import { cleanup, render, fireEvent } from '@testing-library/react';

import App from './App';

afterEach(cleanup);

it('Enter principal amount', async () => {
  const { getByTestId } = render(<App />);
  const principalInputElement = getByTestId('principalInput') as HTMLInputElement;
  fireEvent.change(principalInputElement, {target: {value: '20000'}});
  expect(getByTestId('emititle')).toHaveTextContent('1758');
});

This post was originally published at https://www.jskap.com/notes/react-testing-library-fireevent-change/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

How to exit Vim

Kapil Gorve — Wed, 08 Apr 2020 00:00:00 +0000

Press esc key.
Type, :q, press return.
Type, :wq, press return (If you wanna save)OR
Type, :q!, press return (If you don't wanna save)

This post was originally published at https://www.jskap.com/notes/how-to-exit-vim/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

Newsletter lesson learned -Dont use free emails like Gmail

Kapil Gorve — Wed, 08 Apr 2020 00:00:00 +0000

Always use professional email ex- john@snow.com rather than free email ex john@gmail.com for sending mass emails/newsletters.

Free email providers like Gmail, Yahoo etc will mark your sender email as spam by default. This is the official policy from these email providers. They are meant for personal use.

My delivery rate jumped from 20% to 80% just by making a switch in email sender.

This post was originally published at https://www.jskap.com/notes/newsletter-lesson-leared-dont-use-free-emails/

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at https://twitter.com/kapilgorve

Forem: Kapil Gorve

Create bootstrap like columns using css grid

Create responsive columns

aws cli s3 commands

List buckets

List files and folders inside a bucket.

Copy single file to s3

Copy single file to s3 and make public

Copy complete folder to s3

How to move WSL2 distro

Edit -

Move WSL2 distro from C drive

- Stop your distro.

What are the things you found difficult while working with ReactJs ?

Move/Install WSl distro from C drive to another drive

Move WSL to another drive

- Install LxRunOffline tool. choco install lxrunoffline

Set environment variable in Windows and WSL Linux in terminal

Windows set env variable from the command line

Windows set env variable permanently using the command line

WSL Linux set env variable from a bash terminal

WSL Linux set env variable permanently from a bash terminal

GatsbyJs - Add environment variables

Development Environment

Production Environment

Gatsby Error - Do not use quotes and apostrophe in frontmatter properties

Create React App Error - Template not provided

Create React App Error

Solution

Final Solution

React Testing Library fireEvent.change example

How to exit Vim

Newsletter lesson learned -Dont use free emails like Gmail

- Install `LxRunOffline` tool. `choco install lxrunoffline`