teleren/devto huggingface dataset:
Working with 11ty
Published: 2022-05-01 14:29:27

# Introduction
11ty is an exciting way to generate sites, in a simple and intuitive manner!

But before, we begin, here are the links to the repositories we'll be using within this blog post!

- https://github.com/juliansim1729/eleventy-blog-one
- https://github.com/juliansim1729/eleventy-blog-two
- https://github.com/juliansim1729/eleventy-blog-three

# Getting Started
There are a ton of 11ty templates out there! What I particularly recommend is trying out the general hello world template linked on their [web page](https://www.11ty.dev/), and then moving to cloning one of the many great templates that exist!

I have to note though that the hello world template is a lot easier to work with as a 1st user experience (like you might expect), but once you start getting into further use, the other templates quickly prove their usefulness. Visuals are another strong area where we can see the difference in the template power. Here's a snippet of my blog posts within all three templates -- we can really see the difference!

# [From Scratch](https://eleventy-blog-c5jiamgbm-juliansim1729.vercel.app/posts/firstpost/)

This one was a doozie to get set up and working, but it looks great (except for the lack of styling) in the end!

# [The Base Blog](https://eleventy-blog-two.vercel.app/posts/firstpost/)

This one looks a lot better for sure, and unlike the previous one, there doesn't really have to be all that much md to html fuckery -- we can just keep things in markdown and everything will all get rendered correctly.

# [The Third Blog](https://eleventy-blog-three-gukerquom-juliansim1729.vercel.app/posts/firstpost/)

This one has all the CSS and snazz you might expect from one of those subscription based sites, except here, you can customize it super easily and host it on your own!
3 steps to exporting images from Figma
Tags: uiweekly, ux, codenewbie, prudycodingseries
Published: 2022-05-01 14:22:53


![Doesn't work why](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2fylu6u143nznly2tdg.jpg)


**Yesterday**, I learnt how to export images from Figma. 

It's an exciting discovery since it saved me from using my Google search tool. 

(Thank you Google search, see you later📨)

In all of this hunt, I felt it would be nice to share the process. (You're welcome.) Also warm regards to [Lamodots](https://twitter.com/Lamodots) who led the hunt.

---

![Reference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o431feq0e6nxkmzl4fge.jpg)

---


**Step 1: Highlighting the Image**
By clicking on any image or component on the design, you would also have highlighted it. 


![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdg3eljxs6ybibmx35fp.jpg)

---
**Step 2: Finding the right frame**

On the Left-hand sidebar is usually the Layer section. The Layer section gives you access to each component, that is, text, images etc.

Our job here is to find our right image or right frame. 

![Finding Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiadtm0b1xzxouf28n34.jpg)

You should toggle the eye 👁️ and the Lock 🔒 to help you get a single element (image)


---

**Step 3: Exporting the image**

On the right-hand sidebar is the Design section. By scrolling upwards you'll get down to the Export section. 

It opens up when you hit the plus + button. You can also toggle with the preview↓ button to preview the picture.


![Exporting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nswb3syudnq02d99e9q6.jpg)

So **hit** the Export button to download. 

---

**It is done...**


![Henry& Ray](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qnfrtoq1by4bk3c7bt0.gif)

**Feels good 😉**


---

Hi🙋, you can also share your export method. 🤭 I'm looking for a simultaneous all-image download method.
what tech stacks do you use?
Tags: discuss, watercooler
Published: 2022-05-01 14:18:29

What tech stacks(MERN, MEVN etc) do you guys use in your personal projects or work? and why do you use that?
Do you like your tech stack? or do you want to switch?
Let me know in the comments below!

[Buy me a coffee](https://www.buymeacoffee.com/tawhid)
Scatter gather pattern ?
Tags: eventdriven, microservices, distributedsystems
Published: 2022-05-01 14:08:18

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/447ms5x0p4tfcnfky4ju.gif)

The scatter gather pattern is ideal for requesting responses from multiple subsystem, then use aggregator to collect the responses and merge them into a single response message.
the scatter gather pattern is a composite pattern that illustrates how to broadcast a message to multiple recipients and re aggregate the responses back into a single message.

example, in the context of order processing. each order item that is not currently in stock could be supplied by one of multiple external suppliers. However, the suppliers may or may not have the respective item in stock; they may charge a different price and may be able to supply the part by a different date. to fill the order in the best way possible, quotes are requested from all suppliers and then a decision is made as to which one provides the best term for the requested item.
Android in React Js 💻🌈 (Unofficial)
Tags: react, javascript, webdev, programming
Published: 2022-05-01 14:07:24

Hello devs,

Here I present you [AndroidInReact](https://android.blueedge.me), which replicates the Android experience on web using standard web technologies like ReactJs, Redux toolkit.

Live Experience 🌈: [android.blueedge.me](http://android.blueedge.me)
Github: [blueedgetechno/androidInReact](https://github.com/blueedgetechno/androidInReact)
Discord: [discord.gg/NcjaNdwtnR](https://discord.gg/NcjaNdwtnR)

### Preview
![img1](https://raw.githubusercontent.com/blueedgetechno/androidInReact/master/public/gall1.png)

![img2](https://raw.githubusercontent.com/blueedgetechno/androidInReact/master/public/gall2.png)


Features:
- Home page
- Navigation pane
- Recent Menu
- Quick Panel
- WhatsApp
- YouTube
- Google
- Weather, Time & Calendar Widgets

And a lot more on the bucket list ...

I inevitably faced a lot of deadends during the development but I managed to overcome them. Planning it beforehand and following a recursive dev cycle helped me too.

Also, Special thanks to [Derry Shribman](https://github.com/xderry) for inspiring me to do this project.

Live Experience 🌈: [android.blueedge.me](http://android.blueedge.me)
Github: [blueedgetechno/androidInReact](https://github.com/blueedgetechno/androidInReact)
Discord: [discord.gg/NcjaNdwtnR](https://discord.gg/NcjaNdwtnR)

disclaimer: This is just a replication and it doesn't concern original Android project by google.
Route is not working
Published: 2022-05-01 14:07:01

I'am working on a full stach web site using spring and angular  but the routes are not working 
this is the spring boot application code to  search category by ID 
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue2atxt5lvo5m43d2x23.png)
and here is the routes 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ye90xky84mudlpg50rt.png)
and this is the product service  class and the his urls 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kor1myrl3ykee394xv1z.png)
and this is the product list component 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igixvjg0mkc14qnx5fxe.png)
Remotewide - find remote jobs with location independent pay (2022)
Tags: jobboard, remotejobs, jobsearch, webdev
Published: 2022-05-01 14:06:57

[Remotewide](https://remotewide.co/)

I've recently been lurking around job boards, and noticed that there is barely any filters for location independent pay as a niche itself, so I decide to build one of my own.

Any feedback would be greatly appreciated!
useRef Hook in React
Tags: react, webdev, javascript
Published: 2022-05-01 13:58:59

Welcome back again!

This is the fourth blog in the **React Hook** series, where we're learning about different hooks used in React, and our today's hook is the `useRef` hook. Before we get started, I'd recommend reading the last blogs of this series [React Hooks](https://vanshsharma.hashnode.dev/series/react-hooks). Though this hook is completely independent of we can read and learn it without any prior knowledge of hooks, it would be beneficial to have some basic understanding of the hooks.

## What is useRef Hook
We can build a direct reference to a DOM element using the `useRef` hooks. It's used to keep track of mutable values that do not cause re-rendering every time they're changed. 

> Syntax:

>const refContainer = useRef(intialValue)

>Example:

>const  countRef = useRef(0)

`useRef` returns a mutable object whose `current` property can be used to access the value.
In the above syntax, we have initialized the `useRef` with the initial value of 0.
> const countRef = {counter:0} is same as  const count = useRef(0)

## Difference between useState and useRef

We can see in the following codesandbox that using the `useRef` we can persist the previous value on every render. But using the same with `useState` is not possible.

{% embed https://codesandbox.io/embed/useref-67qk9h?fontsize=14&hidenavigation=1&theme=dark %}


## Advantage of using useRef

- It allows us to directly access the DOM element without causing any issue.
- Values updated using `useRef` do not cause re-rendering.

## Ending
That's all for this blog.  Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useReducer' hook, which is used to handle state management in React globally.
Feel free to leave your valuable feedback in the comments below.


To learn more about React, JavaScript, and Web development, follow me on [Twitter](https://twitter.com/Vanshsh2701).

Reference: W3Schools
Rustのシンプルなスレッドの実装
Published: 2022-05-01 13:41:46

# 一番簡単なスレッドの実装
`thread::spawn(function)`で実装可能。
`function`には任意の関数を入れることができる。Rustでクロージャを作成するときは以下
```
|x, y| {}
```
`{}`の中には複数行を書くことが可能で、関数の戻り値の行のみ`;`無しで実装する必要がある

例
```
|x, y| {
  let value = x + y;
  value
}
```
これを踏まえてシンプルなスレッドを実装すると以下の通り。


```
main() {
    let mut handles = Vec::new();
    for x in 1..10 {
        handles.push(thread::spawn(move || {
            println!("{}", x)
        }));
    }
    for handle in handles {
        handle.join();  // 10スレッドの処理が終わるまで待つ
    }
}
```
ここで注意すべきはクロージャの前に `move` が書かれていること。
Rustには所有権の概念があり、それに関連したエラーです。
単にループを回してスレッドを作成するだけだと、`x`の所有権がthread内に移されず、スレッドが完了する前に`x`が寿命となる可能性があるためエラーを吐き出している。

そのため、`x`の所有権を各スレッドに移すために`move`を使用している。

このようにRustでは常に所有権を意識して実装を進めなければならない。
Day 20-24: Drum Machine
Tags: 100daysofcode, beginners, javascript, react
Published: 2022-05-01 13:14:15

## The project

As the name suggest, we're gonna make a site with drum pads that play sound when triggered 🥁. The site was made with React and SASS. I figured I'll take 3 days to complete this, but circumstances pushed this to 4 days. Life *always* get in the way, so I should be more prepared about it 💪

## What I learned

* How to dynamically render components in React

We can use array and its methods, such as `Array.map()`:
```jsx
render() {
    const soundArr = ["blip", "clan", "clap", "cymbal", "kclick", "piano1", "piano2", "snaps", "whoop"];
    const keyArr = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];

    return (
        <div id="drum-machine">
            <p id="drum-title">Drum Machine</p>
            <Display />
            {soundArr.map((soundClip, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
        </div>
    );
}
```

* `onkeydown` event on the document

To detect key presses on the HTML document, we can use the `onkeydown` event:
```js
document.onkeydown = (e) => {
    let pressedSound = document.getElementById(e.key.toUpperCase());
    if(pressedSound) {
        pressedSound.play();
        document.getElementById("display").innerText = pressedSound.parentElement.id;
}
```
Note that there used to be `onkeypress` event, but it is now deprecated.

* Add gradient overlay over background image

We can use `background-image` CSS property for this:
```css
background-image: linear-gradient(180deg, rgba(0,255,233,0.0) 0%, rgba(0,0,0,1) 100%), 
    url('https://t4.ftcdn.net/jpg/03/58/36/11/360_F_358361101_z9baaIEmkyst0OQ8mov82r9hen7glZGb.jpg');
```

## Afterwords

It's nearing the end of Ramadan, which means preparation for Eid is incoming. It will be a very busy week. Hope I can still continue doing this throughout Eid celebration.

Anyway, happy Eid for Muslims around the world! ✨

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!
Appwrite Hackathon Submission - Movie App
Tags: appwritehack
Published: 2022-05-01 13:13:48


### Overview of My Submission

Simple Movie application built with Next.js and Appwrite. It allows the user to bookmark the movies and add movies to the list with help of IMDB id. 

### Submission Category: 

Web2 Wizards

### Link to Code

{% github https://github.com/skarthikeyan96/appwrite-nextjs-movie  %}


### Additional Resources / Info

**Tutorial**: [How to build a movie app using Nextjs and Appwrite](https://dev.to/imkarthikeyan/how-to-build-a-movie-application-using-nextjs-and-appwrite--18po)

Screen-recording: 

{% youtube C6uJv8YmD68 %}
Heap and Stack in JS basics
Tags: javascript, stack, heap, reference
Published: 2022-05-01 13:08:15


Javascript knows two types of memories: Stack and Heap

- **Stack**

1. easy-to-access memory 
2. Only items for which the size is known in advance can go onto the stack
3. Numbers,strings,booleans go to the stack

- **Heap**

1. For items of which the exact size and structure can't be pre-determined.  
2. Objects and arrays can be changed at runtime, therefore they go to heap


For each heap item, the exact address is stored in a pointer which points at the item in the heap. This pointer in turn is stored on the stack.
For reference types, only pointers are stored on the stack.

Example 1
So for example, if you have the variable:
``` var person={name:"Sofia"} ```
Only a pointer to the person object is stored in that variable

Example 2

```
var person = { name: 'Sofia' }
var newPerson = person
newPerson.name = 'John'
console.log(person.name)
```

This will print "John", becasue we never copied the person object itself to newPerson. We only copied the pointer, which still points at the same address in memory! Hence changing newPerson.name also changes person.name because newPerson points at the exactly same object!
You're pointing at the same object, you didn't copy the object.

How you copy the actual value? The spread operator comes to the rescue

```
var person = { name: 'Max' }
var copiedPerson = { ...person }
```
Difference between 'git fetch' and 'git pull'
Published: 2022-05-01 13:03:58

---
title: Difference between 'git fetch' and 'git pull'
published: true
description: What is the difference between `git fetch` and `git pull`
tags: 
//cover_image: https://direct_url_to_image.jpg
---

```
git fetch
```

`git fetch` fetches branches and/or tags from remote repositories. Remote-tracking branches are updated in local environment. 


```
git pull
```

`git pull` does both `git fetch` and `git merge` as default, i.e. the changes on the remote target branch will be fetched and merged to our local branch. With option `--rebase`, it can rebase the remote changes on the current branch instead of `merge` strategy.
Python And It's Interesting Web Frameworks Django And Flask
Published: 2022-05-01 12:54:21

Python is a very good enough programming language for programmers. Whether you are a Java, c++, c# or ruby, JavaScript, PHP or any other programmer in the world of developing Web applications would be very happy with the power of python programming language at first because of it's simplicity to learn it and development of modern applications for daily tasks is just amazing. Django and flask are python programming language website frameworks which means that if anyone wants to develop a secure, easy to manage, and easy to deploy website applications that can scale up to a totally very big website much like Facebook, Twitter, Netflix and others of course with the help of other website development tools and resources can use python website frameworks. The amazing things about Python Web frameworks is it allows programmers finish the process of building web apps in a very short period of time. If you are curious about building web applications that's interesting enough can try Django web framework. It's so easy to do everything with it. It has all the capabilities to create an appealing user interface using the same old stuff l(html and css) even more than that. Flask is the other python web framework that is very nice shortly. Flask can help you out with the following 1.its Jinja template engine helps in making any front end and user experience very appealing by using html and css or any other stuff like bootstrap or aka (cdn). Flask has a lot of power when it comes to the time needed to complete a full scale relatively not complex web application even for a total beginners with little knowledge of the basics of the python programming language which is impossible to do using the other programming languages like java and PHP or c# being on the same level of know how. Apart from the best benefits such as the ease to use python programming language and it's resources for artificial intelligence, machine learning, internet of things which are a bit harder concepts and topics it's very nice and wise to learn python programming language and it's web frameworks if you want to be happy with your journey of being a computer programmer. Thanks 👍 that's what I just shared today so I will be sharing more in the next endeavors bye.
Video Conference App with React, WebRTC and Firebase.
Tags: react, tutorial, javascript, webdev
Published: 2022-05-01 12:49:16

This is probably the simplest solution to building your own Full-Stack Google Meet/Zoom Clone with Socket.IO and WebRTC.

Fork the Video-call App hosted on GitHub, and then the job’s done.

## Deployed: 🤯
https://prismatic-wisp-62ba05.netlify.app/

## Version Control + Documentation 🤐
https://github.com/hr21don/React-WebRTC-Firebase-App

## License: 📝
This project is under The BSD Zero Clause License (0BSD). See the LICENSE for more information.

## Contributions
Contributions are always welcome...

🔹 Fork the repository
🔹 Improve current program by
🔹 improving functionality
🔹 adding a new feature
🔹 bug fixes
🔹 Push your work and Create a Pull Request
List to Dict
Tags: python, programming
Published: 2022-05-01 12:11:00

Convert lists into dicts using just one line of code. 

This trick is useful on a real project with Django and Machine learning for example. 

```python
fruits = ["mango", "banana", "apple"]

price = [10, 5, 4]

new_dict = dict(zip(fruits, price))
```

You can learn more about the `zip` function [here](https://docs.python.org/3.3/library/functions.html).

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
Sending a message with the Twitter API in a Cloudflare worker
Tags: twitter, cloudflare, serverless
Published: 2022-05-01 12:10:51

If you are trying to use the Twitter API, you probably saw many examples using the `twitter-api-v2` npm package which works fine in Node.js but unfortunately does not work in a Cloudflare Worker as it relies on Node.js APIs.

In order to use the Twitter API, you have to handle the OAuth authentication and use `fetch` to send the request. At the time I wrote this post there were no examples of this, so it took me some time to figure out how to do it. The following snippet shows you how to send a tweet, but you can use any API method you want.

```ts
import OAuth from 'oauth-1.0a';
import { HmacSHA1, enc } from 'crypto-js';

const oauth = new OAuth({
  consumer: { key: TWITTER_API_KEY, secret: TWITTER_API_SECRET },
  signature_method: 'HMAC-SHA1',
  hash_function(baseString, key) {
    return HmacSHA1(baseString, key).toString(enc.Base64);
  },
});

const oauthToken = {
  key: TWITTER_ACCESS_TOKEN,
  secret: TWITTER_ACCESS_TOKEN_SECRET,
};

const requestData = {
  url: 'https://api.twitter.com/1.1/statuses/update.json',
  method: 'POST',
  data: { status: 'Hello from Cloudflare worker' },
};

const response = await fetch(requestData.url, {
  method: requestData.method,
  headers: {
    ...oauth.toHeader(oauth.authorize(requestData, oauthToken)),
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams(requestData.data),
});

console.log(await response.json());
```
Cuidado com esse código no Javascript
Tags: javascript, programming
Published: 2022-05-01 11:43:43

## Cuidado com labels em javascript

Você sabe qual é o problema nesse código?

```js
[1, 2, 3].map(x => {id: x})
```

Se você executar esse código, você verá que não terá nenhum erro, mas retornará um array de elementos `undefined` ao invés de retornar um array de objetos com a propriedade `id`.

Porque isso acontece? Primeiramente é importante entender como arrumar esse código.

Para retornar um objeto diretamente de uma *arrow function* é necessário utilizar `()` envolta do objeto, da seguinte forma:

```js
// ❌ 
[1, 2, 3].map(x =>   {id: x}   ) // => [undefined, undefined, undefined]

// ✅ 
[1, 2, 3].map(x => ( {id: x} ) ) // => [{id: 1}, {id: 2}, {id: 3}]
```

Outra forma seria utilizar `return` 

```js
[1, 2, 3].map(x => {
	return {id: x} 
}) 
```

Então o que seria esse `x => {id: x}` ?

Na verdade, esse código deve ser visto da seguinte forma

```js
[1, 2, 3].map(x => {
	id: x
})
```

E o que ele realmente representa é a utilização de um [labeled statement](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/label) ou também conhecido como label no Javascript.

Um label serve como um identificador para depois ser utilizador por um `break` ou um `continue`. Um exemplo seria quando se tem mais de um `for`  loop dentro do outro e você deseja dar um `break` ou `continue` em um loop fora do escopo em que o código se encontra, ou seja, você está no loop de dentro, mas deseja dar um `break` no loop de fora. 

```js
loop1: for(let i = 0; i < 10; i++) { // loop de fora
	loop2: for(let i = 0; i < 10; i++) { // loop de dentro
		if(condition1) {
			break; // sai do loop2
		}
		if(condition2) {
			break loop2; // sai do loop2, igual a usar somente "break;"
		}
		if(condition3) {
			break loop1; // sai do loop1
		}
		if(condition4) {
			// labels tambem podem ser usados com "cotinue"
			continue loop1; // continua o loop1
		}
	}
}
```

Um label pode ser atribuído para qualquer variável, até mesmo `for` , `while` e escopos como `label: { /* codigo javascript */ }` e é dai que surge o erro no código.

Portanto, fique atento ao retornar objetos diretamente em uma *arrow function* para não cair no perigo de utilizar um label statement de maneira indesejada.