teleren/devto huggingface dataset:
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 64
Tags: php, javascript, webdev, tutorial
Published: 2021-09-28 04:25:59

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be Inserting Data into videoProgress Table
{% youtube i53fyxwjK3g %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
String Patterns in TypeScript
Tags: typescript, regex, string, angular
Published: 2021-09-28 04:23:36

While we wait for a regex type in TypeScript, starting on *TypeScript 4.1* we can make use of a very neat trick to create string patterns validations which can come in handy for some simple use cases.

I'm using Leonardo Victor's approach to query endpoints in multiple APIs using the Angular HttpClient.

By making use of string patterns I'm able to validate the urls to some extent.

```typescript
type ApiAlias = 'my-api' | 'third-party-api' | 'another-api';

type ApiUrl = `@${ApiAlias}/${string}`;

const MY_ENDPOINT: ApiUrl = '@my-api/myendpoint';

const ANOTHER_ENDPOINT: ApiUrl = '@thirdparty-api/anotherendpoint';
```

[TypeScript Playground](https://www.typescriptlang.org/play?ssl=7&ssc=68&pln=1&pc=1#code/C4TwDgpgBAgmCWMA28CGBnKBeKByAtiALSoK5QA+ewAFvAE4AmRYq9oJZleqAdgPa0I9TvFwBuAFCTQkWAgCq9JNigADAAIASAN5xEKDAF8A9LvTB68XgHMjaqZIDG-XhagBZAJoB9AKIAcgAiAAoA8gCSAQAqAFzy8EoqOLgahKImhBC8jGD81sAS0i5uwLABYdEAEn4ASv7B4VFxCUmqqbQMuWwcpPAmfII0wtm5+byF4kA)

`ANOTHER_ENDPOINT` will throw an error because `thirdparty-api` has a typo. It's missing a hyphen, and should be `third-party-api`.

**Go check out Leonardo Victor's post if you're interested in this implementation!**

{% link leonardovff/angular-consuming-multiple-apis-with-angular-httpclient-in-a-beautiful-way-using-interceptors-3im1 %}

This post was inspired by this [Stack Overflow](https://stackoverflow.com/questions/51445767/how-to-define-a-regex-matched-string-type-in-typescript) thread. Let me know if things have changed by the time you're reading this, so I can keep this up to date.
Strapilicious - Starting up a new ReactJS project should not be boring
Tags: react, javascript
Published: 2021-09-28 04:14:12

As a software developer and project lead, I do a lot of project prototyping to lay out new ideas for a project from time to time. I have lots of project ideas that come to my head everyday. These range from Web portals to mobile Apps to SAAS solutions to even Linux scripts and WordPress plugins. Some of these have gone on to be live projects today and others are still in my archives.

But I recently started getting frustrated with how much time and energy I have to spend to layout the basic ideas I have before I can showcase the prototype to friends, colleagues and prospective investors. Time spent to build the basic menu, portal layout, CSS styling, mobile responsiveness, etc. In some cases, I end up using some of the thousands of different plugins and libraries out there to do simple tasks, just to save time and energy. As we all know and as we say in my home country, Nigeria, TIME NA MONEY (TIME IS MONEY)!

My Solution?

I decided to do something about this and Strapilicious was born. Strapilicious is a simple but powerful bootstrapped startup web app that enables you start up a new web project in minutes (maybe seconds), with all the basic features you need in place. Responsive menus, Navigation bar, Header slider, Blog, Contact and About Pages, Social Media taggging ready, Custom useful React Hooks for various tasks, predefined CSS styles for HTML elements and much more.

All for free!
Currently, it is available as plain HTML/CSS/Javascript package and also as a React JS app startup package. All you need to startup a new ReactJS app is to clone the GitHub repository, run the npm install command and you are ready to go live.

So anytime you want to startup that new React App, instead of using create-react-app to create your app, just clone Strapilicious and you are good to go. You can then go on to add your idea's specifics faster and beat that project delivery time. It will save you lots of time and MONEY!

Check out the project page on GitHub.

GitHub Link: https://github.com/edwinokugbo/strapireact
Two Great Series!
Tags: codenewbie, vscode, webdev
Published: 2021-09-28 03:54:00

*I will be starting two great dev.to series*
the topics are as follows:-

**1)Intro to VS Code for WEB - DEVs**
**2)Newbie Front - end**
(5 Volumes)
> -> Volume 1 = Introduction
> -> Volume 2 = Building Blocks & Vannila
> -> Volume 3 = Spice it up with Frameworks!!
> -> Volume 4 = UI with Figma
> -> Volume 5 = Some Additional Resources

Hope You like the Series!! Its focused On Newbies but anyone can access and refresh their knowledge.
Comment out whitespace between inline elements
Published: 2021-09-28 03:50:34

Inline display elements, usually such as span or a, will include up to one white-space character before and after them in the document. In order to avoid very long lines in the markup (that are hard to read) and unintentional white-space (which affects formatting), the white-space can be commented out.

If you trying without a comment between the inline elements, and there will be one space between them. Sometimes picking up the space character is desired.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oleuwe3amdrb3zfom6bu.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i49f6zjbhbrbtuz8j70c.PNG)

In above image, we use both an HTML comment to nullify the newline character, and without it, you can notice a small formatting differences.
Resilience: a hidden skill that makes the difference
Tags: career, growth
Published: 2021-09-28 03:08:21

`The only constant in life is the change` - a famous quote that’s really true, more in a software development career, every day there are a ton of new things and we’re not going to have enough time to learn all of them.

This is a simple post where I would like to share, why I think resilience is a key skill for most of the people, but specifically in your career.

Currently, Software development is one of the careers with best compensation, but there are a lot of things behind this. One of them is the constant need to keep updated and that’s not an easy task.

Every project ends, even a certification has expiration date (either explicit or implicit) and we need to turn the page and continue. We can not think in all the scenarios will be the same like the previous one or think that the same key will open all the doors.

Yes, experience matter and every new learn will help us to growth. But it does not mean we'll reach the point when learn new things is not longer needed (or not at least to keep competitive).

We can not control each and every item around of us, in our career is the same. Not only in huge scale (technology trends, new programming languages, etc), but mainly in our short scope: our projects, clients, change requirements, etc.

Even when we’re experts on some specific technology we're not exempted of a struggle situation.

We don’t know exactly what we’re going to face in our next project or in the next company and additionally the fact we can't know everything technically.

But we can “train” ourselves for those situations: learn and adapt.

One of the best activities, at least from my point of view, is: problem solving. 

The importance of problem solving or competitive programming is not only the fact of send a code and see a green button with the title of “resolved”.The real important is to understand and learn about the process of solving it. 

Most of the times will be new challenges and that’s the exact situation we need to face. How to deal with new things and how to solve it. How to manage the time, find alternatives or possible solutions, face the anxiety of a hard challenge and handle the pressure.

It’s not only about learn algorithms, it's to train ourselves to experience (at a minor scale) unknown challenges.

Another good practice is learn a new language, not with the target to be an expert, but with the goal to improve our learning process to make it faster.

Yes, there are a lot of unknowns on the future where we don’t know which technology, programming language or tool we’re going to use, but what we can “control” is how easy will be for us learn those new things and it's always better to be ready.
React + Bootstrap = Easy Portfolio?
Published: 2021-09-28 02:44:02

Every developer of any type all have one thing in common aside from being a programmer, having to make a portfolio! Portfolio's not only showcase your projects, but the website itself is great for showcasing the skill within the developer as well! With me being a React Developer mainly, I decided to build my portfolio with React + Bootstrap!

**Why React?**
The React framework is really good for the job I believe because of its ability to split each component and tackle it separately. Allowing the splits not only makes it easier to keep your code organized per component, but it will also make the JavaScript(if applicable) easier as well since its separated off into components!

```
function App() {
return (
   <div>
      <Navbar/>
      <Home/>
      <About/>
      <Projects/>
      <Skills/>
      <Contact/>
   </div>
)
}
```
This is all the code you will need in the App component! Pretty simple! And for each component, just have those be a function component as well and insert your data!

After all of that is inserted you'll have the skeleton for your portfolio up in no time!

**Why Bootstrap?**
Styling pages can be really tricky with raw CSS so with my portfolio, I am styling with bootstrap! Using Codecademy's course, I learned bootstrap and started styling my pages in hours! Look at bootstrap as a predefined CSS sheet with classes already defined! This also makes your page **responsive** which is a highly desirable skill within development!

**In Conclusion**
I like how simple the process of using these resources to code an entire portfolio from scratch! I would highly recommend this for anyone who knows react, your learning and building something great at the same time!
Vocabulary Building Day 20
Published: 2021-09-28 01:49:04

1. **qualm**(noun): an uneasy feeling of doubt, worry, or fear, especially about one's own conduct; a misgiving.
![alt text](https://s3-us-west-2.amazonaws.com/svg.mindthegraph.com/realistic/qualm/900x772/qualm-04.png)
[Checkout Pronunciation](https://www.google.com/search?q=qualm&oq=qualm&aqs=chrome..69i57j0i67i433j0i433i512j0i512l6j46i175i199i512.2979j1j7&sourceid=chrome&ie=UTF-8)

2. **juggernaut**(noun): a huge, powerful, and overwhelming force.
![alt text](https://upload.wikimedia.org/wikipedia/en/4/44/Juggernaut2.PNG)
[Checkout Pronunciation](https://www.google.com/search?q=juggernaut&oq=jugge&aqs=chrome.0.0i433i512j0i131i433i512j46i199i465i512j69i57j0i512l6.8598j0j9&sourceid=chrome&ie=UTF-8)

3. **clumsy**(adjective): difficult to handle or use; unwieldy.
![alt text](https://i.pinimg.com/originals/88/e3/0e/88e30eced0185259018e321e825e0360.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=clumsy&oq=clumsy&aqs=chrome..69i57j0i433i512j0i512l3j0i131i433i512j0i512l2j0i10i512j0i512.6586j0j9&sourceid=chrome&ie=UTF-8)

4. **unimpeachable**(adjective): not able to be doubted, questioned, or criticized; entirely trustworthy.
![alt text](https://s3-ap-southeast-1.amazonaws.com/fchronicles/default/files/NESMAKER.jpg)
[Checkout Pronunciation](https://s3-ap-southeast-1.amazonaws.com/fchronicles/default/files/NESMAKER.jpg)
5. **trifling**(adjective): not worth considering.
![alt text](http://i.imgur.com/UD1GO3p.png)
[Checkout Pronunciation](https://www.google.com/search?q=trifling&oq=trifling&aqs=chrome..69i57j0i433i512j0i512l8.6142j0j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
Java Quickie. Annotations
Tags: java, tristan
Published: 2021-09-28 01:28:25

#Introduction
- This series is going to be dedicated to the basic understanding of Java. When ever I find myself asking, "How does this work ?". I will create a blog post and put it here. This series will not be in order so feel free to read what ever post you find most relevant.

- All the information I used to create this post can be found [HERE](https://docs.oracle.com/javase/tutorial/java/annotations/index.html)

###Annotation Basics
- The annotation that most of us are probably familiar with is `@Override`. The `@` character indicates to the compiler that what follows is an annotation.
- An annotation can also include elements, such as:
```
@Author(
  name="Bob"
  date=3/21/2021
)
```
- If the annotation has no elements then the parenthesis can be omitted, similar to `@Override`.

###Where can Annotations be used?
- Annotations can be applied to declarations: declarations of classes, fields, methods and other program elements. When used on declarations each annotation by convention appears on its own line.

###Type Annotations
- As of Java SE8 release, annotations can be applied to anywhere a type is used. These new and approved annotations are called `type annotations`. `@Override` and the annotation that we will be creating are examples of type annotations. Type annotations were created to support improved analysis of Java programs and improving stronger type checking.

###Creating our own annotation
- Say at the beginning of a class or method you have some comments describing it, like:
```
//Author: Bob
//Date: 3/17/2002
//Current version: 6
//Last modified: 4/12/2004
//By: Bob
```
- To add the same data with an annotation, you must first define the `annotation type`. The syntax for this is:
```
@interface CustomAnnotation {
		   String author();
		   String date();
		   int currentRevision() default 1;
		   String lastModified() default "N/A";
		   String lastModifiedBy() default "N/A";
		}
```

- The annotation type definition looks similar to an interface definition where the keyword `interface` is placed after the `@`. Annotation types are actually a form of interface.
- The body of the annotation definition contains `annotation type element declarations`, which sort of look like methods but they can define optional default values. 
- Once you have defined a annotation type like the one above, it can be used like so:

```
@CustomAnnotation(
	author = "Bob",
	date = "3/17/2002",
	currentRevision = 6,
	lastModified = "4/12/2004",
	lastModifiedBy = "Bob"
			)
	public void testingAnnotation() {
		
	}
```

- Now get out of here and create your own annotations!!

#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
AIMIX Group - The Famous Brand Of Construction Machinery In China
Tags: machinery, construction, batching
Published: 2021-09-28 01:15:51

Are you currently looking for the best construction machinery that is available in the country of China? You can't go wrong with the the company called AIMIX Group. It is one of the largest, and most respected, companies in this country that is well known for producing industrial equipment. From the production of concrete plants to self-loading mixers, they are well known for what they do in this industry. If you need an asphalt plant, mortar plant, or if you need a concrete pump, they can deliver this for you very easily. Here is an overview of this business which you should consider working with if you need construction machinery.

What Type Of Self-Loading Mixers Do They Have

This business as many self-loading mixers that you can choose from. As you evaluate each one, you need to consider the styles and capabilities of each of the units. They are used to simply transport concrete from one location to the next, but with the self-loading design, you are easily able to complete jobs without having to return for more concrete. Keep in mind that these are high-tech vehicles, ones that will require extra training. However, once that is done, your drivers will be fully versed in how to use these unique and versatile machines.

Mortar And Asphalt Plants

Another possibility is that you may need to have an asphalt or a mortar plant. You can have these delivered by this business at any time. You may need a mortar plant because you have a business that specializes in the installation of tile. If you are working on roads, or repairing them, you may need to have an asphalt plant set up at your location. They also have portable asphalt plants which will make it easy to do different jobs that may not be close by. Regardless of what you choose to do, or what type of plant that you need to have installed, they can provide this for you in no time at all. 

Concrete Plants And Pumps

The concrete plants and pumps that they have available are also state-of-the-art. They will allow you to complete projects that a much higher rate of speed. They are designed for phenomenal delivery of the concrete that can be produced. From the plant, to the pump, you will never have to worry about the quality or the amount of concrete that will be delivered. If you need to have portable units delivered as well, they have many in stock that you can get access to for extremely reasonable prices.

They also have other types of industrial machinery including jar crushers which are perfect for people that are in charge of local quarries. They can help you produce a large amount of aggregate material, in different sizes, using these machines which are considered to be some of the best in the industry. If you have never worked with be AIMIX group before, consider getting a quote from this reputable business that can also help you save money. You can learn more from https://aimixgroup.id/.
Introduction to GitHub Packages and GitHub Container Registry (GHCR)
Tags: github, ghcr, packages, container
Published: 2021-09-28 00:39:29

What is ___GitHub Packages___? What is ___GitHub Container Registry___ (GHCR)? How do they work? And what are __the differences__ between them?

In this __introduction to GitHub Packages and GitHub Container Registry__ you'll discover in just few minutes all there is to know about these two services in GitHub.

{% youtube p9ismkYDxWQ %}

[Link to the video: https://youtu.be/p9ismkYDxWQ](https://youtu.be/p9ismkYDxWQ)

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
📧 [Newsletter](https://coderdave.io/newsletter)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>

{% youtube p9ismkYDxWQ %}
I built a gem that makes it easy to automatically unsubscribe from emails in Rails.
Tags: showdev, ruby, rails
Published: 2021-09-28 00:31:18

# Source Code

https://github.com/stevepolitodesign/unsubscribe
 
# Demo

![Demo](https://raw.githubusercontent.com/stevepolitodesign/unsubscribe/main/docs/demo.gif)

# Docs

## 📭 Unsubscribe

Automatically unsubscribe from emails in Rails.


### 🚀 Installation

Add this line to your application's Gemfile:

```ruby
gem 'unsubscribe'
```

And then execute:
```bash
$ bundle
```

Or install it yourself as:
```bash
$ gem install unsubscribe
```

Then run the installation commands:

```bash
rails g unsubscribe:install
rails unsubscribe:install:migrations
rails db:migrate
```

### 📚 Usage

### Unsubscribe::Owner

- Add `include Unsubscribe::Owner` to a `Model`. The `Model` must have an `email` column.

```ruby
class User < ApplicationRecord
  include Unsubscribe::Owner
end
```

##### Available Methods

```ruby
User.first.mailer_subscriptions
# => #<ActiveRecord::Associations::CollectionProxy [#<Unsubscribe::MailerSubscription>, #<Unsubscribe::MailerSubscription>] >

User.first.subscribed_to_mailer? "MarketingMailer"
# => true/false

User.first.to_sgid_for_mailer_subscription
# => #<SignedGlobalID:123 ...>
```

#### Unsubscribe::Mailer

- Add `include Unsubscribe::Mailer` to a `Mailer`.
- Optionally call `unsubscribe_settings` to set a `name` and `description`. This will be used in the unsubscribe page.
- Set `mail to:` to `@recipient.email`. The `@recipient` is an instance of whatever Class `include Unsubscribe::Owner` was added to.

```ruby
class MarketingMailer < ApplicationMailer  
  include Unsubscribe::Mailer

  unsubscribe_settings name: "Marketing Emails", description: "Updates on promotions and sales."

  def promotion
    mail to: @recipient.email
  end  
end
```

- Call the `Mailer` with a `recipient` parameter.

```ruby
  MarketingMailer.with(
    recipient: User.first
  ).promotion.deliver_now
```

#### Available Methods

```ruby
Unsubscribe::MailerSubscription.first.action
# => "Unsubscribe from"/"Subscribe to"

Unsubscribe::MailerSubscription.first.call_to_action
# => "Unsubscribe from Marketing Emails"/"Subscribe to Marketing Emails"

Unsubscribe::MailerSubscription.first.description
# => "Updates on promotions and sales."

Unsubscribe::MailerSubscription.first.name
# => "Marketing Emails"
```

#### Unsubscribe Link

- Add the `@unsubscribe_url` link to the `Mailer`.

```html+erb
<%= link_to "Unsubscribe", @unsubscribe_url %>
```

### ⚙️ Customize Templates

Run `rails g unsubscribe:views` if you want to modify the existing templates.

### 🌐 I18n

The language used for `Unsubscribe::MailerSubscription#action` can be translated.

```yml
# config/locales/en.yml
en:
  unsubscribe:
    action:
      subscribe: "Subscribe to"
      unsubscribe: "Unsubscribe from"
```

### 🙏 Contributing

If you'd like to open a PR please make sure the following things pass:

```ruby
bin/rails test
bundle exec standardrb
```

### 📜 License

The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
LF Fellow Noob :D 
Tags: javascript, react, mongodb, beginners
Published: 2021-09-27 23:44:53

I finished my CS degree in 2019 but haven't coded barely at all and honestly felt my CS degree was a waste as they touched on a lot of languages but didn't go into depth on any of the concepts for it to be useful. 

Looking for any fellow coders who are entry level and want to learn MERN to hold each other accountable and have someone else to pick each others brain when one of us inevitably get confused. :) 

Also simply interested in any online communities that are similar. Just found this website tbh and it's great!