teleren/devto huggingface dataset:
Cybersecurity 2021 eBooks Bundle from Packt
Tags: cybersecurity, news, azure, aws
Published: 2021-06-29 11:23:45

![Cybersecurity 2021 eBooks Bundle from Packt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3wdv5lnldawyfra0lks.jpg)

[Cybersecurity 2021 eBooks Bundle from Packt](https://www.humblebundle.com/books/cybersecurity-2021-packt-books?partner=indiekings)

Humble Bundle teamed up with Packt to help you become digitally invulnerable, with eBooks like Learn Computer Forensics, Cybersecurity Threats, Malware Trends, and Strategies, and Mastering Malware Analysis. Dive into these digital tomes, and learn how to monitor, detect, and prevent malware, intrusions, hacks, and more, keeping your systems safe and secure for good.

Your purchase of this bundle helps support Covenant House, who provide housing and supportive services to youth facing homelessness.

This bundle launched on June 28, at 11:00 am PST and lasts through July 19, 2021. Pay what you want and support charity!
JS Confetti library with emojis ⚡️ 🎉
Tags: showdev, javascript, webdev
Published: 2021-06-29 11:01:24

Hi everyone!

Happy to announce, that my library [js-confetti](https://github.com/loonywizard/js-confetti) now supports emojis!

Please look at [README](https://github.com/loonywizard/js-confetti#readme) for instructions for Installation & Usage

All you need is to provide `emojis` array to `addConfetti` method:


```js
import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

// different emojis
jsConfetti.addConfetti({
   emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
})

// confetti from only unicorn emojis
jsConfetti.addConfetti({
  emojis: ['🦄'],
})

// different arguments in .addConfetti
jsConfetti.addConfetti({
  emojis: ['✨', '💫'],
  emojiSize: 100,
  confettiNumber: 30,
})
```


[You can see demo here](https://loonywizard.github.io/js-confetti) 🚀

{% codepen https://codepen.io/loonywizard-the-selector/pen/RwVNNge %}

I will be happy if this will be useful for anybody!

Feel free to add Issues for feature-requests / bugs
Is Machine Learning For You?
Tags: machinelearning, datascience, python, ai
Published: 2021-06-29 10:57:47

Machine learning (ML) is a method of data analysis that automates analytical model building. It is one of the branches of artificial intelligence (AI) based on the idea that systems can learn from data, make decisions and identify patterns with little or no human intervention. ML can also be described as a type of AI that allows software applications to become more accurate at predicting outcomes without being explicitly programmed to do so. 

##Why is it recommended that you learn ML?

ML is very important because it gives organizations an idea about changes in customer behavior and business operational patterns, and also in the support of the development of new products.

Do you think you would like to pick up a Machine Learning Tutorial or eBook soon? Please let me know in the comment section.

I hope this helps :-)

If you enjoy this, please subscribe to my [Newsletter] (https://www.getrevue.co/profile/STEMInstructor) and check out my work [here] (https://gum.co/wynyaajd). You can also hook me up on [Twitter] (https://www.twitter.com/STEMInstructor_)
Testing an accessible UI
Tags: react, testing, javascript, a11y
Published: 2021-06-29 10:56:14

Recently, my team has been writing lots of [Cypress](https://www.cypress.io/) tests before releasing a feature. And it struck us that while we were pushing on using [testing library](https://testing-library.com/) for both **Cypress** and **ReactJS**, we forgot something, and that is **ACCESSIBILITY**.

So let me give an example code of a simple UI component:
```javascript
const TextField = () => (
  <div>
    <label>Foo</label>
    <input type="text" />
  </div> 
);
```
If we were using **Enzyme**, the test would be something like this:
```javascript
it('should display correct value after typing in something', () => {
  const wrapper = shallow(<Textfield />);
  const input = wrapper.find('input');
  input.simulate('change', { target: { value: 'Hello' } });

  expect(input.value).toBe('Hello');
})
```
Not bad right? It looks okay, but it's not how I see the user will interact with it in the browser, because we are:
- just finding a random HTML input tag
- simulating an HTML event
- checking the property *value* of an HTML input tag.

Now, maybe I'm just not that familiar on proper use of Enzyme. But once I've used testing-library/react, it changed my way of thinking in testing UI components.

If we were to change the Textfield component and make it more accessible:
```javascript
const TextField = () => (
  <div>
    <label htmlFor="foo">Foo</label>
    <input id="foo" type="text" />
  </div> 
);
```
We set a relationship between the `label` and the `input`.

Using `testing-library/react`, we can come up with this test:
```javascript
it('should display correct value after typing in something', () => {
  // render in browser
  render(<Textfield />);
  // Using the label here as the name of the input field
  const input = screen.getByLabelText('Foo');
  // simulate the user typing 'Bar'
  userEvent.type(input, 'Bar');
  // Check that the input with the label 'Foo' has a value of 'Bar'
  expect(input).toHaveValue('Bar');
  // we can also check if this is really the value displayed in the browser
  expect(screen.getByDisplayValue('Bar')).toBeInTheDocument();
})
```

We are guided by the [guiding principle](https://testing-library.com/docs/guiding-principles) of **Testing Library**:

>The more your tests resemble the way your software is used, the more confidence they can give you.

In conclusion, by thinking how the user would interact with a UI component in the browser, we can imagine how we would write our tests, at the same time, we can also increase the accessibility of our UI components.

:beers: Cheers and Happy Testing! :hammer_and_wrench:
Cohorts and customisation
Tags: watercooler, webdev, opensource, privacy
Published: 2021-06-29 10:54:58

We are building [Offen,](https://www.offen.dev/?utm_source=forum&utm_campaign=0190) a fair and lightweight web analytics software that treats operators and users as equal parties. Here's a brief glimpse of our achievements over the last ten weeks.

### Customisable consent banner

To make it more convenient for operators to implement Offen in their websites, banners can now be freely adapted via CSS. This is done within some limits to ensure readability and functionality of the banner. Discover your inner artist and adapt the consent banner to the design of your website. [Learn more in our Docs.](https://docs.offen.dev/running-offen/customizing-consent-banner/?utm_source=forum&utm_campaign=0190)

### Explore cohorts

It is now possible for operators to filter the collected usage data based on URL, referrer, UTM parameters and landings as well as exits. In addition, we have added the tag "None" as a fallback for referrer values that are not supplied. Filters can be set and removed by clicking on the corresponding link element.

### Engage in dialogue

We aim to bring Open and the idea of fair data transfer closer to an interested audience. To do this, we want to engage in a dialogue with operators, users and activists and are looking for suitable events around the world. We are happy to receive recommendations for relevant lectures and conferences. Got something in mind that we should apply for? [Please let us know.](https://www.offen.dev/?utm_source=forum&utm_campaign=0190)
Freelance job scams: How to detect fake clients?
Tags: tutorial, startup, beginners, workstations
Published: 2021-06-29 10:17:20

While you applying for a <a href="https://www.geeksread.com/freelance-job-scams-how-to-detect-fake-clients/">freelance job</a>you must have awareness of these possible scams. a little investigative and careful look at the bidding and an agreement with clients
Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆
Tags: css, webdev, beginners, showdev
Published: 2021-06-29 10:06:37

500 single element CSS loaders. Pure CSS loaders with only one div. The biggest collection of loading animation using only CSS. 

![500 loaders](https://media.giphy.com/media/M7mmYF0WnCfeAnjwnJ/giphy.gif)
 
Ok, ok, let's stop this introduction and move to the real fun 😜

----

<center>Also available online 👇</center>
## <center>[css-loaders.com](https://css-loaders.com/)</center>

----

## Table of content

* [The Thin](#the-thin)
* [The Colorful II](#the-colorful-ii)
* [The Dots V](#the-dots-v)
* [The Line II](#the-line-ii)
* [The Cut](#the-cut)
* [The Arrow](#the-arrow)
* [The Shapes IV](#the-shapes-iv)
* [The Clones II](#the-clones-ii)
* [The Blob](#the-blob)
* [The Fullscreen](#the-fullscreen)

---

### The Thin

{% codepen https://codepen.io/t_afif/pen/BaRaqRQ %}

### The Colorful II

{% codepen https://codepen.io/t_afif/pen/qBmBJmw %}

### The Dots V

{% codepen https://codepen.io/t_afif/pen/rNmNqwr %}

### The Line II

{% codepen https://codepen.io/t_afif/pen/eYWYPEj %}

### The Cut

{% codepen https://codepen.io/t_afif/pen/MWmWPEG %}

### The Arrow

{% codepen https://codepen.io/t_afif/pen/wvdvYPJ %}

### The Shapes IV

{% codepen https://codepen.io/t_afif/pen/OJmJBzb %}

### The Clones II

{% codepen https://codepen.io/t_afif/pen/LYyYgew %}

### The Blob

{% codepen https://codepen.io/t_afif/pen/LYyYgQw %}

### The Fullscreen

Some people also like fullscreen loaders 😉

{% codepen https://codepen.io/t_afif/pen/mdWNNjy %}

{% codepen https://codepen.io/t_afif/pen/YzZmmMP %}

{% codepen https://codepen.io/t_afif/pen/JjNPKRE %}

{% codepen https://codepen.io/t_afif/pen/xxdKEKp %}

{% codepen https://codepen.io/t_afif/pen/NWjKbxa %}

{% codepen https://codepen.io/t_afif/pen/poPzNqG %}

{% codepen https://codepen.io/t_afif/pen/LYyPLge %}

{% codepen https://codepen.io/t_afif/pen/WNjeOqb %}

{% codepen https://codepen.io/t_afif/pen/zYwOdop %}

{% codepen https://codepen.io/t_afif/pen/bGWbxVG %}

---

### This is not the end


500 CSS loaders is a good milestone but I will not stop there. I won't say more so stay tuned for next collection!

![I'll be back](https://media.giphy.com/media/RfEbMBTPQ7MOY/giphy.gif)

----

In the meantime, check the last underline/overlay collection

{% post https://dev.to/afif/adding-100-underline-overlay-animations-the-impressive-css-collection-1a93 %}
Salesforce Standard Objects and Uses
Published: 2021-06-29 09:57:45

If you have read my previous articles, you must know what are standard objects and custom objects. The question unanswered in the previous article was - 

What is the significance of the standard objects and why salesforce bothered to provide those?

We know that Salesforce is a CRM platform and its motive is to help businesses and enterprises form better customer-relationship and manage all data.

#Use of Standard Objects
![Excali](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slxcwfif5srjsm0pguol.png)

1. You see, every company has a need to run **Campaigns** and advertisements. 

2. These ads bring **Leads** to the company, i.e., Potential Customers. 

3. A number of these potential leads eventually convert into customers. This is where the **Account** object is needed. To create an account and record of the customers.

4. Every company wants to have recurring customers, i.e., customers who tend to buy products from the same company multiple times. Here comes the need to assign **Contacts** and get contacts.

5. Every customer has unique desires and demands and hence **Cases** need to be assigned for each requirement.

6. Now say, company grabbed a client/customer who seems to buy certain amount of product or service. When a Lead converts into Account (Customer), there is certain amount of revenue that company generates. This comes under the **Opportunity** section.

7. In certain cases, before the purchase, client requires a quotation. This is handled in **Quote** section.

#All the Standard Objects
Do you understand now? Just like above, there are numerous things and cases that a company and an enterprise has to handle. All the cases that you can think of are already present in the form of Standard Objects in Salesforce.

For example, look in the picture below. All of these are standard objects - 
![obj](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31fvgehi5grm8nzz4jm6.png)
Module 7 - Working with APIs
Tags: javascript, css, scrimba, quiz
Published: 2021-06-29 09:41:57

**Module 7** behind me and I finally got to learn about Basic Web Architecture and APIs decently! I also made a **[Quiz](https://dominikgorczyca.github.io/Javascript-Quiz/)** project that took me far longer than it should because of burnout. 

**First Part** was hard but I learned a lot, it explained how  internet works and introduced many terms like: 
* DNS(Domain name system)
* ISP(Internet user provider)
* Request
 * Request types(GET, POST, DELETE)
 * Web protocols(http, ftp)
 * Domain name 
 * ports
 * path
 * query argument
* Response
 * status(200, 500)
* TLS & SSL 
* Routing
* Caching 
* App & Database
* Hosting & Serverless 
* Microservices 
* Firewall 

**Second Part** also wasn't easy but it finally cleared up a lot about APIs and Promises and explaining how to use:
* GET and POST requests
* fetch 
* JSON
* .then & .catch 
* async & await 

**Third Part** gave few challenges to practice my newfound knowledge further and introduced more methods for fetch and promises:
* .finally
* Promise.all & Promise.race

This part was a bit *confusing* as concepts to complete challenges weren't introduced until you completed them. 

**Forth Part** explained properly syntax from previous part and as the last project of this module was [Beer app](https://scrimba.com/scrim/co2bc434d93c27606a5d6798f). 

After completing it I went to make APIs Quiz *(link on top of the post)* but because I couldn't find any API with desired questions I was forced to use basic JavaScript questions.
There aren't many questions so I decided to spice it up a bit and  create a **timer**, try to be as fast as possible and share in the  comment how many points did you managed to get!
MVP SaaS solution for corporate procurement and tenders
Tags: python, startup, writing, react
Published: 2021-06-29 09:37:42

IT company Intelkon provides business process automation services. Customers come to Intelkon when they want to digitize business processes or improve work efficiency with workflow automation software. They can develop, for example, an employee training system or BIM for construction management.

Sometimes, they involve skilled, third-party specialists in their client projects, when necessary. For example, [Evrone assisted Intelkon](https://evrone.com/intelkon) when they wanted to develop a tender management software solution, which would allow clients to manage and submit tenders electronically.
Difference between Stack and Queue Data Structure
Tags: computerscience, datastructure
Published: 2021-06-29 09:26:20

##Stack Data Structure 
A Stack is a FILO (First In, Last Out) data structure in which the element that is added first is the last to be erased. At the top of the stack, operations like insertion (PUSH) and deletion of entries (POP) are done. Stacks are linear data structures because the items in them are ordered in a sequential order.

**The following are some examples of stacks in practice**
Arrangement of plates.
Arrangement of books in a cupboard.
Wearing or removing bangles from hands.

### Stack operations of several kinds
The following are the most basic stack operations in the data structure:

push() - Adds a new element to the stack's top. It's an overflow if the stack is completely full.
pop() - Removes one element from the stack's top. It's an underflow if the stack is empty.
peek() - Displays the stack's topmost element.

##Queue Data Structure 

A Queue is a FIFO (First In, First Out) data structure in which the element that is added first is also the first to be deleted. Enqueue (insertion) and dequeue (removal) are the two most basic queue operations (deletion). The front of the queue is used to enqueue, and the back of the queue is used to dequeue. Because the pieces in a queue are ordered in a logical order, queues are referred to as linear data structures.

**The following are some examples of queues in action**

The customer who enters a store first will be served first.
Task scheduling on the CPU and disk scheduler.
In the case of bus and train tickets, there is a waiting list.

There are many [difference between stack and queue](https://favtutor.com/blogs/stack-vs-queue) and both have separate real world applications.
Run tests with -race flag in GoLand 🏎
Tags: goland, go, tests, configuration
Published: 2021-06-29 09:14:06

To understand `-race` flag better, we can refer to the [Go documentation](https://golang.org/doc/articles/race_detector):

> Data races are among the most common and hardest to debug types of bugs in concurrent systems. A data race occurs when two goroutines access the same variable concurrently and at least one of the accesses is a write.

It is easy to use via the command line interface. So, how to use `-race` flag in GoLand with tests? Is it possible to use `-race` always in tests? Here you go.

### Add `-race` flag to a specific test

- Navigate to a test file, click on the gutter icon near the test name and select _Modify Run Configuration_. ![Gutter menu with the Modify Run Configuration entry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56b5m1k7it2w94cndjpm.png)
- Add `-race` entry to the _Go tool arguments_ field. ![Example of adding race flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hop4mzqpq7h7n54gev93.png)
- Save changes and run the configuration again.

### Add `-race` flag to all tests

- Navigate to _Help | Find Action_ in the main menu (_Shift+Shift_ by shortcuts) and type _Edit Configurations_, press Enter.
- Select the _Edit configuration templates_ option, find _Go Test_. ![Option is left-bottom position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjnc72eu8q140na5mv0d.png)
- Add `-race` entry to the _Go tool arguments_ field. Pay attention that changing a template does not affect the existing configuration and you should add the flag manually to the same field.

Congratulations! 🎉 Now your tests use `-race` flag and you can see warnings from the compiler. ![Example of warning from the compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttbm6s7er6m1o8uqnia8.png)
🦊 GitLab Cheatsheet - 5 -GitLabCI - Order & optimize jobs
Tags: gitlab, devops, tutorial, cheatsheet
Published: 2021-06-29 09:06:59

Tips to order and optimize your jobs, this is the program of the fifth Cheatsheet.
 

![5 -GitLabCI - Order & optimize jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61kwz0l1as8k73g2kb7b.jpg)



I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
How to install Laravel 9 DEV
Published: 2021-06-29 08:29:42

##How to install Laravel 9 DEV

Read More:- https://www.onlinecode.org/install-laravel-9-how-to-install-laravel-9-dev/

This is a way just to start to play with some new things in the master branch. It is because we love to “live on the edge” but it is not recommended for a “production” project. So try this only in your local machine, because you are curious.

Read More:- https://www.onlinecode.org/install-laravel-9-how-to-install-laravel-9-dev/

On packagist, if you look at “laravel/laravel” packages, you can see that there is a version named “dev-develop”.

This version includes the upcoming new version of the “laravel/framework” packages.


You can see that “laravel/laravel” includes “laravel/framework 9.0” and it requires PHP version ≥ 7.4 and PHPunit 9. Laravel 8 is supporting also PHP version 7.3. So if you are planning to use Laravel 9 next September, check your PHP version.

You can discover more thing on the release on this packagist URL: https://packagist.org/packages/laravel/laravel#dev-develop

Read More:- https://www.onlinecode.org/install-laravel-9-how-to-install-laravel-9-dev/

To install Laravel 9.0 you need to launch composer create-project as usual and then you need to set the “dev-develop” version of the “laravel/laravel” package:

`composer create-project –prefer-dist laravel/laravel laravel-dev dev-develop`

Read More:- https://www.onlinecode.org/install-laravel-9-how-to-install-laravel-9-dev/ and https://serialkey.in/

Where:

laravel/laravel: is the package for the Laravel installation;
laravel-dev: is the new directory for your new project (you can change it);
dev-develop: is the next version of Laravel.
OR If you prefer to use the “laravel” command you can achieve the same goal with:

`laravel new laravel-dev –dev`

Read More:- https://www.onlinecode.org/install-laravel-9-how-to-install-laravel-9-dev/
Create a Flutter Maps Widget in 10 Minutes
Tags: flutter, widget, maps, webdev
Published: 2021-06-29 09:01:35

Get an overview of the **Syncfusion** [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps "Flutter Maps") widget. This video explains how to add the Syncfusion [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps "Flutter Maps") widget to a Flutter project. It also explains how to set the geo JSON data for the shape layer from a local asset bundle, set a title for the map, and show data labels. You will also see how to show legends and tooltips. Finally, you will learn how to add a tile layer and set the initial zoom level.


**Product overview**: http://bit.ly/3c8kgvM
**Documentation**: http://bit.ly/3caXUJV
**API Documentation**: http://bit.ly/2Qw1JBa
**Examples – GitHub**: https://bit.ly/3cG5f57

{% youtube TNnAHfXXTFM %}