teleren/devto huggingface dataset:
Angular meetup videos from May, 2021
Tags: angular
Published: 2021-06-24 23:50:58

Another month’s gone, another Angular roundup post is here! This time we’ve selected a top 3 video list from some of the most important figures from the Angular community. John Papa, Minko Gechev and Mark Thompson are all featured, covering great topics like the latest changes to the framework, libraries in Angular 12 and using Angular CLI to build new applications.

[What’s new in Angular | John Papa](https://meetupfeed.io/talk/angular-whats-new)
The web moves fast, and it can be difficult to keep up with all the changes. Are you up to speed on what’s new in Angular?

Join Pluralsight author and JS expert John Papa to explore the latest changes to the framework, tooling and developer experience.


[State of the Angular | Libraries in Angular 12](https://meetupfeed.io/talk/angular-whats-new)
The Dutch Angular Group together with Angular Athens and Angular Birmingham recently held a joint meetup where the Angular Team provided us with the latest updates.

Minko Gechev talked about the latest State of the Angular for 30 minutes, and then Joost Koehoorn held a presentation about the libraries in Angular 12, followed by a Q/A session.


[Angular CLI | Mark Thompson](https://meetupfeed.io/talk/angular-cli)
In this video Angular team member Mark Thompson will be taking you on a journey with the Angular CLI to build a new application in Angular.
SQL: WHERE vs. HAVING
Published: 2021-06-24 23:15:13

In SQL, the **HAVING** and **WHERE** clauses have a similar function with a key difference. Both functions allow a user to filter data with respect to a certain condition. The difference between the two clauses has to do with when each is used. Basically, the **WHERE** can only be used in non-aggregated data (ie. data that has not been aggregated by **GROUP BY**). On the other hand, **HAVING** is used after a **GROUP BY**. Let's walk through some examples.

## WHERE
As mentioned earlier, **WHERE** is used on data before and aggregation/filtering is done. 
```SQL
SELECT Employee_Name, Employee_ID
FROM Employee
WHERE Employee_Age > 30
```

The code above selects the names and ID's of all employees over the age of 30. Note that the **WHERE** clause is used on non-aggregated data.

## HAVING (and GROUP BY)
**HAVING** is often used following a **GROUP BY**, which aggregates data by a certain feature. In the following example, let's say you have game-by-game data for each player for the first five games of the season and, as a coach, you wanted to see which players on your team made more than 10 3-pointers. 

```SQL
SELECT Player_Name, SUM(3PM_Made) as total
FROM Team
GROUP BY Player_Name
HAVING total > 100
```
Here, we want the name and number of 3-pointers each player has made. The **GROUP BY** clause is essential here because if we had used a simple **WHERE** with no **GROUP BY** or **HAVING**, we would get 5 different numbers for each player, representing how many 3-pointers each player made in each game. We want the total that each player made, thus the **GROUP BY** is needed. The **HAVING** acts as a filter post-aggregation to get the desired range of total 3-pointers.

While there can always be exceptions, a good rule of thumb is to treat **WHERE** as the clause used on non-aggregated data, while treating **HAVING** as the clause used on aggregated data (often in conjunction with **GROUP BY**).
Ember + Bootstrap 5
Tags: ember, javascript, webdev, beginners
Published: 2021-06-24 22:37:12


Today I welcome a new template for my [blog](https://blog.davideferrero.com "Davide Ferrero's blog") by returning to write a post after a very long time!

This [WordPress](https://wordpress.org/ "WordPress") theme is built on top of the latest [Bootstrap](https://getbootstrap.com/ "Bootstrap") release, Bootstrap 5 and with this post I would like to explain you how to use this hugely popular front-end framework in an [Ember](https://emberjs.com/ "Ember.js") app.

With this major new release the developers have focused most of their efforts towards removing [jQuery](https://jquery.com/ "jQuery") as a dependency of the framework to make it lighter and usable by a wider audience now interested in saving as much kb as possible.

For those who knows and uses the previous Bootstrap version (v4) I suggest to dive into the [migration guide](https://getbootstrap.com/docs/5.0/migration/ "Bootstrap 5 migration guide"), to understand what breaking changes were made in this new update.

As an experiment (I will tell you later about what I am working on in my spare time) I've tried to use Bootstrap 5 in a new Ember Octane app and thank to the release of the bootstrap npm package this turned out to be tremendously simple.

Let's see the steps:

First you have to install the bootstrap npm package:  

```shell
npm install --save-dev bootstrap
```

Then you have to modify your _ember-cli-build.js_ file:

```javascript
'use strict';
    
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
    
module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: ['node_modules/bootstrap/scss'],
    },
  });
  app.import('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js');
  return app.toTree();
};
```

The last few steps are required to be able to import bootstrap SCSS files.  
First you have to install _[ember-cli-sass](https://github.com/adopted-ember-addons/ember-cli-sass "https://github.com/adopted-ember-addons/ember-cli-sass")_ addon:

```shell
ember install ember-cli-sass
```

Then you have to rename your app style app.css to app.scss and insert the line to import the bootstrap files:

```css
@import 'bootstrap';
```

You are now ready to use Bootstrap 5 in your Ember app!
Day 395 : Starting To See
Tags: hiphop, code, coding, lifelongdev
Published: 2021-06-24 22:23:17

_liner notes_:
- Professional : Whew... I thought Monday was meeting heavy. It had nothing on today. Like 3 hours of meetings straight. It was good to see everyone. Got some cool stuff coming up. I was able to refactor the code for a tutorial using a new version of an SDK. Going to sit down with the engineering team and go through the code to make sure everything is how they would do it. Yeah, I'm tired. haha.

- Personal : Last night, stayed up late and got screen sharing working in the video chat for both the admin dashboard and user section. I even refactored the code in the dashboard to allow me to unpublish and republish the video and screen sharing elements. I think that's going to really help make the layout of the broadcast and archive recordings much easier to handle. When I did something similiar for a previous project, it was a pain to get it working. Hoping this is much easier since I don't have to do anything custom because I'll be able to turn on and off different elements instead of trying to hide them. Oh and I finally got a change to set up my new laptop. Pretty nice!

![A forest with lush redwood trees and in the middle, a tall waterfall running down a grey mountain in Yosemite Falls, CA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uthmolecns3uq1i8kg7p.jpg)

Tonight, I want to refactor the user side of the video chat so that I can control when to hide and show their elements kind of like how I did for the dashboard. Luckily there is a signaling feature that I'm pretty sure I can use. Otherwise, I'll try and get it done through Firebase. As matter of fact, I go with the Firebase option since I think I can get it working faster. My goal is to get broadcast and archiving working. That means, get a live stream playing on the website and YouTube and getting the archive video uploaded to Vimeo at least. May be another late night, but I'm starting to see it coming together. I haven't worked on putting together this week's radio show yet.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube XFm42Ap3Fh4 %}
Measure Twice, Cut Once: Upstream Prerequisites - Introduction
Tags: books, devjournal, computerscience, codenewbie
Published: 2021-06-24 21:35:32

Before you begin construction of software, you need to prepare for it.</br>

And preparation is tailored to the specific project.
The carpenter's saying, "Measure twice, cut once" is highly relevant to software development as it is in any other form of craftsmanship. Doing the most expensive part of the project twice is a bad idea.</br>

This chapter lays groundwork for construction phase, without discussing construction directly (which will be discussed in chapter 5). Here we will discuss various prerequisites before construction.</br>
</br>
</br>

![plan discussion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtbc3mkusw7n93k0qjhj.jpg)

</br>
Here is the chapter's layout:
1. **Importance of prerequisites**: _cost of not doing prerequisites_
2. **Determine the kind of software you're working on**: _how prerequisites apply to your situation_
3. **Problem-definition Prerequisites**: _recognize written problem statement & if it is a good foundation for construction_
4. **Requirements Prerequisites**: _importance of clear requirements & how to handle change in requirements during construction_
5. **Architecture Prerequisites**: _how to determine the quality of existing architecture_
6. **Amount of time spent on Upstream prerequisites**: _time management in upstream activities (requirements, architecture, design, planning)_
Day 8 of #100DaysOfCode!

Tags: javascript, beginners, 100daysofcode, codenewbie
Published: 2021-06-24 21:07:33

<h2>Today's progress</h2>
I worked on some exercises on the `array.map()` method from freeCodeCamp.

<h2>What I learned</h2>
So what is the `map()` method? The `map()` method allows you to iterate over an array and modify it using a callback function on each element and returning a *new array*, with transformed elements. This way you get an entirely new array and an untouched original array. 

Assume we have an array of numbers and for each element inside the array we want to multiply it by 5. Now we can do this using a `for loop`. Like the example below.

```javascript
let numbers = [1, 2, 3, 4]

for(let i = 0; i < numbers.length; i++{
   console.log(numbers[i] * 5);
}

//output: [5, 10, 15, 20]
``` 

Similarly, we can achieve the same result using the `map()` method. 

```javascript
let numbers = [1, 2, 3, 4]

let newNumbers = numbers.map(function(element){
  return element * 5;
}

console.log(newNumbers);
//output: [5, 10, 15, 20]
``` 

In the example above, the `callback function` is called on each `element` *(current value)* of the array and multiply each of the element by 5 and returns a `new element` *(new value)* and adds it into the new array `let newNumbers`.

<h2>Filling in the gaps</h2>
The complete syntax for the `map()` method is:

```javascript
arr.map(function callbackFn(element, index, array))
```

The `function callbackFn()` is called on each array element, and the `map()` method always passes the `current element`, the `index` of the current element and the whole `array` of the object.

####Using map() on an array of objects

Imagine we have an array of objects that stores the `make`, `model`, and `year` of cars. 

######<center>array of objects</center>

```javascript
let cars = [
    {make: "Lexus", model: "IS 250", year: "2014"},
    {make: "Honda", model: "Accord", year: "2020"},
    {make: "Toyota", model: "Camry", year: "2012"},
    {make: "Tesla", model: "Model S", year: "2017"}
]
```

But we only want to return an array of the car's `make` and `model`. Well, we can do that by using `map()` method, process the current element through the `function`, and return the element's property value to add to the new array.

######<center>Example below uses ES6 syntax</center>

```javascript
let carsArr = cars.map(function(element){
    return `${element.make} ${element.model}`
})

console.log(carsArr)

//output: ["Lexus IS 250", "Honda Accord", "Toyota Camry", "Tesla Model S"]
```

We use the `callback function` on each element of `cars` and every time the function is executed, the return values, which in this case are `make` and `model` are added into `carsArr`. Now when we `console.log(carsArr)` we get the following output on our console. `["Lexus IS 250", "Honda Accord", "Toyota Camry", "Tesla Model S"]`.

<h2>Simply put</h2>

Using the `map()` method is beneficial when you want to iterate through an array or arrays of objects, apply changes to its `elements` and have it return a *new array*.
Generate an SSL Certificate With the Root Certificate for localhost
Tags: security, webdev, webassembly
Published: 2021-06-24 21:02:08

The root certificate is trusted now. Let’s issue an SSL certificate to support our local domains — `myexample.com`, `sub.myexample.com`, `myexample1.com`, and `localhost` for testing.

Create a new OpenSSL configuration file `server.csr.cnf` so the configurations details can be used while generating the certificate.
```
[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=IN
ST=MP
L=INDORE
O=Tech Forum
OU=Marketing
emailAddress=admin@pranjaljain.me
CN = localhost
```
Create a `v3.ext` file with a list of local SAN domains:
```
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
```

Create a private key and certificate-signing request (CSR) for the localhost certificate.
```
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf
```
This private key is stored on `server.key`.
Let’s issue a certificate via the root SSL certificate and the CSR created earlier.
```
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
```
When it says `Enter passphrase for rootCA.key`, enter the passphrase used while generating the root key.
The output certificate is stored in a file called `server.crt`.

If you're stuck anywhere do leave a comment.

Follow me on Twitter at [Twitter/pranjaljain0](https://twitter.com/pranjaljain0)
Follow me on Github at [github/pranjaljain0](https://github.com/pranjaljain0)

Happy Hacking!
Quick sort algorithm
Tags: algorithms, computerscience, codenewbie, programming
Published: 2021-06-24 20:45:34

## Definition of quicksort

Quicksort is a type of  Divide and Conquer algorithm like **merge sort**, it works by choosing an element as a **pivot** from the giving array, and appending the greater elements to the selected pivot, and shifting the smaller elements before it.

## Time and Space complexity

The space complexity of quicksort is O(log n)

| best-case  | average case 	| worst-case 	|
|------------|--------------	|------------	|
| O(n log n) | O(n log n)   	| O(n^2) *when the list is already sorted, or the pivot is min or max value of the giving list*   	|


## Implementation of quick sort using python

```python
def QuickSortAlgorithm(arr: list) -> list:
    """
        [ name ] => Quick Sort
        [ type ] => Sorting algorithms
        [ time complexity ] => (
            1. best case:  O(n log n)
            2. average case: O(n log n)
            3. worst case: O(n^2) { when the pivot is the (min or max) value of the giving list, or the list is already sorted }
        )
        [ space complexity ] => O(log n)
        [params] => (
            arr {list} list to sort
        )
        [return] => {list} sorted list 
    """
    # size of array
    n = len(arr)
    if n <= 1:
        return arr
    # pivote = arr[mid] 
    pivot = arr[n // 2]
    smallerThanPivot = []
    greaterThanPivot = []
    for i in range(len(arr)):
        # do not append pivot to (greaterThanPivot) => continue
        if arr[i] == pivot:
            continue
        # if the element is greater than or equal pivot
        if arr[i] >= pivot:
            # append the element that is greater than pivot to greaterThanPivot array
            greaterThanPivot.append(arr[i])
        else:
            # if the element is smaller than pivot append it to smallerThanPivot
            smallerThanPivot.append(arr[i])

    return QuickSortAlgorithm(smallerThanPivot) + [pivot] + QuickSortAlgorithm(greaterThanPivot)
```

## References and useful resources

+ [https://www.youtube.com/watch?v=8hly31xKli0&t=16878s](https://www.youtube.com/watch?v=8hly31xKli0&t=16878s)
+ [https://www.geeksforgeeks.org/when-does-the-worst-case-of-quicksort-occur/](https://www.geeksforgeeks.org/when-does-the-worst-case-of-quicksort-occur/)
+ [https://en.wikipedia.org/wiki/Quicksort](https://en.wikipedia.org/wiki/Quicksort)
+ [https://www.youtube.com/watch?v=PgBzjlCcFvc](https://www.youtube.com/watch?v=PgBzjlCcFvc)
+ [https://www.youtube.com/watch?v=7h1s2SojIRw](https://www.youtube.com/watch?v=7h1s2SojIRw)
+ [https://www.youtube.com/watch?v=0SkOjNaO1XY](https://www.youtube.com/watch?v=0SkOjNaO1XY)

\#day_12
Code Complete Mini Notes
Tags: books, computerscience, architecture, codenewbie
Published: 2021-06-24 20:39:33

## What?
I have started reading one of the most recommended books for software development, Code Complete (2nd ed.) that suggests best practices in the industry and talks about development journey from A-to-Z. Covering almost all the aspects of software development philosophy. But have you looked at the size of it!!!?

![Code Complete book's photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uzwuorhuaqvvde27acw.JPG)

Yeah! Get a load of this bad boy.</br>
</br>
</br>
## Why?
Due to day to day work not many of us get enough time to read a book, let alone a book of this volume. I often find myself wishing if only people would write the summaries of books that they had been reading. It would speed things up a bit and time restricted people can also catch up with many literature.</br>

![Quote: Be the change you want to see in the world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l34c04p2iyxlyj6gna8y.jpg)

So I for one am starting a series on it. I will be capturing the notes that I make along the way in easy words that will make it quick for people to go through the crux of the book.</br>
</br>
</br>
## How?
I'll start with Chapter 3 (which is where the real stuff begins) at first and move along, since chapter 1 & 2 discuss the philosophies initially. I plan on covering them at a later stage.
</br>
Every post may be a subtopic of one huge chapter. The banner image of each post will highlight which chapter does the topic belong to, and also the 1st post that begins a chapter will have the 1st line as description of the same.
</br>
I hope whoever plans on reading this finds it easy & convenient. I'm open to suggestions on how this can be improved.
</br>
_p.s. Don't worry, I won't be leaving out much part._
</br>
![there is always one more thing to learn quote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se7acr05bnm3kry264hg.jpg)

</br>

List:
* [Chapter 3: Measure twice cut once - Upstream prerequisites](https://dev.to/prakh_r/measure-twice-cut-once-upstream-prerequisites-introduction-1827 "Measure twice cut once")
Pagination using Gorm scopes
Tags: go, gorm, orm
Published: 2021-06-24 18:53:29

Gorm is a fantastic ORM writen in Go for gophers.	
​	
Today I will show you how to create pagination using Gorm Scopes.	
​	
>Scopes allow you to re-use commonly used logic, the shared logic needs to be defined as type	
```go	
func(*gorm.DB) *gorm.DB	
``` 	
The first step is create a Pagination struct.	
​	
```go	
//pkg.pagination	
package pkg	
​	
type Pagination struct {	
	Limit        int         `json:"limit,omitempty;query:limit"`	
	Page         int         `json:"page,omitempty;query:page"`	
	Sort         string      `json:"sort,omitempty;query:sort"`	
	TotalRows    int64       `json:"total_rows"`	
	TotalPages   int         `json:"total_pages"`	
	Rows         interface{} `json:"rows"`	
}	
​	
func (p *Pagination) GetOffset() int {	
	return (p.GetPage() - 1) * p.GetLimit()	
}	
​	
func (p *Pagination) GetLimit() int {	
	if p.Limit == 0 {	
		p.Limit = 10	
	}	
	return p.Limit	
}	
​	
func (p *Pagination) GetPage() int {	
	if p.Page == 0 {	
		p.Page = 1	
	}	
	return p.Page	
}	
​	
func (p *Pagination) GetSort() string {	
	if p.Sort == "" {	
		p.Sort = "Id desc"	
	}	
	return p.Sort	
}	
```	
​	
Second step is create a Gorm Scope.	
```go	
func paginate(value interface{}, pagination *pkg.Pagination, db *gorm.DB) func(db *gorm.DB) *gorm.DB {	
	var totalRows int64	
	db.Model(value).Count(&totalRows)	
​	
	pagination.TotalRows = totalRows	
	totalPages := int(math.Ceil(float64(totalRows) / float64(pagination.Limit)))	
	pagination.TotalPages = totalPages	
​	
	return func(db *gorm.DB) *gorm.DB {	
		return db.Offset(pagination.GetOffset()).Limit(pagination.GetLimit()).Order(pagination.GetSort())	
	}	
}	
```	
​	
The third step is use Gorm scope in your repository.	
```go	
type CategoryGorm struct {	
	db *gorm.DB	
}	
​	
func (cg *CategoryGorm) List(pagination pkg.Pagination) (*pkg.Pagination, error) {	
	var categories []*Category	
​	
	cg.db.Scopes(paginate(categories,&pagination, cg.db)).Find(&categories)	
	pagination.Rows = categories	
		
	return &pagination, nil	
}	
```	
​	
#Rest Example	
I won't talk about how you could implement your handles or access the repository, maybe another time.	
​	
The most important thing you need is to return the pkg.pagination for you client.	
​	
In a rest application, if I send 	
http://localhost:3000/categories?limit=10&page=5	
Then the output would be:	
```json	
{	
  "limit": 10,	
  "page": 5,	
  "sort": "Id desc",	
  "total_rows": 41,	
  "total_pages": 5,	
  "rows": [	
    {	
      "id": "0acd5600-51b9-42e9-9fd0-ff422a6de1d1",	
      "category": "example41"	
    }	
  ]	
}	
```
Run Scripts on websites using this simple technique
Tags: bookmarklet, javascript, webdev, html
Published: 2021-06-24 18:12:58

## What are bookmarklets?
A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser.

Developing a bookmarklet is simple and easy to use.

They can even make a post request with the fetch API.

## How to develop one
Use javascript in `href` attribute of `<a>` tags in HTML.
An example would be
```
<a href="javascript: alert('hello world');">click me</a>
```
Make that in HTML and drag it into your bookmarks bar, you have just added a bookmarklet to your browser. Isn't it simple?

All the javascript in your bookmarklet has to be minified.
```
<a href="javascript: fetch('https://api.website.com/endpoint').then((data) => { alert('data'); })"></a>
```
Bookmarklet can be used to modify(or filter) the content of a website.
Below is an example:
```
<a href="javascript: document.body.innerHTML = '<h1>yeah!</h1>' })"></a>
```
The main reason you should consider developing or using a bookmarklet is for productivity.

## How to install a bookmarklet?
There are many ways to install a bookmarklet. I will show one of them which is probably the simplest one.
* Search for bookmarklets you want to install on the internet.
* Drag the bookmarklet from the page to your Bookmarks Toolbar. It should show on the toolbar now.
* If the Bookmarks Toolbar is not visible then you first have to show the Bookmarks Toolbar by right-clicking on an empty section of the Tab Strip and checking the Bookmarks Toolbar in the pop-up menu. Now repeat the above step.

## How to use the installed bookmarklet?
* Go on a website where you want to use your bookmarklet.
* Click the bookmarklet on your Bookmarks Toolbar. You will see the magic happening.

You can find many more pre-built bookmarklets on the internet.

I hope this helps someone out there.

Don't forget to mention what you've made in the comments below!

**If you liked this post, you can find more by:**
* Following me on Twitter: [@forkbikash](https://twitter.com/forkbikash)
* Following me on GitHub: [@forkbikash](https://github.com/forkbikash)
* Following me on this beautiful platform: @forkbikash 


<a href="https://twitter.com/share?url=https://dev.to/forkbikash/run-scripts-on-websites-using-this-simple-technique-lpn">**Tweet this post**</a>
<a href="https://twitter.com/forkbikash?ref_src=twsrc%5Etfw">**Follow me on Twitter @forkbikash**</a>