teleren/devto huggingface dataset:
Animation effects while typing in Vscode :)
Tags: vscode, programming, coding
Published: 2021-10-13 18:57:55

Vscode is an amazing IDE because the way we come across through new extensions in Vscode it strongly impacts on our Productivity.

In this Post I came across through marvelous animation effect while typing in Vscode which literally looks like Pro 😎.

### Power Mode
- Search for Power Mode in Extensions
![Power Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9h55bhaj0dt72b1mppf.jpg)
- After installation you need to enable that extension in your Vscode Settings. [Shortcut: <b>Ctrl + ,</b>]
- Search for Powermode and just enable Power Mode
![Enable Power Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zigwg4ru9nlhraiam2m8.jpg)
- Just Disable "Enable Shake" because Vscode Screen literally shakes while you are typing which sounds discomfort to me.
- Select Preset[Animation] type. I personally ❤️ Particles because it's minimal and satisfying. 
![Presets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfvfvbk1ir6bc4ilvc5j.jpg)
<b><i>Note: If your Laptop has low Configurations I wouldn't suggest it to install because you may see little bit Lag while coding.</i></b>

#### Bonus Point:
Install Dracula Official Extension and activate Dracula Theme your Vscode will look damn Gorgeous and will impact on your Productivity because I personally love to code in such environment and it's not compulsory. I am just sharing my Opinion with you Guys😅

Let's Connect:
<a href="https://www.instagram.com/mr.shah.01/">Instagram</a>
<a href="https://twitter.com/StavanS64859518">Twitter</a>


Want to Learn Django?
Check Out my Website <a href="http://clickarc.bss.design/Posts/Django-for-Everyone[1].html">ClickArc</a>

That's all for this Post Guys🙌. See you soon👋
Asp.net core Routing Attribute Routing Giriş.
Tags: dotnet, csharp
Published: 2021-10-13 18:56:17

Routing artık ne olduğunu biliyoruz.

## Attribute nedir ki routing'i ne ola ?

Tanımı ve tanımını aldığım linki aşağıya koyuyorum.

> Herşeyden önce, niteliği (Attribute) tanımlamakta fayda vardır. Nitelikler, uygulandıkları tiplerin (types) yada üyelerin (members) çalışma zamanındaki davranışlarının değiştirilmesine olanak sağlayan sınıflardır.

https://www.buraksenyurt.com/post/C-Temelleri-Nitelikleri(Attributes)-Kavramak-bsenyurt-com-dan

Yukarıdaki linkteki yazıyı okumanızı tavsiye ederim.


## Attribute routing nedir ?

Kısacası attibute'lar ile yaptığımız rotadır(veya route'dur).

## Uygulama : 

1.) model-view-controller projesi yaratalım (dotnet new mvc).

2.) HomeController'ın içerisine aşağıdakileri yapıştıralım : 

```
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Routing.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace Routing.Controllers
{
    [Route("Ana")]
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }
        [Route("AnaSayfa")]
        public IActionResult Index()
        {
            return View();
        }
        [Route("")]
        public IActionResult Privacy()
        {
            return View();
        }
        [Route("Error")]
        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}


```
3.) Uygulamamızı çalıştıralım :
Sonuç : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pq8g5uflmn85wu5unpb.png)

Gördüğünüz üzere hiçbir sayfa bizi karşılamadı bunun sebebi hiçbir endpoint uygulamamızın eşleşmemesidir.

a.) Şimdi url'imizi aşağıdaki gibi değiştirelim: 

```
https://localhost:5001/Ana
```
ve enter'layalım.

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

Gördüğünüz üzere privacy geldi. 

Bunun sebebi HomeController'a route bazında "Ana" dememiz ve privacy'ye route bazında boş bırakmamız. Bu sebep ile privacy ile route'umuz eşleşti.

b.) Şimdi url'imizi aşağıdaki gibi değiştirelim: 

```
https://localhost:5001/Ana/AnaSayfa
``` 
Sonuç : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wit5npghfjoo84c63nap.png)

Sebep :  HomeController'a route bazında "Ana",Index'e route bazında "AnaSayfa" dediğimizden dolayı bu sayfayı görüntülüyoruz.

### Yazımızın Sonucu : 

* Routing yöntemlerinden birini daha gördük.
* Attribute routing, conventional routing'i ezer.

Bir dahaki yazımda görüşmek dileğiyle.

En iyi dileklerim ile.

Mustafa Samed Yeyin.
The project created by "yarn create next-app" does not recognize eslint
Tags: yarn, nextjs, eslint, javascript
Published: 2021-10-13 18:45:38

---
title: The project created by "yarn create next-app" does not recognize eslint
published: true
description: In the next project created with yarn, lint did not work, so I investigated the cause and solved the problem.
tags: yarn, nextjs, eslint, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgrtt8x88kfkrwft541f.png
---

## Problem

As of October 13, 2021, the project created by `yarn create next-app` fails with yarn lint.

```
yarn create next-app my-app
cd my-app
yarn lint
```

```
error - ESLint must be installed: yarn add --dev eslint
```

![error - ESLint must be installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjgwjit0i2wfnpwqp3za.png)
 
However, eslint is listed in the dependencies of the generated package.json.

```package.json
  "devDependencies": {
    "eslint": "8.0.0",
    "eslint-config-next": "11.1.2"
  }
```

## Solution

I changed the eslint version to 7.x and it worked!

```
yarn add --dev eslint@7.32.0
yarn lint
```

![No ESLint warnings or errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhixpuswjpwf139x95sz.png)
 
I did it!
How to use npm modules client-side in Astro.js `.astro` files
Tags: astro, javascript
Published: 2021-10-13 18:43:59



I've been playing with Astro some more and finally got my head around how to use npm modules client side in a `.astro` file. It's not that obvious...

First thing I tried was something like this:

```html
<!-- Test.astro -->
<canvas class="webgl"></canvas>
  
<script type="module"> 
 import * as THREE from 'three'

 console.log(THREE) //undefined :(
</script>
```

This returns `Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".` in the console.

Astro doesnt let you import npm modules in inline script tags within `.astro` unfortunatley. However we can import in an external `.js`/`.ts` file, then make use of [`Astro.resolve`](https://docs.astro.build/es/reference/api-reference/#astroresolve) like so:

```html
<!-- Test.astro -->
<canvas class="webgl"></canvas>

<script src={Astro.resolve('./myScript.js')} type="module"/>
```

Inside `myScript.js` we can import things as expected.


```js
// myScript.js
import * as THREE from 'three';

console.log(THREE) // Three.js module!
```

Working demo [here](https://stackblitz.com/edit/astro-qp2xde?file=src%2Fcomponents%2FTest.astro).
LaTeX: Numbering the pages
Tags: codenewbie, latex
Published: 2021-10-13 15:14:45

Hello, how are you? :) 

In this post I write about how to change the style of the numbering in the pages, how to turn the enumeration of the pages into roman numbers or letters. Let's start

Many times we want to change the style of the enumeration of the page, or alter which is the first page, well, you can do it with the `\pagenumbering` command, as simple as that, the syntax is 

```LaTeX
\pagenumbering{style}
```

Where `style` can be 

- `arabic`: 1,2,3,...
- `roman`: i, ii, iii...
- `Roman`: I, II, III...
- `alph`: a,b,c...
- `Alph`: A,B,C...

> You need to be careful with the `style` that you choose, notice that `alph` is not the same as `Alph`

**We need to put the instruction in the preamble**

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtuf286r2umg7bir8vna.png)

Produces

![Screenshot from 2021-10-11 09-46-40](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrgkuoqxievkvrwwacdx.png)

> This does not produce the *purple line*, this is the bottom of the page

You can play with the `style` available

Now, let me tell you that if you put `\pagenumbering{style}` in the preamble it is *Global*, this is, all the document have the same `style`

If we want that from a certain page until the end of the document we need to put the command in the desired page to be affected. Try the next code on your favorite editor and check what happens

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75l629lam1r9bbmt4ety.png)

I hope you notice something interesting while compiling, we are going to check it later.

This is all for today, do not forget to follow me on Twitter `@latexteada`

Greetings !!!
Hello World! 
Tags: beginners, presentation
Published: 2021-10-13 18:22:22

This is my first post. I started my journey into web development at the end of June 2021. 
After mentioning to a good friend (who is a software engineer) about wanting a career change, he encouraged me to give web development a try. 
So far, I've been learning through Udemy courses, YouTube videos, Stack Overflow, and a lot of Google-ing. 
I start a coding bootcamp on October 25th and I'm looking forward to learning everything I can.

Below is a link to my Github portfolio page. It's a work in progress.
https://kurtreyn.github.io/portfolio/index.html

Thanks for reading!

-Kurt
Javascript Notları #1 - Javascript'e Giriş
Tags: javascript, webdev, frontend, backend
Published: 2021-10-13 18:17:54

Selamlar, bu seride Javascript çalışırken almış olduğum notları sizlerle paylaşacağım. Umarım faydalı olur :)

## Javascript Nedir?
Javascript, HTML sayfalarını daha aktif ve güzel hale getirmek için kullanılan bir programlama dilidir. Bir programlama dili olduğu için diğer programlama dillerinde olduğu gibi (C#, Python vb.) değişken tanımı, döngüler, karar yapıları, fonksiyonlar gibi birçok yapıyı içerisinde barındırmaktadır. Javascript ile Client-side'da frontend geliştirilirken Server-side'da backend geliştirilmektedir. 

## Javascript Kodları Nasıl Çağrılır? Nasıl Run Edilir?
Javascript 2 farklı yolla çalıştırılabilmektedir. Bu seçenekler:
- HTML içerisinde "script" tagleri arasına gerekli Javascript kodlarının yazılması ile (body tag'inin sonuna yazılması önerilir),
```
<script> alert("Javascript Öğreniyorum."); </script>
```

- HTML içerisinde "script" tagi içerisine gerekli Javascript uzantılı dosyanın kaynak olarak eklemesi ile,
```
<script src="/path/to/file/ilkscript.js"></script>
```

## Değişken Tanımlama
Javascript'te değişken tanımlama oldukça basittir. Aynı python programlama dilinde yapıldığı gibi herhangi bir veri tipi belirtmeden değişken tanımlama yapılır. Örneğin:
```
<script>
        var sayi = 15;
        var isim = "Turan";
</script>
```
Bir değişken herhangi bir değer ataması yapılmadan da tanımlanabilir ve daha sonra değer alabilir.
```
<script>
        var x;

        x = 25;
</script>
```
Ayrıca bir değişken farklı bir değişkenin değerinin üzerinden de bir değer alabilir.
```
<script>
        var x;
        var y = 10;

        x = y * 3 + 1;
</script>
```

## Alert Fonksiyonu
Bu fonksiyon sayesinde sayfa yenilendiğinde veya gerekli fonksiyon çalıştırıldığında ortaya bir output çıkarılmaktadır.
Birkaç sayı tanımlayalım ve toplamlarını sayfa yenilendiğinde output olarak yazdıralım:
```
<script>
        var x = 25;
        var y = 30;
        var z = 35;

        alert("Sayıların Toplamı = " + (x+y+z));
</script>
```
Bu scriptin outputu aşağıdaki gibi olacaktır:
![Javascript Alert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9wyll19bplvm1qfu6c2.png)
How to configure VSCode Bracket Pair Colors Natively
Tags: webdev, vscode, javascript, productivity
Published: 2021-10-13 17:46:41

With an [update in August 2021](https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization), VSCode started supporting Bracket pair colorization natively. It means there is no need to use the [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) extension (_which I love_).

In their official announcement, the VSCode team states they choose to implement this feature natively to address performance issues.

I recently uninstalled the extension and thought, let's try to use the editor without any bracket color extension. I cannot. I've been using the extension [as long as I remember](https://amanhimself.dev/blog/how-i-configure-vscode-for-everything/) and I cannot go back to plain, colorless brackets.

![ss1](https://i.imgur.com/JBOVcnV.png)

To enable this setting, open the `settings.json` file for the VSCode editor and add the following:

```json
{
  // ...
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffb86c",
    "editorBracketHighlight.foreground2": "#8be9fd",
    "editorBracketHighlight.foreground3": "#bd93f9",
    "editorBracketHighlight.foreground4": "#50fa7b",
    "editorBracketHighlight.foreground5": "#f1fa8c",
    "editorBracketHighlight.foreground6": "#abb2c0",
    "editorBracketHighlight.unexpectedBracket.foreground": "#ff5555"
  }
}
```

And tweak the colors according to your style!

![ss2](https://i.imgur.com/tSgx02e.png)

By the way, the above colors are from [Dracula theme's 🧛‍♂️ color palette](https://draculatheme.com/contribute) to match the overall editor theme I am currently using.
The State of the Global Fintech Developer Report
Tags: fintech, payments, career, survey
Published: 2021-10-13 17:43:30

Hey everyone. :wave: 

[Rapyd](rapyd.net) has released a report talking about the state of the global fintech developer. 

Some of the insights include:
* What developers think about the future of global fintech
* Preferences for in-house VS third-party tools
* Developers attitudes toward open-source projects and communities
* Personal perspectives on remote work, compensation and more

[Download](https://community.rapyd.net/t/the-state-of-the-fintech-developer-report-download/1084) the **ungated** report and let me know what you think about it.

-----
**About Rapyd**

<sub><sup> Rapyd is the fastest way to power local payments anywhere in the world, enabling companies across the globe to access markets quicker than ever before. By utilizing Rapyd's unparalleled payments network and fintech as a service platform, businesses and consumers can engage in local and cross-border transactions in any market. 

<sub><sup> The Rapyd platform is unifying fragmented payment systems worldwide by bringing together 900-plus payment methods in over 100 countries. Rapyd's investors include Stripe, General Catalyst, Oak HC/FT, Coatue, Tiger Global, Durable Capital, Target Global, Fidelity Management and Research Company, Altimeter Capital, BlackRock Funds and Tal Capital. 

<sub><sup> To learn more about the company that is accelerating the fintech as a service revolution, visit www.rapyd.net, read our [blog](https://www.rapyd.net/blog/), or follow us on LinkedIn and Twitter.

<sub><sup> [Press Release](https://www.prnewswire.com/il/news-releases/payment-technology-focus-dominates-fintech-developer-workload-finds-report-by-rapyd-301393952.html)
SML - The language I love to hate. (Recursion example).
Tags: sml, javascript, recursion
Published: 2021-10-13 16:46:33

---
title: SML - The language I love to hate. (Recursion example).
published: true
description: Standard ML (1984) is functional programming language. Today I look at what I can extract from it as a web developer.
tags: SML, Javascript, Recursion
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njbzdilr5o81yz36600u.png
---

Standard ML has been around for a while, I never cared for it until enrolling at [OSSU's program](https://github.com/ossu/computer-science). It's a functional programming language with very interesting features like `immutability` and relies heavily on the usage of recursion.

## A recursive example in SML

```sml
fun factorial n = 
    if n = 0 then 1 else n * factorial (n - 1)
```
This function can also be expressed as:

```sml
fun factorial(n : int) = 
    if n = 0
    then 1
    else n * factorial (n - 1)
```
If you use `factorial` it may look something like this:

```sml
val result = factorial (5) (* equivalent: 5 x 4 x 3 x 2 x 1 *)
```
And in actual fact, this function actually (cheekily) multiplies by 1 again on the last iteration, which has no effect on the output: `120`.

## Writing SML as a web developer

During the course assignments it was a REAL pain to not have the ability to declare variables in the upper scope and change their value, or use loops, and dealing with the thinking work that goes into recursion. 

> Hot tip: If a function accepts an Array / List that needs to be processed in a loop - it most probably can be done with recursion too. 🤘

### A JS example re-written in SML

*Return the sum of all elements in an array*

```js
// Example 1
function sumArray (nums) {
  let total = 0;
  for (let i = 0; i < nums.length; i++) {
     total += nums[i]
  }
  return total
}

sumArray([1, 2, 3, 4, 5]) // 15

// Example 2
const sumArray = (nums) => nums.reduce((prev, curr) => prev + curr, 0)

sumArray([1, 2, 3, 4, 5]) // 15
```
Much of the logic above is either ludicrous or doesn't exist in SML, and we'll have to do something like:

```sml
fun sum_array (nums: int list) =
  if null nums
  then 0
  else hd nums + sum_array(tl nums)

val summed = sum_array([1, 2, 3, 4, 5])  (* 15 *)
```

These were just a few quick examples. If you want to see me explain these things (a little) more and If you want to see me do this with 5 slightly more complex problems, give my latest Youtube video a watch:

{% youtube pUh-_Ba_jUY %}
*Appreciate the 👍*

## Conclusion

I think we developers should definitely focus on the language that is most demanded from us - to improve our skills / knowledge, nevertheless - SML has taught me that there are different and sometimes better and *cleaner* ways of solving programming issues.

---
*This has been Eckhardt Dreyer, coming to you with a look into what I explore on the web. If you like what I make [Buy me a coffee? 🍺](https://kaizen.com.na/payment?ref=dono&amt=10000)*
What is .dockerignore and why you need it
Tags: docker, container, devops, buildcontext
Published: 2021-10-13 16:35:12

Yesterday, I was trying to replicate a tool from a conference paper. Unfortunately, it is using python 2. I wish one day researchers will know python 2 is dead. Anyway, I dockerized it, built it, ran it. It went fine. Today, I came back to my lab. Tried to build it again. LACKADAY! The build took more than 10 minutes. It kept showing the following message.
```sh
Preparing build context archive...
[==================================================>]79/79 files
```

So, I did what a computer scientist should do — Google. And I found a gem — `.dockerignore`. Before jumping into detail. Let me share what was the actual problem in my case. Before building a docker image, the docker CLI compresses all the files in the current directory and sends them to the docker daemon. These files are called the **build context**. In your `Dockerfile` you can only refer to the files/directories from the build context. The scripts I ran yesterday downloaded some files having a size of nearly 10 GB. Hence, when I was building the docker image today, it was taking forever.

There comes `.dockerignore` for the rescue. All the heavy files were inside two directories — `data`, and `embeddings`. So, I created a file in the project named `.dockerignore` and put the following content there.

```gitignore
data/
embeddings/
```
Bingo! The build time was reduced from 10 minutes to 10 seconds.

---

However, how could this be useful for your particular case? If you are a modern-day developer, surely you are familiar with dependencies. Could be `npm`, `yarn`, `composer`, `nuget`, `gradle`, `gem`, `pip`, `conda`, `cargo`, `dep`, or anything else. But there is definitely one. Now, for example, you are using `npm`, in most cases, your `Dockerfile` contains the following line —
```dockerfile
RUN npm install
```

So, you are installing your dependencies *inside your image*. Now, if you have a `node_modules` directory outside your image (i.e., in your actual machine), that is not actually needed. However, by default, it will be added to the build context with the weight of a black hole and make the build process slow. However, if you put the `node_modules` directory in the `.dockerignore`, it will have no impact on the build process. The same goes for any other dependency management tools.

I Hope, from now on, your docker builds will be a little bit faster, if not gigantic.
Confused About rem and em units in CSS?
Tags: css, javascript, webdev, html
Published: 2021-10-13 16:32:35

rem and em units in CSS is creating confusion for beginners, 

Most beginners don't understand the correct meaning of both units and then use them without thinking much and it creates lots of problems for them.


em and rem both are known as relative units in CSS. 

You've probably been using em and rem units now for a while already, but still, you might be confused about which unit is best in which scenario.


## What is em?

An em value is equal to the computed font size of the parent of that element. example if font size of parent element is 20 px then 1em is equal to 20px.

if the font size is not specified in the parent element then it will look continues up until the root element.

Root element font size is provided by the browser and by default it is 16px.

in this case, 1em is equal to 16px.

## compounding effect of em - 

check the below challenge, and then jump on the answer and understand how em works.

{% twitter 1445427836320247810 %}

We have three divs,  container, parent, and child and respectively are specified font-size 1em, 3em, and 2em.

1. font-size of container is 1em eqaul to 16px.

2. font size of parent is 3em means 3 * 16px ( parent font-size) so it becomes 48px now.

3. font size of child is 2em means 2 * 48px ( size of parent element) so it becomes 96px now.

the final size of the child becomes 96px, 😅 power of compounding. 

check live example 👇

{% codepen https://codepen.io/ali6nx404/pen/QWMLWWm %}

let's see this in action 👇


![86pxx.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1634009342704/1mwKQC-Ar.webp)


## What is rem?

While em is relative to the font size of its direct or nearest parent, rem is only relative to the Html (root) font size.

by default, it is 16px until we didn't specify in the Html element.


rem value is not much convenient when it comes to specifying such as

1rem = 16px 

But what if we want to use 10px than we need to calculate the rem value which is equal to 0.625rem.


To solve this problem we have one trick, specify the Html element font size as 62.5%.

than our 1rem becomes 10px and now we are able to calculate size easily.


## Which is better?

There’s no better unit really, and it all depends on your personal choice. Some people like to use rem units for consistency and scalability, 

while some like to use em units in places where the influence of nearby parent elements would make sense.

I personally use rem more than em but be careful with both, em becomes a trouble when you don't understand the relation between parents and child, 

and we already see the example of compounding effect in em. so I like to say use rem more often than em.


If you want to calculate the accurate size in rem and em, then [pxtoem](http://pxtoem.com/) website is pretty useful.

## Conclusion -

Trying both units and understanding the use cases is most important. I would like to suggest you play with both units and understand both of them.

### Let's Connect - 

✔ [Twitter](https://twitter.com/Ali6nX404)
✔ [Linkedin](https://www.linkedin.com/in/mahesh-patidar-34a982192/)