teleren/devto huggingface dataset:
Python's Lambda, map, and filter
Tags: beginners, python, programming, tutorial
Published: 2022-06-25 08:05:38

## Lambda
Perhaps you want to create a function that takes a function and an argument.
Something that looks like this
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bixm1qvchxb13au7xhvv.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vra97cjbhi2hoc31m04b.png)
Here's it is written with the lambda function
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su2mxltjbjj0ih5lb18f.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jevue6co67nlktn8w88.png)
Lambda is an in-built python function that can also be called an anonymous function that can be written in a single line for a particular function, though not as powerful as using "def" to create a function.
It is written in a format
(Lambda x: 2*x )(15)
Where it takes an argument x and multiplies it by 2 the second parentheses is the argument it takes in
Therefore printing this will result in 30
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixnu7eelr7w2vnraw4vc.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsvegrs2i0b8wgnmtyqx.png)
It can also be written in the format
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjaqcrv8j5v3hb3xg0nf.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk5m13s1bo9sjhdac1mz.png)

## Map and filter
These are inbuilt functions in python,
The map is used to pass a function over an iterable I.e a list
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb520pyq7xl19fpxlgu4.png)
Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42a37qcg1mzb58cd33ts.png)
It takes in two arguments, the first is a function and the second is iterable.
The map function has to be explicitly converted into a list for the value to be seen.
Filter as the name implies is used to filter or remove items on the list based on certain conditions that are specified.
It takes in two arguments the first is the specified condition and the list
Consider the code
Code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgicsqyt0ub55y60xp1e.png)
Output:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wzppfj13x76gnttvg83.png)
This is used when you need only certain elements in a list that specifies a condition.
Hope you enjoyed reading this 
Like, share, and comment.
Create Singleton with ES2022
Tags: beginners, tutorial, typescript, javascript
Published: 2022-06-25 08:23:10

Create a singleton? Why? For the glory of OOP, of course!

ES2022 brings new cool feature of static initializers, which means now it's even easier to create 
singletons in JS/TS.

- make constructor private so ~~scrubs~~ consumers don't instantiate your class;
- create a private static vip-one-of-a-kind instance;
- initialize the vip-one-of-a-kind instance with new ES2022 bells and whistles static block;
- serve the private static vip-one-of-a-kind instance using public static getter

```typescript
class Foo {
    private static instance: Foo;
    
    static {
        Foo.instance = new Foo();
    }

    public static get getInstance(): Foo {
        return Foo.instance;
    }

    private constructor() { }
}
```

Looks more neat to me than the old way:

```typescript
class Foo {
    private static instance: Foo;
    
    public static get getInstance(): Foo {
        if(!Foo.instance){
            Foo.instance = new Foo();
        }
        return Foo.instance;
    }
    
    private constructor() { }
}
```

Though they both are consumed in the same way
```typescript
const bar = Foo.getInstance;
```

Huzzah!
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-06-25 08:00:17

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258dec9298.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What airline do developers prefer when they're in a rush?

___A:___ Delta.
 -->
Decode a Legacy Website
Tags: webdev, javascript, decode, legacy
Published: 2022-06-25 07:14:34

If you ever needed to scrap a legacy(old) site in **Hebrew** you probably got a lot of these: `�������`

> The replacement character � _(often displayed as a black rhombus with a white question mark)_ is a symbol found in the Unicode standard at code point U+FFFD in the Specials table. **It is used to indicate problems when a system cannot render a stream of data to a correct symbol**.

Here is a snippet of what you get if you do not decode:
`<html dir=ltr>\n<head>\n<title>�����</title>.......</html>\n`

And here is if you do:
`<html dir=ltr>\n<head>\n<title>חדשות</title>.......</html>\n`

To get the Hebrew letters we'll need to use the `TextDecoder` class, which is native to Node.js.

```js
fetch('www.example.com')
    .then(res => res.arrayBuffer())
    .then(buffer => {
      const decoder = new TextDecoder('windows-1255');
      return decoder.decode(buffer);
    });
```

Here we are using the `windows-1255` encoding option because we are decoding Hebrew characters.
We could choose `windows-1251` which is appropriate for the Cyrillic script.

And of course, we like **DRY** code!
So I recommend exporting this into a function in a utils folder for reuse and a more readable experience (reading the function's name will tell us what it does).

```js
export const decodeLegacyWebsite = async promise =>
  promise
    .then(res => res.arrayBuffer())
    .then(buffer => {
      const decoder = new TextDecoder('windows-1255');
      return decoder.decode(buffer);
    });
```

The `decodeLegacyWebsite` function will receive a promise and return a string representing the Html response from the site.
Shell Basics
Published: 2022-06-25 06:41:57

Hello all, so i joined the alx SE program for cohort 8 this month, and it has been an amazing experience, from meeting new people to learning new things as well as increasing my reading culture as long as tech is the topic.

So i was taught alot about Ubuntu 20.04
The default editors that is associated with it
Vi, VIm and Emacs.

How to use eah of this editor to create and convert files.
Also i learnt basic shell navigation with the tree model in mind.

Creating directory, changing directory, copying files around, pasting files, cutting files, moving files, renaming files, deleting files and directories as well as changing file mode into being an executable file.

I also learnt alot on Github.
cloning repository, creating personal access tokens to connect our sandbox as well as how to create remote directories, add files and basically do alot of operations.

I learnt how to install and setup vagrant on my machine as a virtual environment.

I hope to write more technical and insightful contents as i progress on here.
Intelligent Cryptocurrency
Published: 2022-06-25 06:07:39

High commissions, low refunds, happy customers!

For me personally it's always important to promote a product that actually helps the people who buy it while also being able to make great commissions with low refunds.

[**Intelligent Cryptocurrency**](https://bit.ly/3OkcXl3) has been around since 2020 (with many years of experience before that).

We have over 1500 VIP members and over 600,000 combined followers on social media.
[**CLICK HERE**](https://bit.ly/3OkcXl3)
The standard and quality of the content and support that customers get inside our members area is excellent so you can feel great about promoting our membership knowing that everyone who buys will get exactly what is advertised (and more).
[**CLICK HERE**](https://bit.ly/3OkcXl3)
We as still so early to crypto and as the space continues to grow over the coming years we will continue to grow. There is currently very little competition and the market is completely wide-open. Millions of people have yet to learn about crypto and our membership is the perfect place to help them with their crypto 
journey!
[**CLICK HERE**](https://bit.ly/3OkcXl3)
Khu đô thị Danko Phú Bình - Trực tiếp chủ đầu tư Danko Group
Tags: dankogroup, dankophubinh, dankothainguyen
Published: 2022-06-25 05:47:57

Khu đô thị Danko Phú Bình - Thông tin bảng giá, mặt bằng liền kề, biệt thư, Shophouse Trực tiếp chủ đầu tư Danko Group. Dự án Khu đô thị Danko Phú Bình là kết tinh của cuộc sống tinh tế trọn vẹn và lãng mạn thể hiện một cuộc sống thời thượng
Website: [https://www.dankophubinh.net/](https://www.dankophubinh.net/)
Thiết kế liền kề Danko Phú Bình Thái Nguyên: [https://www.dankophubinh.net/mau-thiet-ke-lien-ke-danko-phu-binh-thai-nguyen/](https://www.dankophubinh.net/mau-thiet-ke-lien-ke-danko-phu-binh-thai-nguyen/)
Thết kế shophouse Phú Bình: [https://www.dankophubinh.net/thiet-ke-shophouse-phu-binh/](https://www.dankophubinh.net/thiet-ke-shophouse-phu-binh/)
Có nên đầu tư tại dự án khu đô thị Danko Phú Bình?: [https://www.dankophubinh.net/co-nen-dau-tu-tai-du-an-khu-do-thi-danko-phu-binh/](https://www.dankophubinh.net/co-nen-dau-tu-tai-du-an-khu-do-thi-danko-phu-binh/)
Soundcloud: [https://soundcloud.com/dankophubinh](https://soundcloud.com/dankophubinh)
Linkedin: [https://www.linkedin.com/in/dankophubinh/](https://www.linkedin.com/in/dankophubinh/)
Tumblr: [https://dankophubinh.tumblr.com/](https://dankophubinh.tumblr.com/)
Flickr: [https://www.flickr.com/people/dankophubinh/](https://www.flickr.com/people/dankophubinh/)
Pinterest: [https://www.pinterest.com/dankophubinh](https://www.pinterest.com/dankophubinh)
Twitter: [https://twitter.com/dankophubinh](https://twitter.com/dankophubinh)
Youtube: [https://www.youtube.com/channel/UCfoOX3uzTS98r2B_XcILj8Q](https://www.youtube.com/channel/UCfoOX3uzTS98r2B_XcILj8Q)
Twitch: [https://www.twitch.tv/dankophubinh](https://www.twitch.tv/dankophubinh)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4lok7cq7m0yqaky1ywr.jpg)
205. Leetcode solution in cpp
Tags: cpp
Published: 2022-06-25 05:37:49

class Solution {
 public:
  bool isIsomorphic(string s, string t) {
    vector<int> charToIndex_s(128);
    vector<int> charToIndex_t(128);

    for (int i = 0; i < s.length(); ++i) {
      if (charToIndex_s[s[i]] != charToIndex_t[t[i]])
        return false;
      charToIndex_s[s[i]] = i + 1;
      charToIndex_t[t[i]] = i + 1;
    }

    return true;
  }
};
392. Leetcode solution in Cpp
Tags: cpp
Published: 2022-06-25 05:35:08

```
class Solution {
 public:
  bool isSubsequence(string s, string t) {
    if (s.empty())
      return true;

    int i = 0;
    for (const char c : t)
      if (s[i] == c && ++i == s.length())
        return true;

    return false;
  }
};


```
665. Leetcode solution in cpp
Tags: cpp
Published: 2022-06-25 05:26:49

```
class Solution {
 public:
  bool checkPossibility(vector<int>& nums) {
    bool modified = false;

    for (int i = 1; i < nums.size(); ++i)
      if (nums[i] < nums[i - 1]) {
        if (modified)
          return false;
        if (i == 1 || nums[i] >= nums[i - 2])
          nums[i - 1] = nums[i];  // decrease previous value
        else
          nums[i] = nums[i - 1];  // increase current value
        modified = true;
      }

    return true;
  }
};


```
Day 4 : 100DaysOfSwift🚀
Tags: ios, swift, 100daysofcode, 100daysofswift
Published: 2022-06-25 05:17:33

## Day 4

## Loops
the ability to repeat some simple task billions of times every second is called Loops.

**For loop

```
let count = 1...10
for number in count {
    print("Number is \(number)")
}
```
Ans:

```
Number is 1
Number is 2
Number is 3
Number is 4
....
Number is 20
```
With underscore(_)

```
for _ in 1...5 {
    print("Saurabh")
}
```
Ans:

```
Saurabh
Saurabh
Saurabh
Saurabh
Saurabh
```

**While Loop**
A second way of writing loops is using while: give it a condition to check, and its loop code will go around and around until the condition fails.

```
var number = 1

while number <= 10 {
    print(number)
    number += 1
}

```
Ans:

```
1
2
3
4
5
..
10
```
**Summary**
1.Loops let us repeat code until a condition is false.
2.If you don’t need the temporary constant that for loops give you, use an underscore instead so Swift can skip that work.
Angular - Avoid function calls in templates
Tags: angular, typescript, webdev, angularpipes
Published: 2022-06-25 05:17:33

It is not a good practice to write function calls for computing values inside the templates. 

Angular will run your function in each of it's change detection cycle (which is quite frequent) and if the function is a complex one, this will impose a serious effect on the performance. 

Bad:
```
<tr *ngFor="let user of users">
  {{ someFunction(user)}}
</tr>
```

Good:
Creating a property in the ts file and setting the value to it once.
```
this.users = this.users.map(user => ({ ...users, firstname: someFunction(user) });

```

Better: 
[Angular Pipes](https://angular.io/guide/pipes) - A pure pipe is a pipe that will always return the same output for an input. Angular executes a pure pipe only when it detects a pure change to the input value because it already knows that the pipe will return the same value for the same input.
```
@Pipe({
     name: 'examplepipe',
     pure: true
})
export class ExamplePipe implements PipeTransform {
     transform(value: any, args?: any): any {
          // code here
     }
}
```
CSS Battle: #2 - Carrom
Tags: css, webdev, tutorial, beginners
Published: 2022-06-25 04:59:41


In this article, I will solve a [Carrom](https://cssbattle.dev/play/2) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/2) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Simply Square](https://cssbattle.dev/targets/2.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML

First, create an HTML for this, I've used the two containers to do that. you can use [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) as well.

<CodeTitle title="index.html" lang="html"/>
```html
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
```


### CSS

Now let's style the containers. 

<CodeTitle title="styles.css" lang="css"/>
```css
body {
  margin: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
  column-gap: 100px;
  background: #62374e;
}
.box span {
  width: 50px;
  height: 50px;
  background: #fdc57b;
  align-self: center;
  margin: 50px;
}
```

### Quick Links
- [Codepen](https://codepen.io/j471n/pen/PomZXLR)
- [Carrom](https://cssbattle.dev/play/2)

>Note: Codepen might be different from the real shape but the code is correct with 100% match.

### Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Poor Man's Bionic Reading
Tags: chrome, javascript, tooling, productivity
Published: 2022-06-25 04:53:55

I find that [Bionic Reading](https://bionic-reading.com/) is super cool. But their Chrome extension is not quite pleasant to use.

So I create a quick extension. But the algorithm is not as complex as the original one. This extension simply "bionifies" 60% of word length.

```javascript

function bionifyText(text) {
  const words = text.split(/\s+/);
  return words.map(bionifyWord).join(" ");
}

function bionifyWord(word) {
  const wordLength = word.length;
  const numBionifiedCharacters = Math.floor((wordLength * 60) / 100);
  const bionifiedToken = word.slice(0, numBionifiedCharacters);
  const theRest = word.slice(numBionifiedCharacters);
  return `<b>${bionifiedToken}</b>${theRest}`;
}
```

## How to use

1. Clone [the repository](https://github.com/asinkxcoswt/poorman-bionic-reading)
2. Open Chrome and go to `chrome://extensions/`
3. Enable Developer Mode (probably at the top right corner)
4. Click "Load unpacked" and choose the repository root directory
5. Open any website, highlight the text you want to bionify
6. Right click, choose "bionify", and boom!

## How to customize

Change the implementation of the function `bionifyWord` in `bionify.js` however you like, go back to `chrome://extensions/` and click the reload icon

## Example Usage

![example usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjikjrdfz1iyhm91z7se.gif)
CSS Battle: #1 - Simply Square
Tags: css, webdev, beginners, tutorial
Published: 2022-06-25 04:40:17

In this article, I will solve a [Simply Square](https://cssbattle.dev/play/1) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/1) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Pilot Battle](https://cssbattle.dev/targets/1.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML

First, create an HTML for this, I've used the two containers to do that. you can use [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) as well.

```html
<div class="box">
  <div></div>
</div>
```


### CSS

Now let's style the containers. 

```css
.box {
  width: 400px;
  height: 300px;
  background: #5d3a3a;
}
```
After applying the CSS to `.box` it will look like this: 

![first](https://imgur.com/H2t0ugm.png)

Now we style the child `div` of `.box`.

```css
.box div {
  background: #b5e0ba;
  width: 200px;
  height: 200px;
}
```

After applying the CSS, here's the result: 

![result](https://imgur.com/IyYXGkR.png)

Now the problem is solved by simply the above styles.


**Codepen**

{% codepen  https://codepen.io/j471n/pen/oNWbJbX %}

## Alternate Solution 

This is one more way you can do this even though there are many ways, I like the following:

### HTML
```html
<div></div>
```

### CSS
```css

body{
  background: #5d3a3a;
  margin:0;
  
}
div {
  width: 200px;
  height: 200px;
  background: #b5e0ba;
}
```

## Wrapping up

If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
React Element vs React Component
Tags: webdev, react, javascript
Published: 2022-06-25 04:33:21

Hey there,

Most of the developers would be using the React in their projects, but we often ignore the small things that sometimes may need to have a deep insight to understand.

One of the such concepts for React is **React Elements, and Component** differences.

Let us see the differences between them:

## React Element:
React Element is an object which has the information about the type of react element, and the props that, it can hold and the children.

let us say we have an react element whose tag is 'h1', and the text between the tag would be "Hello world". In this scenario the React element which is said an object earlier  would be represented as below:

This is the representation would be stored in the react tree

```
const reactElement = {
 type: 'h1',
 null,
 'Hello world',
};
```

To create that react element we would use createElement API of react as below:

```
React.createElement('h1', null, 'Hello world');
```

and same can be created using JSX:

```
<h1>Hello world</h1>
```

Now let us say we have to create the same above element multiple places and we have such multiple usages. In such case we can create the function and keep the JSX in that function. so whenever we need we can call that function to have the same element.

```
const renderElement = text => {
  return (
     <h1>
       {text}
     </h1>
  );
};
```

since the above function returns the JSX we can call that function whenever we need in JSX

the usage of that function would be as below:

```
{renderElement("text1")}
{renderElement("text2)}
```

we can also pass the `renderElement` function to the createElement API to create reactElements

React.createElement(renderElemet, null, 'Hello world');

But what we cannot do with the renderElement function is we cannot use the **renderElement** as tag which we did for **div** tag as shown below:

for a div tag you could have done this

Vanilla JavaScript
```
const element1 = React.createElement('div', null, 'Helloworld');
```

JSX
```
<div>
 Hello world
</div>
```

const element2 = React.createElement(renderElement, null, 'Hello World');


but you cannot use the element as JSX

In order to use that function as tag, the name should be start with capital letter, and such functions are called components.

```
const CustomComponent = ({ children }) => {
return (
 <h1>
   {children}
</h1>
);
```

this CustomComponent can be used as tag, or also rendered with React API as shown below:

Vanilla JS:

```
const element3 = React.createElement(CustomComponent, null, 'Hello world');
```

JSX:

```
<CustomComponent>
  <h1>
   Hello world
  </h1>
</CustomComponent>
```

These Components also have access to the special variables within the scope of the Class, and functions called state which holds the values and the React elements can be re-rendered whenever these values are updated.
Making your p5*js preview pages look good.
Tags: processing, p5js, webdev
Published: 2022-06-24 17:27:26

![Template preview image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rotgyf7bb80jzr5gni1k.png)

I like to make art thru code and one of the most convenient ways to do that, taking sharing it later into account, is to use a JavaScript library like [p5*js](https://p5js.org/).

## Why [p5*js](https://p5js.org/)?

I like to use it because its syntax is very similar to its parent project [Processing](https://processing.org/), language I'm very familiar with.

> I like to learn new things, but if it's just to make something simple or to explore concepts that aren't tied to performance or platform I like to go with what I already know.

## Why making a template, or more correctly a page to display the sketches?

I believe I'm not the only one that wants to share is work in a more pleasant looking way, we all like beautiful things.

I made this template so from now on when I share my code deviations, that don't fill the screen, be more than just a square on the top left corner of the screen and look a little more pleasant, at least to me. 🤣

> The first person that needs to be happy regarding any work, it's his creator.

You can find the template [here](https://github.com/antonio-m-o-costa/p5js-template), feel free to do with it anything you want.

### I'm a newbie at this!
This is the first Repository I made with the intent of sharing it with every one, so if you have any feedback on how to improve the code, documentation or anything else, as small as it maybe, feel free to comment or open a [issue](https://github.com/antonio-m-o-costa/p5js-template/issues).

Even regarding this post, I just joined [DEV](https://dev.to/) and I don't really know what am I doing, any feedback is appreciated.

Thank you for reading 🍃