teleren/devto huggingface dataset:
Working With CSS Filters
Tags: css, webdev, html, design
Published: 2023-01-12 19:26:14


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

CSS Filters are a fun way to spice up any image you use within web development. 

[Appcode.app, a web developer resource site](https://appcode.app), a web developer resource site, wrote an awesome article covering the [technical specifications of the CSS filter property](https://appcode.app/css-filter-property/). 

Some specifications cover using opacity, grayscale, and other function values to create unique effects when working with images. Like this photo below:


![This awesome photo effects was created using multiple layers with CSS.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rztorzfwhefmqv81z4k.png)

If you are interested in working with filters for backgrounds, icons, and other photo media types, check out the filter property's resources and function values. Here are some of the functions below.

- Opacity
- Hue-rotate
- Drop-shadow
- Saturate
- Contrast
- ... and quite [a bit more filters](https://appcode.app/css-filter-property/)


![Collection of images using different filter functions and values.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyu6osuuw57myj4lefah.png)

You can also read articles on manipulating backgrounds for web pages and site development.

- [Applying 3D effects on images](https://appcode.app/css-3d-image-effect-examples-and-code/)
- [Creating fun images with grayscale](https://appcode.app/how-to-create-a-black-and-white-image-using-css-grayscale/)
- [Fantastic 3 Column Layouts](https://appcode.app/create-a-three-column-layout-using-pure-css-and-background-image/)

Be sure to reference these materials on AppCode.app and share this article if it has helped you write or create something! Thanks for reading!
Using async-await with arr.map()
Tags: javascript, node, programming, beginners
Published: 2023-01-12 19:25:10

While working on a task today, I had to populate my array of objects using my database.

Instinctively, I used the `map` function. The code looked something like this:

```javascript
const dataList = [
    { type: "test__1" },
    { type: "test__2" },
	{ type: "test__3" },
	{ type: "test__4" }
];

const modifiedList = dataList.map(async (item) => {
    // Get additional properties from DB
    const dataFromDB = await DataModel.findOne({
        type: item.type
    });

    return { ...item, dataFromDB };
});
```


## **❗️ Did you spot the error?**

👉🏽  In `dataList.map()`, we are returning an array of promises and not an array.
👉🏽  Hence, the `modifiedList` will look something like this:

![console.log(modifiedList)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yloyomwt0lwwg358aevr.png)



## ⚡️ **The Solution?**

Simple! We just need to wrap our function with `await Promise.all` so that our array of promises is resolved to the desired `modifiedList` .

```javascript
const modifiedList = await Promise.all(
    dataList.map(async (item) => {
        // Get additional properties from DB
        const dataFromDB = await DataModel.findOne({
            type: item.type
        });

        return { ...item, dataFromDB };
    });
);
```
Ruby On Rails Beginners - Demystify the magic. Part 2: It's just a ruby method
Tags: webdev, rails, beginners
Published: 2023-01-12 19:16:32

[Part 1](https://dev.to/jlaw79/ruby-on-rails-beginners-demystify-the-magic-part-1-the-ruby-looks-different-4f6b) | [Part 3](https://dev.to/judelawrence/ruby-on-rails-beginners-demystify-the-magic-part-3-the-linkto-method-9n)

Following on from part 1, we are going to break down the link_to method. It's something you'll use almost as soon as you start working on a rails app, and it's fairly easy to understand.

The link_to method is referred to as a helper. A helper is just a ruby method that is available to use in Rails view files. Rails comes with built-in helpers, like link_to, but you can also create your own.

```ruby
<%= link_to "Apple", "http://apple.com" %>
```

or if you prefer to use parentheses
```ruby
<%= link_to("Apple", "http://apple.com") %>
```

Which will render out the following HTML code.
```html
<a href="https://apple.com">Apple</a>
```

To get an idea of what's going on here, we can recreate a basic version of the method ourselves.

```ruby
def link_to(text, url)
   "<a href='#{url}'>#{text}</a>".html_safe
end
```

And that it's. The built-in helper is more complex than this, but at it's most basic version this is all it does.

The built in helper can also take in a third argument, which is a hash where you can pass in HTML options, which you can learn more about [here](https://api.rubyonrails.org/v5.2.3/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to)

In the next part we'll dive in to the rails api docs, and learn a little more about the link_to method.
How to do empty commit in git and why?
Tags: git, github, webdev, programming
Published: 2023-01-12 19:08:03

## Did you know you can make empty commits in git?
Have you ever needed to trigger a CI build but couldn't because manual re-trigger was not an option?
If so, you might be tempted to make a meaningless change to your source file only to make a git commit just to re-trigger the CI pipeline.

What if I told you there was a better way to do it? 🧐

### Empty commit
Yes! You can make a git commit without making any changes to your source file(s) whatsoever. For example:

```bash
git commit --allow-empty -m "Trigger CI build"
```

---

I hope you find this tip interesting and helpful.
If you did, please give it a like and share it with someone who might benefit from it.

My name is Ashutosh, and I work as a software engineer. I love to share my learning with the community.
You can connect with me on [LinkedIn](https://www.linkedin.com/in/iamashutoshbhardwaj/) and follow me on [Twitter](https://twitter.com/BhardwajAshu96).
Phishing using Google Ads - An awareness
Tags: cybersecurity
Published: 2023-01-12 19:06:17

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


Phishing using Google Ads have become a common tactic used by cybercriminals to trick users into giving away personal information or login credentials. These attacks involve creating fake websites or landing pages that appear to be legitimate and then using Google Ads to drive traffic to these sites.

One common example of a phishing attack using Google Ads is the creation of a fake login page for a popular online service, such as a bank or email provider. The attacker will create a website that looks exactly like the real login page but with a slightly different URL. They will then use Google Ads to promote this fake site, targeting users who are searching for the real service.

When a user clicks on the ad, they are taken to the fake site, where they are prompted to enter their login credentials. Once the user has entered their information, the attacker can use it to gain access to their account and steal sensitive information.

Another tactic used in phishing attacks involving Google Ads is to create fake websites that offer free or discounted products, such as gift cards or vouchers. Users who click on the ad are taken to the fake site, where they are asked to enter personal information or complete a survey in order to claim the offer. This information is then used by the attacker for identity theft or other malicious activities.

To protect yourself from phishing attacks using Google Ads, it's important to be cautious when clicking on ads, even if they appear to be from a legitimate source. Always verify that the URL of the website is correct before entering any personal information. Additionally, you should use an ad blocker to block unwanted ads. As an end user, setting up Quad9 DNS will also provide you protection with the Bfore.Ai community version.

In summary, Phishing attacks using google ads have become very common and sophisticated, it's essential to be cautious when clicking on ads, verify the website's URL before entering personal information, use ad-blocker, install anti-malware software, and avoid clicking on suspicious links or opening email attachments from unknown senders to protect yourself from these types of attacks.

#malware #identitytheft #google #phishing #cybersecurity
Higher Order Functions
Tags: javascript, tutorial, beginners, higherorderfunctions
Published: 2023-01-12 18:54:49

There are tons of different ways to code but an efficient way to code is with 'Higher Order Functions'.

These are some of the methods you may have heard of 
 --> Array.prototype.map, Array.prototype.filter and
     Array.prototype.reduce are some of the Higher-Order functions that are built into JS!

Let's start with the 
Array.prototype.map -->
The map() method creates a brand new array by calling the callback function on every element in the array.
map() then will take all of those values and return a brand new array. map() uses 3 parameters for it's callback -->
element, index, array.
EX -->
```
const array = [1, 2, 3, 4, 5];
const multiplied = array.map(function(element) {
  return element * 2;
});
console.log(multiplied);
This prints - [2, 4, 6, 8, 10]
```
Next we have the 
Array.prototype.filter -->
The filter() method creates a brand new array with the elements that pass the condition by the callback function.
filter() uses 3 parameters for it's callback -->
element, index array.
EX -->

```
const friends = [
  { name: 'Bailey', age: 24 },
  { name: 'Jordan', age: 23 },
  { name: 'Merlin', age: 30 },
  { name: 'Rachel', age: 26 },
  { name: 'Nico', age: 23},
];
const older = friends.filter(people => people.age >= 24);
console.log(older);
This Prints - [
  { name: 'Bailey', age: 24 },
  { name: 'Merlin', age: 30 },
  { name: 'Rachel', age: 26 }
]
```
Our last method of discussion is Array.prototype.reduce() -->
The reduce() method calls the callback function on each element in the array and then gives us a single value. reduce() also has an initialValue available the initialValue does this -->

If the initialValue is provided, the accumulator will equal  the initialValue and the currentValue will equal the first element in the array.

If no initialValue is provided, the accumulator will equal to the first element in the array and the currentValue will be equal to the second element in the array.

reduce() uses four parameters for its callback --> accumulator, currentValue(or current), currentIndex(or i), array.
EX without initialValue --> 

```
const array = [5, 7, 1, 8, 4];
const sum = array.reduce(function(accumulator, current) {
  return accumulator + current;
});

console.log(sum);
This prints - 25
```
EX with initialValue -->

```
const sum2 = array.reduce(function(accumulator, current) {
  return accumulator + current;
}, 10); // <-- 10 is the initialValue

console.log(sum2);
This prints - 35
```
This concludes our into to Higher Order Functions I hope this can be of service to anyone who needs a quick and easy understanding of map(), filter(), and, reduce()!
#Rust 🦀 – Working with Generics and Types 👍
Tags: englishpost, generics, rust
Published: 2023-01-18 15:20:25

---
title: #Rust 🦀 – Working with Generics and Types 👍
published: true
date: 2023-01-12 18:37:08 UTC
tags: EnglishPost,EnglishPost,Generics,Rust
canonical_url: 
---

Hi !

I first used Generics back in the old C# days. It’s a super cool feature. Let’s ask ChatGPT for a definition:

> _Generics in programming are a way to create classes and methods that work with multiple data types. They allow the programmer to define type parameters, which can be passed as arguments to methods, classes, and interfaces. This allows for the creation of reusable and efficient code, as a single implementation can work with different types. Generics help to eliminate the need for separate implementations for each data type._
> 
> <cite>ChatGPT: Describe generics in programming language in 4 lines.</cite>

Rust support generics, so we can define placeholders for structs, enums, methods and more.

A cool way to understand the use of Generics, is to work with a HashMap collection. A Hashmap has 2 generic types, one for the key and the 2nd one for the values.

We can create a HashMap collection to store names and ages, using a string datatype and an integer datatype.

```

let mut names_and_ages: HashMap<&str, i32> = HashMap::new();

 names_and_ages.insert("Jeff the Squirrel", 2);
 names_and_ages.insert("Ace the Puppy", 1);
 names_and_ages.insert("Net the Cat", 4);

```

We can access the collection later and use it to print the values, with this output.

![output of the complete solution printing the full collection of name and ages](https://brunocapuano.files.wordpress.com/2023/01/image-22.png?w=678)

And this is the complete source code for this sample.

{% gist https://gist.github.com/elbruno/d18261ba74cef3b2f2593d5ee18dd3bb %}

Super cool !

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
O Conceito de Hooks e como o utilizar.
Tags: javascript, beginners, programming, react
Published: 2023-01-12 18:30:03

A alguns anos atrás o React não tinha uma forma de armazenar e reutilizar componentes de execução de lógica , trazendo maior dificuldade e trabalho para os desenvolvedores que tinham que usar meios alternativos para construir seus códigos.
Pensando nisso e como o resolver, foi se criado após algumas atualizações componentes específicos para resolver esses de problemas. Com isso se foi criado os Hooks que são componentes específicos do React que são utilizados para gerenciar o estado da aplicação. 

Eles são responsáveis pela lógica do código e permitem reutilizar a lógica em vários pontos dele, sem a necessidade de criar novos componentes. Hooks armazenam e executam a lógica de forma eficaz. Com isso, ele fez com que os códigos ficasem mais fáceis de serem feitos e compreendidos.

Existem dois tipos principais de hooks: `state hooks` e `effect hooks`. O `state hook` permite que você gerencie o estado em um componente de função, enquanto o effect hook permite que você faça o carregamento de dados de uma API ou ouvir eventos de mouse.


```
import { useState } from 'react';

function Example() {
  const [click, setClick] = useState(0);

  return (
    <div>
      <p>You clicked {click} times</p>
      <button onClick={() => setClick(clik + 1)}>
        Click me
      </button>
    </div>
  );
}
```

Nesse caso utilizando State hook `useState` para gerir o estado do contador. Incicialmente a contagem inicia com 0, porém com um novo clique, será somado + 1.


```
import { useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? (
        <p>Data loaded</p>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}
```

No exemplo acima, estamos usando o Effect hook `useEffect` para carregar dados de uma API quando o componente é montado. Ele funcionará apenas uma vez, devido ao array vazio ao final para retorno nulo.

Mas os Hooks não podem ser usados a bel prazer livremente carregando APIs e controlando estados, existem algumas ressalvas para o uso deste componene, como:

- Os Hooks só podem ser chamados dentro dos componentes da função React.

- Hooks só podem ser chamados no nível superior de um componente.

- Hooks não podem ser condicionais
 
Além disso eles não funcionam dentro de Loops ou classes. A fim de que sua ordem de chamada venha sempre que um componente for renderizado.

Com isso concluímos que os Hooks são uma alternativa mais fácil e prática de gerenciar o estado da aplicação.
What is new in C++20?
Tags: programming, cpp, news
Published: 2023-01-12 17:45:19

C++20 is the latest version of the C++ programming language, which was officially standardized in December 2019. It includes a number of new features and improvements over previous versions of the language. Some of the most notable changes include:

- 
Concepts: C++20 introduces a new feature called "concepts", which are a way to express constraints on template arguments. Concepts allow for more expressive type checking and improved error messages when using templates. Here's an example of how you might use a concept in C++20:

```cpp
template<typename T>
concept Addable = requires(T a, T b) {
  { a + b } -> T;
};

template<Addable T>
T add(T a, T b) {
  return a + b;
}
```

In this example, the Addable concept is defined to require that the type T can be added to another value of the same type (i.e., it has a + operator). The add function is then defined to take two arguments of type T, where T is constrained by the Addable concept.

- 
Coroutines: C++20 introduces support for "coroutines", which are a way to write asynchronous code in a more synchronous style. Coroutines allow you to write code that can be paused and resumed, similar to how a generator works in Python.
Here's an example of how you might use coroutines to asynchronously read from a file:

```cpp
std::fstream file("example.txt");
std::string buffer;

co_await file.async_read_some(std::addressof(buffer), buffer.size());
```

- 
Modules: C++20 introduces "modules", which are a way to organize code in a more modular fashion. Modules allow you to group related declarations (e.g., functions, classes, variables) together and make them available to other parts of your code. They are similar to headers but faster to compile and more powerful.

```cpp
export module my_module;

export int x = 1;

export void func() {
  std::cout << "Hello, World!" << std::endl;
}
```

- 
Ranges: C++20 introduces a new library for working with ranges of values, called the "ranges library". The ranges library provides a set of algorithms and views for working with ranges of values in a more functional style. Here's an example of how you might use the ranges library to filter and transform a range of integers:

```cpp
std::vector<int> v {1,2,3,4,5};
auto rng = v | std::views::filter([] (int i) { return i % 2 == 0; })
            | std::views::transform([] (int i) { return i * 2; });
std::cout<<*rng.begin(); // Outputs 8
```
This is just a small sampling of the new features in C++20, and there are many more improvements and changes in the language. C++20 provide more expressive and powerful tools for C++ Developers and make the language a more modern and powerful one.
Introducing @The_Cloud_Dev and @TheCSSDev ☁️🎨
Tags: meta, cloud, css, socialmedia
Published: 2023-01-12 18:15:05

There are now two new ways to keep up with the best DEV Community posts on your favorite topics!

We've just launched [@The_Cloud_Dev](https://twitter.com/The_Cloud_Dev) and [@TheCSSDev](https://twitter.com/TheCSSDev) as Twitter feeds. If you're still consuming content over on the Bird App and these are topics of interest to you, we encourage you to follow along! 

And if you know of any Mastodon servers on these topics, drop them in the comments—I'm already looking forward to getting these feeds syndicated to the Fediverse.

Internally, these are what we call "Satellite Feeds." In contrast to our main Twitter feed, Satellite Feeds are more likely to promote up-and-coming authors, product launches, project updates/feature logs, and dev journals.

@The_Cloud_Dev populates based on the tags `cloud`, `serverless`, `kubernetes`, `docker`, `ec2`, `gcp`, and `azure`.

@TheCSSDev populates based on the tag `css`. _Don't you love when things are simple?_ 😌

That's all for now! See you on social 🤓
Javascript Hoisting
Tags: javascript
Published: 2023-03-07 12:52:50

---
title: Javascript Hoisting
published: true
date: 2023-01-12 18:00:00 UTC
tags: JavaScript
canonical_url: https://www.90-10.dev/js-hoisting/
---

Hoisting is a mechanism where variable and function **declarations are moved to the top of their scope before code execution** - regardless of where they are declared in the code, **they are processed first before the code is executed**.

## Variable Hoisting

When a variable is declared using the var keyword, it is hoisted to the top of its scope so can be accessed and used even before it is declared in the code. But, its value will be undefined until assigned a value.

```
console.log(name); // Output: undefined
var name = "Paul";
console.log(name); // Output: Paul

```

## Function Hoisting

Functions declared using the function keyword are also hoisted to the top of their scope so can be called before they are declared in the code:

```
sayHello(); // Output: Hello World!

function sayHello() {
    console.log("Hello World!");
}

```

## Hoisting in ES6

ES6 introduced the `let` and `const` keywords for declaring variables. Unlike variables declared using var, **variables declared using let and const are not hoisted to the top of their scope,** therefore **cannot be accessible before declaration**.

```
console.log(name); // Output: Uncaught ReferenceError: name is not defined
let name = "Paul";
```

In the above example, since `name` is declared using `let`, it is not hoisted to the top of its scope, so it results in a `ReferenceError`.

## Take Away

It is **recommended** to use `let` or `const` instead of `var` **to avoid hoisting-related issues**.
Angular Application From Scratch - Angular Project Blog App For Your Portfolio
Tags: webdev, angular, javascript, programming
Published: 2023-01-12 17:54:04

Angular Application From Scratch - Angular Project Blog App For Your Portfolio - [https://youtu.be/6zv1PTuqIIc](https://youtu.be/6zv1PTuqIIc)

Learn how to build a professional Angular project for your portfolio! In this tutorial series, we will be creating an Angular blog application from scratch. You will learn how to set up the development environment, create components, work with forms and services, and deploy the final application. This tutorial is perfect for Angular developers of all levels looking to improve their skills and add a polished project to their portfolio.
Code smells - marcin.dev
Tags: jokes, webcomic, programming
Published: 2023-01-12 17:47:30

Code smells

https://marcin.dev/comics-code-smells

https://marcin.dev/comics

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