teleren/devto huggingface dataset:
How do I undo 'git add'?
Tags: beginners, git, codenewbie, devops
Published: 2022-01-29 14:14:43

Lets say we either did a `git add <file-name>` to stage a specific modified file or `git add .` to stage all the modified files.

We may consider `git reset` but we must do git reset only if we are trying to unstage "a change" in the file.

When we need to just unstage the file. 

Good practice is, 

if we done a `git add <file-name>`

Then the solution is `git rm --cached`

if we done a `git add .`

Then the solution is `git rm -r --cached`, as the `git add .` is recursive, we need to bring in the flag `-r`

#Support Us: [Buy Me a Cookie 🍪](https://www.buymeacoffee.com/dogealgo)
Adding a static block in checkout
Tags: magento2
Published: 2022-01-29 14:13:03

- Create a CMS block with identifier set as "cms_block_identifier_notice"

- In Vendor\Checkout\etc\frontend\di.xml

```
<type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="vendor_show_notice" xsi:type="object">Vendor\Checkout\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
<type name="Vendor\Checkout\Model\ConfigProvider">
        <arguments>
            <argument name="blockIdShowNotice" xsi:type="string">cms_block_identifier_notice</argument>
        </arguments>
    </type>
```

- In a Vendor/Checkout/Model/ConfigProvider.php

```
<?php
namespace Vendor\Checkout\Model;

use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
{
    /** @var LayoutInterface  */
    private $layout;

    /**
     * @var string
     */
    private $cmsBlock;

    /**
     * @param LayoutInterface $layout
     * @param $blockIdShowNotice
     */
    public function __construct (
        LayoutInterface $layout,
        $blockIdShowNotice
    ) {
        $this->layout = $layout;
        $this->cmsBlockNotice = $this->constructBlock($blockIdShowNotice);
    }

    /**
     * Get block data
     *
     * @param $blockId
     * @return mixed
     */
    public function constructBlock($blockId)
    {
        return $this->layout->createBlock('Magento\Cms\Block\Block')
            ->setBlockId($blockId)->toHtml();
    }

    /**
     * Pass config values to checkout
     *
     * @return array
     * @throws \Magento\Framework\Exception\LocalizedException
     * @throws \Magento\Framework\Exception\NoSuchEntityException
     */
    public function getConfig()
    {
        $config = [];
        $config['cms_block_notice'] = $this->cmsBlockNotice;
        return $config;
    }
}
```

- In your .html file and the content will be displayed

```
<div data-bind="html: window.checkoutConfig.cms_block_notice"></div>
```
What is the difference between 'git pull' and 'git fetch'?
Tags: git, devops, beginners, codenewbie
Published: 2022-01-29 13:58:11

```
git fetch
```
Explanation: `git fetch` fetches commits from the target branch that is not in our current local branch and stores them in our local repository. 

It does not merge. Which means we have the changes from target branch but not yet merged to our local branch.

```
git pull
```
 Explanation: `git pull` does both `git fetch` and `git merge`. 

Which means changes from target branch will be fetched and merged to our local branch.

#Support Us: [Buy Me a Cookie 🍪](https://www.buymeacoffee.com/dogealgo)
Javascript Quora Community
Tags: javascript, webdev, react, devops
Published: 2022-01-29 13:57:13

Hi , today i am come up with a interesting Quora community. In this community you can post your thoughts, ask questions , answer the doubts , Learn new things & even more about **Javascript.**

If your interested, feel free to join the community - https://javascriptdev.quora.com/.

Let's share our Knowledge about Javascript.
Squoosh cli
Tags: cli, webdev
Published: 2022-01-29 13:56:35

---
canonical_url: https://waylonwalker.com/til/squoosh-cli/
published: true
tags:
- cli
- cli
- webdev
series: til
title: Squoosh cli
---

Today I discovered a sweet new cli for compressing images. [squoosh cli](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) is a wasm powered cli that supports a bunch of formats that I would want to convert my website images to.

## Web App

First the main feature of squoosh is a [web app](https://squoosh.app) that makes your images smaller right in the browser, using the same wasm.  It's sweet!  There is a really cool swiper to compare the output image with the original, and graphical dials to change your settings.

## CLI

What is even cooler is that once you have settings you are happy with and are really cutting down those kb's on your images, there is a copy cli command button!  If you have npx (which you should if you have nodejs and npm) already installed it just works without installing anything more.

![The button on squoosh.app](https://images.waylonwalker.com/squoosh-cli-button.png)


## Converting all of my png's to webp

I copied the command that it gave me for converting to webp, and set it up to run on all of my pngs.

```
npx @squoosh/cli --webp \
  '{"quality":75 \
    "target_size":0 \
    "target_PSNR":0 \
    "method":4 \
    "sns_strength":50 \
    "filter_strength":60 \
    "filter_sharpness":0 \
    "filter_type":1 \
    "partitions":0 \
    "segments":4 \
    "pass":1 \
    "show_compressed":0 \
    "preprocessing":0 \
    "autofilter":0 \
    "partition_limit":0 \
    "alpha_compression":1 \
    "alpha_filtering":1 \
    "alpha_quality":100 \
    "lossless":0 \
    "exact":0 \
    "image_hint":0 \
    "emulate_jpeg_size":0 \
    "thread_level":0 \
    "low_memory":0 \
    "near_lossless":100 \
    "use_delta_palette":0 \
    "use_sharp_yuv":0 \
    }' \
    static/*.png -d squoosh-webp
```

I opened my images repo and converted all pngs to webp using the command above. I got 94% compression on my existing pngs without resizing anything.  This is dang impressive, and not too hard to do.  I do want to refactor my images site at some point and include this as part of the ci system.

![resulting file sizes for converting png to wepb.](https://images.waylonwalker.com/squoosh-webp-results.png)

I also converted to avif, but it sent all my cpus to 100 for quite awhile, for only another 2MB total.  Not sure if its worth it or not.
React hooks
Published: 2022-01-29 13:46:27

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components.

**useEffect**
The first one is a callback (a function), and the second one is the dependency array. It takes the form of an array of variables. The React hooks that have dependency arrays are useEffect, useLayoutEffect, useCallback, useMemo.
https://devtrium.com/posts/dependency-arrays
- The dependency array basically tells the hook to "only trigger when the dependency array changes". 
useEffect(() => {
  // this will run if `counter1` OR `counter2` changes
  console.log('Either counter1 or counter2 changed (or both');
}, [counter1, counter2]);

- Empty dependendy array means that the hook will only trigger once when the component is first rendered.
useEffect(() => {
  console.log('I will run only once');
}, []);

- The rule is: if any variable is used inside the hook but is defined outside of it, then it should go in the dependency array.

-  The goal of the dependency array is to make the hook trigger when one of the values changes. There's no point putting stuff in there that won't change.

**useState**
The first parameter is the state & second parameter is used to change/update the state using setState. useState Hook does not update immediately.
const [count, setCounter] = useState(0);
**useParams()**

```
The react-router-dom package has useParams hooks that let you access the parameters of the current route. This is only to get the url paramerters. URL parameters are the ones that appear before the ? in the URL.
import {useParams} from "react-router-dom";
const { jobId } = useParams();
console.log("jobId", jobId)
```
**useLocation**

```
The useLocation hook is a function that returns the location object that contains information about the current URL. Whenever the URL changes, a new location object will be returned. It is also used to get query parameter of the url.
Location object properties:

hash: the anchor part (#)
pathname: the path name
search: the query string part
state
key
_example:_
const search = useLocation().search;
const candId = new URLSearchParams(search).get('candId');
console.log("candId", candId)
```
Will it be good idea to use Incremental Static Regeneration if data from backend is user specific? 
Tags: nextjs, react, help
Published: 2022-01-29 13:39:31

I have a challenge page where in public view (No user is logged In) backend will send say list if [A,B,C] challenges.
While if user is logged in & he is admin then backend will send some additional challenges like [A,B,C, 1 ,2]. So in this case will it be good idea to use Incremental Static Regeneration? Or shall I only use GetServerSideProps?

I'm also using SWR in components & passing passing the values of GetServerSideProps as default value
Some Javascript Advanced Concept 
Published: 2022-01-29 13:24:31

## 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ip0d6hvsyllsl8wgfuw.png)

## NameSpace-
 we know javascript variable naming is very important for us. because if match same name variable javascript give an error and not code execute. NameSpace Concept's main purpose is to write unique variables. And many developers use different techniques like IIFE, using objects to create variables. 
```javascript 
var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};
...
yourNamespace.foo();
```
https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript
ref-https://youtu.be/PZQQhirc448

## Recursion -
Recursion definition is, which function calls itself inside his code and stop it when the purpose is solved. This function rule is every time need to define how many times execute the function otherwise execute the function infinitely. Because this function calls itself inside the code this calling continuously works if does not stop with the condition.

```javascript
function countDown(n) {
    if (n == 0) {
    return 0;
    }else {
   return  countDown(n - 1)+n;
    }
}
console.log(countDown(3));
```

## Garbage collection -
 
When we have defined a variable or code. Javascript saves this browser memory under a reference name. Sometimes we define many variables or something. But if we do not use this our code javascript finds out this code and removes it from the memory and another new variable assigns this memory space. Another thing is when a function uses this variable or reference value after the function execution javascript destroys the function or variable. So this whole this control javascript and that system called javascript Garbage collection.
The Garbage Collection mechanism in JavaScript is governed by two algorithms which are listed below.
1- Reference Counting Algorithm
2- Mark and Sweep Algorithm
ref-https://youtu.be/nRcoO1PEJMc?list=PLv2W1EeZUbo7A6fTAmd1vST7R-dr4KUdO
Array Helper Methods: Every Javascript Developer Must know ! 
Tags: javascript, developer, webdev
Published: 2022-01-29 13:24:08

---
title: Array Helper Methods: Every Javascript Developer Must know ! 
published: true
tags: #javascript #developer #webdevelopment #webdev
canonical_url: https://thisisraj.hashnode.dev/array-helper-methods-every-javascript-developer-must-know
---
**New Blog Post** 📜 : https://thisisraj.hashnode.dev/array-helper-methods-every-javascript-developer-must-know

Hello Folks...! This is my second blog in HashNode. I have explained about javascript helper methods and different between Array Helper Methods code and existing legacy code.
Day 21 of 100 - Java: Reflection
Tags: 100daysofcode, java
Published: 2022-01-29 13:23:50

Reflection allows the executing Java program to examine or introspect itself and manipulate internal properties of the program.

For example,

```java
import java.lang.reflect.*;

class array1 {
    public static void main(String args[]) {
        try {
            Class cls = Class.forName("java.lang.String");
            Object arr = Array.newInstance(cls, 10);
            Array.set(arr, 5, "this is a test");
            String s = (String)Array.get(arr, 5);
            System.out.println(s);
        }
        catch (Throwable e) {
            System.err.println(e);
        }
    }
}
```

Practice Java code at https://github.com/j143/java-reflection-examples

https://www.oracle.com/technical-resources/articles/java/javareflection.html

---

Potential of Java in the coming years:

Cloud Adoption

![cloud adoption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/den7b9dx8dbbt7y2vomj.png)

Technology adoption
 
![technology adoption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6up3zoaqed80axv7gvz.png)
Frontend vs Backend vs Full-Stack
Tags: webdev, programming, frontend, backend
Published: 2022-01-29 13:02:41

## Frontend vs Backend vs Full-Stack developer

You don't know the differences between frontend and backend and full-stack developer? The post is perfect for you!

## Frontend
A frontend developer makes visual elements of a website, client etc.
The frontend makes the web stuff that you can see on ex: a website.
Frontend is client-side.


## Backend
A backend developer focusing on the side for website users. 
You can't see the backend.
Backend is server-side.


### Full-Stack developer
A full-stack developer has many coding skills from frontend, backend development to graphic design and UI/UX management.
5 most important tips every programmer should know
Tags: productivity, codenewbie, programming, opensource
Published: 2022-01-29 12:52:37

## 5 most important tips every programmer should know to increase their coding skills

**These are as follows:-** 

1) You must **_code everyday even for 5-10 minutes_** to be consistent and build up your coding habit.

2) Take the ***learning in public initiative***. In order to do that you must be active in the community(social media) like **[Twitter](https://twitter.com/)** or **[Showwcase](https://www.showwcase.com/)** or **[LinkedIn](https://linkedin.com/)** for _atleast 10-20 minutes everyday_ and post what you've learned today or show your work and learn from the threads or posts of various people. 
I'm mentioning _Twitter_ because I myself have personally learnt many things from Twitter everyday based on topics like web development and open source. So, I would advise you to create a Twitter account and connect with people of your interest. 

3) You should use **[Stack Overflow](https://stackoverflow.com/)** for your doubts/problems whenever you stuck at any pace while coding. You may also join a [Discord community](https://discord.gg/g7FmxB9uZp) and ask your doubts to help you.

4) Build small small projects every week and upload the source code to **[GitHub](https://github.com/)** because the more you build; the more you get stuck at problems and the more you learn. I believe that it's always better to do things practically than just only knowing it theoretically.

5) Most important one - learn how to **Google** and solve your problems by your own

## Video:- {% youtube https://youtu.be/1BMf-TKnhDs %}

## Hope this helps you. Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCsuzc8lqAbgUYo4yzpjtfSw) and connect on [LinkedIn](https://www.linkedin.com/in/susmita-dey-15a15a210/) or [Twitter](https://twitter.com/its_SusmitaDey).
Also, feel free to [support](https://www.buymeacoffee.com/susmitadey) my work.😊
Get started with VR programming for Metaverse
Tags: metaverse, vr, programming, web3
Published: 2022-01-29 12:33:42

Hey! It's [Akhilesh](https://twitter.com/AkhileshThite_) here. This is gonna be a short post. So, I was wandering on GitHub and discovered [A-Frame](https://aframe.io/). It's a web framework for building VR (virtual reality) experiences.

## Get started
To get started, first you have to import A-Frame library via external script tag.
```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
```
To create objects in VR, learn about their HTML primitives `(a-scene, a-box, a-sphere, a-cylinder, a-sky, etc.)` from [here](https://aframe.io/docs/1.2.0/introduction/html-and-primitives.html).

Here's a basic template to get started.
```html
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
```
Output: 
![metaverse vr programming a-frame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wug3mq05q9esxipin708.gif)

**Website:** https://aframe.io/
**GitHub:** https://github.com/aframevr/aframe
**Documentation:** https://aframe.io/docs/1.2.0/introduction/

If you know any VR programming resources, then please feel free to comment down below, I would love to add them here with full credits.

## Thank you!
"Fail fast" applies to humans as well as software
Tags: mentalhealth
Published: 2022-01-29 12:30:19

I write 3 days after leaving but not finishing the bootcamp.

We had reached the project phase of the bootcamp and had spent a week learning about Agile practices and working in teams on our project ideas. We refined our ideas with the help of the tutors and settled on our final idea.

Our idea used some new tech that we had not come across before [Flutter](https://flutter.dev/) instead of React and a new programming language, [Dart](https://dart.dev/). We had covered the principles of building a front end so using a new library seemed doable.

We were due to start coding last Monday the 24th January. Over the weekend before I started worrying about the steep learning curve ahead and with only 8 days to code the whole app, I knew it would be tough.

I didn't sleep well on the Sunday night before and was feeling very stressed about the task ahead. I was a member of a team so there was pressure there not to let them down and my own internal pressure prayed on my mind as we started coding on Monday.

Anyway to cut a long day short, I could not focus, there was so much to do, so little time. Must keep up for the team. These thoughts kept swirling and affected my concentration which meant I could not focus - ever heard of recursion???

Come 5pm I stepped away, not having acheived much at all, with a background throb in my head. That evening I tried to forget the disastrous day but could not.

That night I hardly slept, head spinning with the self-imposed stress and external pressures. The throb developed into a bad headache. Early Tuesday morning I started getting a kind of kaleidoscopic aura with circular flickering colours. I have had this before, a few years ago, during a particularly stressful period.

I messaged my team to tell them I could not code that day. The headache got worse, like my head was in a vice, restricting the space in my head for me. I stayed in a darkened bedroom all day and only got up late in the evening. By that point my wife and I had decided that I could not continue with the bootcamp as I could not cope with the stress which would still be there tomorrow.

I went to bed again and stayed there till lunchtime Wednesday when the symptoms has faded a bit.

The bootcamp tutors offered me the chance to join another cohort's project phase in a couple of weeks. I briefly thought about it but decided enough was enough, I learnt my limitations by failing fast. In my 58th year, I am happy with my decision - I'll leave the stress to the youngsters! 

In many ways the project was the icing on the cake - I can build a back end and front end for an app. My ambition was never to get a whizzy job - just learn some skills and use them to do some good. I can do that now. Coding is a habit and I've got the bug.

I hope that failure, despite the connotations of the word, can open doors that I did not see before. Bring it!
Data Engineering in Julia
Tags: machinelearning, julia, dataengineering, julialang
Published: 2022-01-29 14:35:27

---
title: Data Engineering in Julia
published: true
date: 2022-01-29 12:17:37 UTC
tags: machinelearning,julia,dataengineering,julialang
canonical_url: https://towardsdatascience.com/data-engineering-in-julia-3fd37eaa618a
---

[![](https://cdn-images-1.medium.com/max/1600/1*0_msfDyYYUwBrml3dH8UkQ.png)](https://towardsdatascience.com/data-engineering-in-julia-3fd37eaa618a?source=rss-2c8aac9051d3------2)

Work with massive datasets to design data models and automate data pipelines using Julia

[Continue reading on Towards Data Science »](https://towardsdatascience.com/data-engineering-in-julia-3fd37eaa618a?source=rss-2c8aac9051d3------2)
Revolve- fusion 360
Tags: fusion360, 3d
Published: 2022-01-29 12:14:30

Revolve creates a mirror of an image and creates a solid body on both the body and the reflection. It is one of the most amazing fusion 360 features because it enables symmetry in objects. 

Some other concepts I recently learned are as follows: 

**extruding to another surface**:
choose extrude to and select the bottom surface. This ensures that if you ever need to move that body, no constrain will stop you
shell: uneven(curved) bodies for even extruding cut

**projecting existing geometry**:
This allows you to work on a specific geometry without losing some faces. It is important when using spline. When using spline, it is possible for some faces to be lost but by projecting the geometry, you can tell which face is not visible in your sketch.