DEV Community: AW A RE

Installing WSL on another drive in Windows

AW A RE — Mon, 09 May 2022 13:56:10 +0000

The only way to do that is to move the linux distrubition you installed on wsl. I installed Ubuntu on windows as wsl and I showed how to move it step by step.

1.Check WSL 2 installations that are already installed in your computer.

wsl --list -v

If the installation you want to move to another drive is still running we have to stop it with following command. In my case, I want to move Ubuntu, so I am terminating Ubuntu.

wsl -t Ubuntu

2.Export to a folder. (Here exporting Ubuntu as ubuntu-ex.tar to D:\wsl\wsl_export)

wsl --export Ubuntu "D:\wsl_export\ubuntu-ex.tar"

3.Unregister previous WSL installation. When you unregister it will remove Ubuntu from the wsl2 list that we saw earlier.

wsl --unregister Ubuntu

4.import your WSL installation to a folder. This step also re-registers the ubuntu.
wsl --import Ubuntu "D:\wsl_import\ubuntu" "D:\wsl_export\ubuntu-ex.tar"

Here’s a breakdown of the command:

wsl --import: The base command to import a new Linux distribution.
Ubuntu: The name you are giving to the new imported distribution.
D:\wsl_import\ubuntu: The directory where the new distribution will be stored.
D:\wsl_export\ubuntu-ex.tar: The tar file containing the exported distribution that you want to import.

First Glance: Lottie Animations

AW A RE — Tue, 04 Jan 2022 18:26:58 +0000

The first time I heard lottie animations, I googled it and landed lottiefiles.com. It was unfortunate to land lottiefiles.com, because I missed understanding the whole concept of lottie animations. I thought lottie animations bound to lottiefiles.com but in reality, it was not. Lottiefiles.com is only a showroom, library, and gathering point for designers and developers. The main lottie animations is lottie by airbnb. https://airbnb.design/lottie/

Lottie has basicly two step. Firstly it enables you to convert after effect animations to json with custom after effects plugin(bodymovin). Secondly you can render that json file on web with importing lottie.js. I guess it is better to stick with svg and key frame animations to have best outcome and file size.

Use recent versions of Adobe AfterEffects because running plugins in older versions causes problems like blank window. Also, while learning you might want to look into other people's projects, maybe by downloading AE project files from lottiefiles.com. But older versions of After Effects do not open projects files of newer versions. And there is no other way around it.

Building WSL2 Environment for Web Development

AW A RE — Sun, 27 Jun 2021 04:07:28 +0000

This article will not cover all details about every bit. I just want to give what steps needs to be done for building a wsl2 environment. Therefore I can also come back to this article and do things again.
1)Install WSL2(windows subsystem linux) on your windows.
google>> install wsl2

2)Install Ubuntu on top of WSL2 environment.
google>> install ubuntu wsl

3)Install node for ubuntu.
google>> install nodejs linux

4)Install git for ubuntu
google>>install git wsl
source: https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git
bash>>

git config --global user.name "Your Name"
git config --global user.email "youremail@email.com"

5)Install vscode wsl extensions pack. We will use wsl: remote out of that bunch of extensions..
At this point, when you want to open a folder in WSL you can type Remote-WSL: Open Folder in WSL from vscode-command-line-palette(crtrl+shift+P or settings>commandline palette)

6)How to see folders and files inside wsl without using command line. This will be usefull to reach out your project files easily and it will also allow us open our projects on github destkop.

try to go following path in normal windows folder \\wsl$ > You will see Ubuntu Folder >Right click on Ubuntu folder icon > Select Map network drive (Z:) > Now Z: can be used as other partition/drive

Now Ubuntu is visible on drive. So you can easily look up for your files and also open folders in github destkop.

7)Now you can serve your website as you used to. If for example you served your files with npm start successfully but there is no signs of life at localhost. Try this. Create .wslconfig file in C:/Users/<username>/.wslconfig

Inside .wslconfig, write following lines and save it:

[wsl2]

localhostForwarding=true

Then open command line windows: >>>wsl --shutdown

Reload vscode window.

8)Since you can reach both wsl and windows folders it is possible to run project in windows file system from wsl. But performance is so poor. You probably want to move your project folder to the wsl. So in linux use following path to store your projects. home/<username>/. You can also create home/<username>/webprojects/ folder.

source: https://github.com/microsoft/WSL/issues/5298

How to use scss with Svelte?

AW A RE — Mon, 08 Feb 2021 14:56:50 +0000

It might sound a simple question but it took me enough time to almost get frustrated learning svelte. It is simple, but documantations are not simple. So I wanted to walk through this process.

Svelte Installation
Svelte Preprocess
Sass

Svelte Installation

npx degit sveltejs/template my-svelte-project

npm install

npm run dev

Svelte Preprocess

npm install -D svelte-preprocess

After installation,
1)import svelte-preprocess in rollup.config.js.
2)add preprocess: sveltePreprocess()
-source for svelte preprocess

import svelte from 'rollup-plugin-svelte'
+ import sveltePreprocess from 'svelte-preprocess';

export default {
  ...
  plugins: [
    svelte({
+     preprocess: sveltePreprocess(),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css')
      },
    }),
  ],
}

Sass

npm install -D sass

-source for this step

<style type="text/scss">
   @import "./styles.scss";
</style>

<style lang="scss">
    ...
</style>

What microservices mean?(in short)

AW A RE — Mon, 16 Nov 2020 06:46:21 +0000

I have realized every explanation of microservices is confusing. After spending 1 month understanding it I came up with following short definition. Hope it will give you instant knowledge boost about microservices.

They are not library, they are not small web technologies, they are not plural, they are just an aproach to split backend into different pieces, especially when your app and team becomes bigger.

Microservices is microservice architecture. The idea is to simply divide backend of the website into components. Imagine we have a store website.In product page, we can divide the page into pieces as Navbar, Product Details, Popular Products. Here you go. when your backend code are separated according to parts of your micro needs, they call it microservices.

Building Blog with NextJS and Netlify CMS.

AW A RE — Mon, 25 May 2020 08:52:31 +0000

This tutorial have two steps.
_At first we will build markdown blog with nextjs without any netlify cms involved.
_Then at the second step, we will configure our code so we can use netlify cms to manage our blog site.

1.

For the first step we will have help from Ben Awad's youtube tutorial on building next.js blog. It is 27 minutes. But 23 minutes and 43 seconds is enough for our project.

First step is completed which means you have working markdown blog. Let connect it to netlify CMS

2. For the second step:

Change the package.json file

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "npm run build && next export"
  }
}

Create two new folders at public/admin:
index.html
config.yml

Go to public/admin/index.html and paste the following:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@2.9.7/dist/netlify-cms.js"></script>
</body>
</html>

Go to public/admin/config.yml at paste the following:

backend:
  name: git-gateway
  branch: master
media_folder: public/img #images that are uploaded via Netlify Cms interface will be stored in this folder
public_folder: img #I dont know
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "BlogPost" # Used in the UI
    folder: "posts" # The path to the folder where the markdown files are stored
    create: true # Allow users to create new markdown files.
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for front matter. You will need to modify fields according to your project.
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Download", name: "download", widget: "string"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Author", name: "author", widget: "string", default: "Admin"}
      - {label: "Body", name: "body", widget: "markdown"}

Your head section need to have netlify cms script:
Create a Layout component. Add following script to Head of Layout component like below. Then wrap pages with Layout component.

<Head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</Head>

Go to pages>index.js:

  useEffect(()=>{
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  },[])

Create github repository for your project.

Deploy github repo on netlify:
Build command: npm run export
Publish directory: out

on Netlify:
1. Go to Settings > Identity, and select Enable Identity service.
2. Under Registration preferences, select Open or Invite only.
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
4. Scroll down to Services > Git Gateway, and click Enable Git Gateway.

Open your new page via the new Netlify URL, and navigate to /admin

Congrats.