teleren/devto huggingface dataset:
JavaScript learning resources
Tags: javascript, react, node, beginners
Published: 2021-01-21 16:11:35

# Javascript learning resources

This article is a compilation of resources I would use again while learning a node.js or react. It contains everything from free articles, paid courses to books. There are not sorted in any particular order.

## [33 JS concepts](https://github.com/leonardomso/33-js-concepts)

What is great about this collection is that it sums up all the things that you should be at least familiar with while using JavaScript. I would focus mostly on the understanding **call stack**, **function scope, block scope, lexical scope**, **Message Queue, and Event loop**, **closures**, **map, reduce filter**. 

## [Node best practices](https://github.com/goldbergyoni/nodebestpractices)

Another git collection. This time of best NodeJS practices. I cannot say that I agree with everything on 100% but it is a great starting point when you try to do your next project the right way.

## [Frontend masters](www.frontendmasters.com)

This is an awesome company producing awesome content. The price is a little higher than usual but it is worth every penny. The courses are recorded lections from practitioners and the quality of content is high. I would recommend courses from Kyle Simpson, Scott Moss, and Brian Londsdorf, but in the end, I did not encountered a bad course so pick what you are interested in.

## [You don't know JavaScript](https://github.com/getify/You-Dont-Know-JS)

If you want to go deep in JavaScript this is a go-to source for me. What I like about this series is that id does not leave out the quirky parts of JavaScript (looking at you JavaScript the good parts!) but forces you to understand them. Kyle Simpson has the unusual talent to describe difficult topics approachable. 

## [Functional light JS](https://github.com/getify/Functional-Light-JS)

Another book by Kyle Simpson. This time introduction to functional programming focusing on the important topics that you can apply immediately. I recommend pairing this book with his course on the same topic from frontend masters. 

## [The road to React](https://www.roadtoreact.com/)

I learned to react to this eBook. I remember it was a really good introduction. I build some basic react app alongside this book as a reference source.

## Other

## [Epic react dev](https://epicreact.dev/)

If I would like to go deeper in React or need to refresh it I would grab the epic react dev from Kent C. Dodds. I received a pretty good impression from everyone who bought the course, even senior react devs so this would be the choice for me. 

If you liked this article follow me on twitter https://twitter.com/rejmank1
Javascript prototype and prototypal inheritance
Tags: javascript
Published: 2021-01-21 15:52:46

When an object/array/ function is created, the javascript engine adds access to hidden properties and method under _ _ proto _ _ object.

```
function b (){
   console.log("function");
};
let a = {
  id : 1,
  name : "jack",
  showScore: function (){
      console.log(this.id + " :" + this.name);
    }
}
a._ _ proto _ _
Object.prototype

a._ _ proto _ _ . _ _ proto _ _
null

b. _ _ proto _ _
Function.prototype

b. _ _ proto _ _ . _ _ proto _ _
Object.prototype

b. _ _ proto _ _ . _ _ proto _ _ . _ _ proto _ _
null
```

Hence we can say everything in javascript is an object.

```
let a = {
  name: "mavy",
  age: 16,
  place: "AU"
  showName: function (){
     console.log(this.name);
   };
};

let b = {
  name: "redis"
};


b. _ _ proto _ _ = a
// Avoid such code

b.name
"redis"

b.age
16

b.showName()
"redis"

```
Here b is inheriting from a using prototyping inheritance.

We can implement new logic to existing methods of prototype and everytime it will be called it will load that function.

```
Function.prototype.test =  function (){ console.log(true); }

function a() {};

a.test()
true
```

Like this, all functions can now have access to the function through prototype.test property.
Html page template needed
Published: 2021-01-21 15:42:30

Ubuntu 19.04 terminal no GUI on raspberrypi with Samsung 250G ssd. Looking for a way to add a script to a html page so that new hosts are made in the appropriate files in my Ubuntu pi4, with option to upload html content to my public html file or to only have the host name and IP address, here I want to know if I can use the VPN and DNS server for the possible IP address allocation to hosts aswell,as an option with varies systems options to update the client side host file IP location to our IP allocated number for the html users hostname that's a prompt screen to make system changes so our systems work together and the info can be added to your router if you a client
How I passed the AWS Certified Security - Specialty Exam
Tags: aws, cloudsecurity, cloudskills, career
Published: 2021-01-21 15:37:47

In an attempt to keep this somewhat brief, I'll only be listing details about my preparation for passing the AWS Certified Security - Specialty exam. I won't go into the services as there are plenty of resources out there that will list them AND provide links directly to the AWS white pages for those services (I will, however, include a few links at the end for those resources).

###**Prior Certifications:**
- AWS CCP
- AWS SAA (this certification helped significantly as it touched on almost every service covered in the Security exam, albeit, at a lesser depth)

###**Time Spent:**
- ~3 months of on and off studying

###**Preparation Resources:**
- [Whizlabs Security Specialty Video Course](https://www.whizlabs.com/aws-certified-security-specialty/online-course/)
- [Whizlabs Security Specialty Practice Tests](https://www.whizlabs.com/aws-certified-security-specialty/practice-test/)
- [TutorialDojo Practice Exams](https://portal.tutorialsdojo.com/courses/aws-certified-security-specialty-practice-exams/)
- [TutorialDojo AWS Security eBook](https://portal.tutorialsdojo.com/product/tutorials-dojo-study-guide-ebook-aws-certified-security-specialty/)
- AWS re:Invent 2020 Security Sessions
- AWS re:Invent 2020 Security Jam - numerous free labs in which you have to navigate around the console and answer security-related questions to scenarios. Got hands-on work with the security-related services and concepts within AWS
- [AWS re:Inforce 2019 YouTube videos](https://www.youtube.com/watch?v=FKphJNfpWk8&list=PLhr1KZpdzuke2ncPH0DVp9PswBFY5dIl6) - this playlist is entirely too long to listen through all of it, but you can pick and choose talks that align with services you need additional details on

###**Useful References:**
- https://medium.com/@devopslearning/my-road-to-aws-certified-security-specialty-certification-4d618360f052
- https://tutorialsdojo.com/aws-certified-security-specialty-exam-study-path/

I started my preparation by going through the Whizlabs video course and putting on the re:Invent and re:Inforce sessions in the background while I worked. I attended as many re:Invent security sessions as I possibly could and participated in all of the security Jams. I then went through the Whizlabs practice tests and the TD practice tests. To wrap up everything, I read through the study guide provided by TD. I think that all of the materials I went through were very useful for the exam - the TD eBook especially as it covered all of the services/domains and potential questions I would face on the exam.

Let me know your thoughts and if this was helpful!
Cloud cost alerts are too late: trigger notifications before launching
Published: 2021-01-21 15:37:20

Most cloud providers enable users to set budget alerts on their actual cloud spend. This is a critical safety net as usage-based resources could incur a lot of cost (e.g. data transfer). There is also another safety net that companies should set up, and that is catching significant cost changes to their infrastructure before going live. For example, finding out how much increasing the RAM for a Lambda function costs before putting the new function into production. Usage estimates can also be considered during cost estimation.

[Infracost](https://github.com/infracost/infracost) is an open source tool that can be put into CI/CD pipelines (GitHub, GitLab, CircleCI, Bitbucket and Atlantis…) and will leave a comment with the cloud cost implications of changes to your infrastructure-as-code: "this change to your terraform file will increase your cloud bill by 25% next month".

In some cases, you may only want an Infracost comment when a threshold is reached. For example, if the cost implications of the change are minor (e.g. under 3%), then no comment is needed. We have now added this ability into Infracost - from our [CI/CD integration docs](https://www.infracost.io/docs/integrations/), select your CI system, and set the `percentage_threshold` flag.

We hope Infracost can help your enterprise become more cost-aware when it comes to cloud spend, and maybe we can help reduce that 30% cloud waste! <sup>[1]</sup>

As always, if you have any feedback, add an issue to our [GitHub repo](https://github.com/infracost/infracost), join our [community Slack channel](https://www.infracost.io/community-chat), or reach out to me directly on Twitter: [@hassankhosseni](https://twitter.com/hassankhosseini).

\[1\] [Flexera 2020 State of the Cloud Report](https://info.flexera.com/SLO-CM-REPORT-State-of-the-Cloud-2020)
8 Reasons Why Drupal CMS Is Preferred by Educational Institutions
Published: 2021-01-21 15:31:54

With 2021 underway, K-12 and higher education institutions have a new challenge on their hands – proper remote learning management. With millions of students across the globe still attending classes and exams from home, schools need to find efficient ways to compensate for it.

Based on published data, 7% of the top 10,000 websites use Drupal CMS, with around 46,350 Drupal modules available for free download as functionality extensions. Drupal CMS can provide educational instructions with a good platform to work with when it comes to student management due to its list of features.

According to Drupal Groups, some of the most prolific schools, such as Oxford University, MIT, Stanford University, and UCLA, all rely on Drupal CMS already. The CMS can provide your school with a combination of time-efficient, cost-effective, and user-friendly features meant to make the students’ learning easier and more engaging. Let’s take a closer look at what Drupal can do for your school or university and how you can benefit from relying on it.

Read the full article: 8 Reasons Why Drupal CMS Is Preferred by Educational Institutionshttps://anyforsoft.com/blog/8-reasons-why-drupal-cms-preferred-educational-institutions/
Register Project
Published: 2021-01-21 14:45:08

I will be telling you guys how to create a register project with HTML and CSS : 

HTML :

<form action="action_page.php">
  <div class="container">
    <h1>Register</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
    <hr>

    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
    <button type="submit" class="registerbtn">Register</button>
  </div>

  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>


CSS:

* {box-sizing: border-box}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

And this is for W3SCHOOLS.
The best way to set typographic defaults in Tailwind CSS
Published: 2021-01-21 15:31:19

Have you ever wondered how to handle typographic styles with a utility-first CSS framework like Tailwind CSS? In this article I show you the best way to set your defaults and how you handle content styling from a source you don’t control like a Content Management System or a markdown file.

Read the article here: https://www.themes.dev/blog/typographic-defaults-in-tailwind-css/
Day 28 Of 100DaysOfCode: SQL Join Operation
Tags: 100daysofcode, beginners, codenewbie, python
Published: 2021-01-21 15:25:10

Today I learned more about relational database. Also worked on SQL. Did the operation like SQL insert, SQL delete, SQL update, sorting with ORDER by. Also learned basic of database model, database design, building a database model.

Worked on table having multiple column, learned about relational power and join operation using (ON, without ON). I learned these from [Coursera](https://www.coursera.org/learn/python-databases/home/welcome).

# SQL Join Operation
SQL uses the JOIN clause to reconnect tables. In the JOIN clause we specify the fields that are used to reconnect the rows between the tables.

The following is an example of a SELECT with a JOIN clause: 

```python
SELECT * FROM Follows JOIN People
    ON Follows.from_id = People.id WHERE People.id = 1
```
The JOIN clause indicates that the table1 we are selecting cross both the table1 and table2 tables. The ON clause indicates how the two tables are to be joined: Take the rows from table1 and append the row from table2 where the field from_id in table1 is the same the id value in the table2 table.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 28 of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/pythoncode?src=hash&amp;ref_src=twsrc%5Etfw">#pythoncode</a> <br>* Learned about relational database<br>* More about SQL<br>* SQL insert, delete, update, select, sorting with ORDER by<br>* The join operation<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a>, <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> , <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://t.co/Lwxxr6BXZ6">pic.twitter.com/Lwxxr6BXZ6</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1352267793782210564?ref_src=twsrc%5Etfw">January 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Building open-source refactoring automation with CodeFactory for Visual Studio
Published: 2021-01-21 15:20:20

#Open-source code .NET automation contributors needed for CodeFactory 
## [CodeFactory Maker Space](https://www.codefactory.software/makers)
Directory of open-source projects on [GitHub](https://github.com/CodeFactoryLLC/Public-Projects) that are utilizing CodeFactory with Visual Studio to author .NET code refactoring automation. 
###[Tutorials](https://www.codefactory.software/videos)
Creating my Portfolio using Flutter
Tags: flutter, dart, webdev, portfolio
Published: 2021-01-21 15:09:46

Hey everyone, so I've been working on my portfolio website using Flutter and this is the progress that I've made so far. What do you think? They're a few fixes that need to be done but it's most done aside from the database, any thoughts on it? I'll be glad to see what you think

[View Video Here](https://user-images.githubusercontent.com/53268895/105369217-b86ac280-5bd8-11eb-967f-6be1440fd0a6.mp4)
Jan 20: DEV Daily Discovery
Tags: discuss, bestofdev
Published: 2021-01-21 15:09:02

Please make a comment to this thread with a DEV post that you think deserves to be read more broadly. If it's your own post that's fine.

It could be recent, or it could be classic.

And then read through the thread and ❤️ posts where you like. I'm hoping that the wisdom of the crowds can help unearth some great content every day.

Use the post's link liquid tag to display it fully, i.e.:

```liquid
{% link https://dev.to/devteam/for-empowering-community-2k6h %}
```

And feel free to add why you want to want to give it more love.

Don't worry about whether you've picked the best post, let the readers decide if it should rise to the top.
The cite HTML Tag
Tags: html, webdev, programming, markup
Published: 2021-01-21 15:08:07


Welcome to part three of the [Uncommon HTML Tag series](https://hashnode.com/series/uncommon-html-tags-ckjiqctar042xzgs1bei2e9a3)! 

With each article in this series, I will introduce a widely unknown HTML tag, discuss compatibility across browsers and cover some real-world use cases with the element.

### The < cite > Tag

The `<cite></cite>` tag is a semantic element that is used in conjunction with the `<blockquote></blockquote>` element to denote a referenced piece of work, such as a book, an essay, a film, a musical or even a tweet.

Many browsers style the content of a `<cite></cite>` element in italics by default.

Let's take a look at how it's used!

```html
<blockquote>
    When Mr. Bilbo Baggins of Bag End announced that he would
    shortly be celebrating his eleventy-first birthday with a party
    of special magnificence, there was much talk and excitement in Hobbiton.

    <p>First paragraph in 
    <cite>The Lord of the Rings: The Fellowship of the Ring</cite>
    by J. R. R. Tolkien (Chapter 1: A Long-Expected Party).</p>
</blockquote>
```


![Screen Shot 2021-01-08 at 4.10.52 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610144211782/9ln9K8ugt.png)

Both the opening and closing tags are mandatory and, unlike some of the other HTML tags we've discussed, does not contain any unique attributes (global attributes can be used).

Please note that, according to the MDN Web Docs, 

> ...the W3C specification says that a reference to a creative work, as included within a <cite> element, may include the name of the work’s author. However, the WHATWG specification for <cite> says the opposite: that a person’s name must never be included, under any circumstances.

If you want to play around with the `<cite></cite>` tag, feel free to fork the pen below!

{% codepen https://codepen.io/braydoncoyer/pen/yLaqPoY %}

### Compatibility

The `<cite></cite>` tag is part of the HTML Living Standard and is supported on all major web browsers! 


![Screen Shot 2021-01-08 at 4.13.28 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610144223593/2BfA0ckvk.png)


### Conclusion

Thanks for reading! Have you ever used the `<cite></cite>` tag in a project? Let me know in the comments below!

If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/), [subscribe to my newsletter](https://braydoncoyer.dev/newsletter/) and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!
Deploy Nuxtjs to CPanel
Published: 2021-01-21 15:05:54

### Updated: 2022-10-08

**Opinion:** I no longer think CPanel is a good solution for hosting nuxtjs application.

**Recommendation:** Move to https://vercel.com/ or any other serverless hosting service provider, you will get much better page speed.

**Need help:** [Contact Us](https://webreinvent.com/contact-us)

---

### Step 0
Update `package.json` with following two packages (fs & path):
```json
  "devDependencies": {
    ...
    "fs": "0.0.2",
    "path": "^0.12.7",
    ....
  }
```
Run `npm install` to install the packages.

### Step 1:
Update your `nuxt.config.js` with following code:
```javascript
var fs = require('fs');
var path = require('path');

let ENV_DEV = true;

//Development Environment
let port = <port>;
let host = 'localhost';
let https = false;

//Production Environment
if(ENV_DEV==false)
{
  port = <port>; // make sure this port is open on your server you can do that via WHM or talk to you hosting company
  host = '<domain-name>';
  https =  {
    key: fs.readFileSync(path.resolve(__dirname,
        './../../ssl/keys/<ssl-key-file-name>.key')),
    cert: fs.readFileSync(path.resolve(__dirname,
        './../../ssl/certs/<ssl-crt-file-name>.crt'))
  };
}

export default {
  mode: 'universal',
  env: {

  },
  server: {
    port: port, 
    host: host, 
    timing: false,
    https: https
  },
  //keep rest of the code as it is
```
Change the value of `ENV_DEV` to `false` in `nuxt.config.js` if you want to run the application `cpanel` with `https` otherwise to run in development environment change `ENV_DEV` to `true`, it will run with `http`.

### Step 2:
Create `.htaccess` file at the root of your domain or sub domain director:
```
Options -Indexes
RewriteEngine On
RewriteCond %{SERVER_PORT} 443
RewriteRule ^index.php(.*) https://%{HTTP_HOST}:<port>/$1 [P,L]
RewriteRule ^(.*)$ https://%{HTTP_HOST}:<port>/$1 [P,L]
```
Replace `<port>` with the port number of your application.

Run `npm run dev` and open the website if you get `500 error` follow Step 3.

#### Step 3:
Make sure `SSLProxyEngine` is `on` for you domain. If not do following from ssh:
- `cd /etc/apache2/conf.d/userdata/ssl/2_4/<cpanel-domain-username>/`
- check if it has a folder for your domain name like `vaah.dev` or sub domain like `cli.vaah.dev`
- if not then create `mkdir <domain-name>` and `cd <domain-name>`
- create file `sudo vim 00-sslproxy.conf` with only `SSLProxyEngine on` content and save the file
- run `/usr/local/cpanel/scripts/rebuildhttpdconf` to rebuild `httpd.conf`
- run `/usr/local/cpanel/scripts/restartsrv_httpd` to restart `apache`

Run `npm run dev` and open the website again should be working without any error.


#### Step 4: 
To start server permanently, run following commands in sequence:
- `npm run build`
- `pm2 start npm --name <app-name> -- start`

Replace `<app-name>` to any useful name to identify the PM2 process.

Other Command
- `pm2 list`: to see the list 
- `pm2 stop all`: Stop all processes
- `pm2 restart all`: Restart all processes
- `pm2 delete all`: Delete all processes
Announcement: Introducing FlavorsOf.NET!
Tags: dotnet, net, netcore
Published: 2021-01-23 15:56:59

---
title: Announcement: Introducing FlavorsOf.NET!
published: true
date: 2021-01-21 15:00:00 UTC
tags: dotnet,net,netcore
canonical_url: https://seankilleen.com/2021/01/announcement-introducing-flavorsof-net/
---

I’d received more than a few questions about the naming and differences between .NET Framework, .NET Core, .NET 5, Mono, Xamarin, etc.

So I decided to put up a small one-pager at [https://flavorsof.net](https://flavorsof.net).

I’ll polish it up a bit soon but wanted to post it here in case you can benefit from it.

Cheers!