teleren/devto huggingface dataset:
Web Component Frameworks
Published: 2021-09-13 04:38:34

Ever been confused by web programming? No? ...stop lying

JavaScript runs the majority of web pages and with JS we can create custom web components. Since web components are relatively new they may be tough to pick up and implement. To ease the pain we all feel, people have made frameworks to slightly ease the burden of creating web components.

We'll compare some of the most popular frameworks (Angular, Vue, React) and a toolchain (Stencil) to determine the pluses and minuses that apply across them.

###Commonalities
Angular, React and Stencil are all similar in the way they conduct their file structures. Package.json is located in the main directory while the main page content is located in a designated folder. The outlier, Vue holds all the main content in the root directory. Misleadingly, Vue also puts .vue files in the /src folder which could be seen as confusing to a vanillaJS veteran.

Angular and Stencil use typescript which makes a newbie shiver but can be learned fairly quickly with experience in JS. On the other hand, React and Vue run (frontend-wise) on JS.

###Duplicate / Overlapping Frameworks
Once you begin using each framework, you begin to notice a good amount of how they work overlaps with each other. We get this duplication since these frameworks are open to use and shape into any project anybody wants. This makes contributors adding the effective parts of other frameworks to the one your using.

###Easiest vs. Bias
Overall, Vue seems the easiest to use since it's not very complicated to learn and running with.

But who likes doing the easy one?

I've had experience in a past internship with Angular and although Vue wouldn't be tough to pick up if needed, if I had to choose a one to get a website going today, I'd be more confident in using Angular.

###GitHub
[Group Repo](https://github.com/IST-402-Group-1/IST402)
[My Fork with Boilerplate](https://github.com/mwagnerPSU/IST402/)
[Stencil Hello-World Boilerplate](https://github.com/hartjus/stencil-hello-world)
Incredible Ecommerce Link Building Strategies For 2021
Tags: seo, linkbuilding, offpage, onpage
Published: 2021-09-13 04:27:56

1. Leverage Testimonials In Your Niche

Step #1 – Generate A List Of Targets

Step #2 – Find The Right Person To Pitch To

Step #3 – Send Your Testimonial Pitch

Step #4 – Writing The Perfect Testimonial

2. Support New Business Growth

How To Find Crowdfunding Sites For Link Building

3. Sponsor Real World Events

1 – Hosting An Event

2 – Sponsoring An Event

How To Find Events To Sponsor

site:[website URL] inurl:events +“sponsors”
site:[website URL] inurl:events +“link to your”
site:[website URL] inurl:registration +“sponsors”
site:[website URL] +“sponsors”
site:[website URL] + “donation”
site:[website URL] + “become a sponsor”
site:[website URL] -inurl:support -inurl:blog +“link to your website”

4. Show Your Presence On Social Media

How To Build Backlinks With Facebook

1 – Your Profile’s ‘About’ Tab

2 – Your ‘About’ Page Description

3 – Include A Website Link In All Posts

4 – Page Buttons

5 – Picture Descriptions

5. Strategic Guest Blogging

Step #1 – Find Your Prospects

Step #2 – Qualify The Blogs

Step #3 – Reaching Out

Step #4 – Creating Incredible Guest Post Content

Step #5 – Build Relationships

6. Help Clean Up The Web

Step #1 – Define A Target Website

Step #2 – Finding The Broken Links

Step #3 – Contacting The Blog Manager

7. Harness Internal Link Building

8. Replicate Your Competitors Best Links

Step #1 – Make A List Of Your Competitors

Step #2 – Analyse Their Backlinks

9. Get Listed In Link Roundups

Step #1 – How To Find Link Roundup Sites

Step #2 – Pitching Your Awesome Content

10. Get Listed On Resource Pages

Step #1 – How To Find Resource Pages

Step #2 – Pitching Your Content

11. Create Data Driven Content

12. Listen To The Web

Step #1 – Look For Your Company Online

Step #2 – Find Your Mentions

Step #3 – Outreach

Step #4 – Setting Up Automatic Alerts

13. Recycle Old Domain Names

14. Hijack News Events

Step #1 – Find Popular Topics

Step #2 – Brainstorm content ideas

Step #3 – Define And Create The Content

Step #4 – Publish And Promote

15. Massage Influencers Ego’s

Step #1 – Pick Your Headline

Step #2 – Define the Question

Step #3 – The Experts

Step #4 – Outreach
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 49
Tags: php, javascript, webdev, tutorial
Published: 2021-09-13 04:26:49

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   Creating getAllCategories method
{% youtube VlDIYX_XoFc %}



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)
VueJS: Split Panes/ Split View
Tags: vue
Published: 2021-09-13 04:25:46

If your looking for a split view that supports vue js. I recommend this tool called `Splitpanes`. Here is their official website: https://antoniandre.github.io/splitpanes/

Sample:
<p>A Vue JS reliable, simple and touch-ready panes splitter / resizer.</p>
{% codepen https://codepen.io/antoniandre/pen/XybPKP %}


For more examples, check here: https://antoniandre.github.io/splitpanes/
Glowing Drop
Tags: codepen
Published: 2021-09-13 04:17:28

<p>Inspired in my own shot on Dribbble  <a href="https://dribbble.com/shots/3530799-Glowing-drop" target="_blank">https://dribbble.com/shots/3530799-Glowing-drop</a>... Only CSS</p>

{% codepen https://codepen.io/judag/pen/KKgzxap %}
Time for JS and the many confusing libraries and packages
Published: 2021-09-13 03:56:03

# Hello-world
Some JS frameworks are easy to use. Others don't make it easy to get started. We're looking at Vue, Angular, React, and StencilJS, and I am really floundering at this intro.

# Similarities
Right off the bat, all of the boilerplate projects have package.json files, since it is required. From there, the similarities become less apparent. They all are to create a component, but Vue is a bit vague on that front. 

## Vue
Vue calls their web components just components, which can be a bit confusing at times. Vue is the only one to have a custom file type of .vue. It still uses JS, but Vue has some specific functions. It is also very reactive as it has special calls to handle any event in its lifecycle. I was able to create my starter project from the Vue-cli interface.

## Angular
Angular stands out as it is the only one to not use npm for building and testing. It instead uses the ng command, which is specific to Angular. Angular is also mean in that it uses typescript files, which are just annoying and borderline gatekeeping. 

## React
The React boilerplate we found is a mess of files, but it is very well documented (GitHub linked at the end). They boast a host of fast features and high coverage and compatibility. Not much to say on this one other than it is large and fast.

## StencilJS
The outlier, StencilJS, is not a framework. StencilJS is a toolchain to generate projects. Sadly, StencilJS also uses TypeScript files, so it is not the best choice. But the fact that it isn't a framework that a programmer doesn't have to learn a new language is a huge improvement over the others.

# My Personal Choice
Out of the four, I would use Vue to build a website tomorrow. I might have a bit of bias because I already work with it, but being able to create an app or web-component from the command line instead of someone else's GitHub repo is amazing. Vue also works great with API calls and data. It is also highly reactive and has a large number of tools for analyzing and debugging. 

# GitHub
{% github PenStat/boilerplates no-readme %}
How to Install CKEditor in Laravel
Tags: laravel, ckeditor, texteditor, php
Published: 2021-09-13 03:26:39

Today in this post we will see you how to Install ckeditor in laravel, CKEditor is rich text editor using ckeditor we can write content directly inside of web pages or online applications. ckeditor provide many features like add images, create html tables, changes font size and style, add links, add snippet code and many more feature.it is opensource editor, and you can create your customize package and download from it's official website.

So,let's start and see how to install and use ckeditor in laravel.

```
<html>
    <head>
        <meta charset="utf-8">
        <title>How to Install CKEditor in Laravel - techsolutionstuff.com</title>
        <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-12">
                <h1 style="text-align: center;">how to implement ckeditor in laravel - techsolutionstuff.com</h1>
                <div class="col-md-12">        
                    <textarea name="editor1"></textarea>
                </div>
            </div>
        </div>        
        <script>
                CKEDITOR.replace( 'editor1',{
                    height:350,
                });
        </script>
    </body>
</html>
```

![How to Install CKEditor in Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c248j0pfjjcphqkdixnp.png)

---
You might also like : 

- **_[Read More : Laravel 8 Google Recaptcha Example](https://www.techsolutionstuff.com/post/laravel-8-google-recaptcha-example)_**

- **_[Read More : Import Export CSV/EXCEL File In Laravel](https://www.techsolutionstuff.com/post/import-export-csv-excel-file-in-laravel)_**

- **_[Read More : How To Add Toastr Notification In Laravel](https://www.techsolutionstuff.com/post/how-to-add-toastr-notification-in-laravel)_**
آموزشگاه آنلاین متخصص شو
Published: 2021-09-13 03:20:55

چگونه <a href="https://motakhasessho.ir/"> متخصص شو </a> و با تخصص خود به موفقیت های بالا دست پیدا کنیم ؟ در کل چگونه متخصص بشیم ؟ 

تا به امروز دست به چه کارهایی زدید تا در کار، علایق و مهارت خود <a href="https://motakhasessho.ir/"> متخصص شو </a>. چه فعالیتی داشتید و چقدر به آن فکر کردید ؟ و همچنین چقدر اشتیاق رسیدن به اهداف خودتونو داشتید ؟  چه مهارت هایی را آموختید؟ با چه افرادی مشارکت داشتید؟ و یا مسئولیت چه کارهایی را بر عهده گرفتید؟ در کسب و کار های واقعی، فقط برای اجرای بهتر کار ، پاداش عالی می پردازند. بابت اجرای متوسط پاداش متوسط. و شکست و ناکامی برای نتایج زیرسطح موفقیت هست ، اما نگران نباشید شاید خیلی از ما اون میزان که باید مسئولیت زندگی خودمونو قبول نداشته باشیم و نگیم من ساختمش یا من باعث خراب شدنش شدم و خودم درستش میکنم .
فروشگاه آنلاین سفارش روز
Published: 2021-09-13 03:18:19

در ایران مدتی است که بازار فروشگاه اینترنتی و خرید آنلاین بسیار داغ و پر از خبرهای جدید است، به همین جهت تصمیم داریم 10 فروشگاه برتری که سال 1400 توانستند در صدر باقی بمانند را بر اساس معیارهای مشخصی تعیین و معرفی کنیم.

فروشگاه اینترنتی به سایتی گفته می شود که به ارائه کالا یا خدماتی به صورت آنلاین مشغول است، اما ما در اینجا قصد داریم فقط فروشگاه های ارائه کننده کالاهای فیزیکی را با یکدیگر مقایسه کنیم و سراغ فروشگاه های خدماتی در مطلبی دیگر خواهیم رفت.
تعریف <a href="https://sefareshrooz.ir/"> سفارش روز </a> چیست؟
سفارشی برای خرید یا فروش اوراق بهاداری که اگر تا پایان همان روز معاملاتی اجرا نشود به‌صورت خودکار منقضی می‌شود. <a href="https://sefareshrooz.ir/"> سفارش روز </a> فقط برای همان روز مناسب است و اگر اجرا نشود، لغو خواهد شد. چنانچه در طول معاملات روزانه بازار، محدودیت یا قیمت مشخص‌شده از سوی سرمایه‌گذار اتفاق نیفتد، سفارش او انجام نخواهد شد. <a href="https://sefareshrooz.ir/"> سفارش روز </a> یکی از انواع مختلف سفارش‌هایی است که تعیین می‌کند دستور سفارش خرید یا فروش، چه مدّت باز باقی بماند.

به‌طور مثال، نوع دیگری سفارش وجود دارد که سفارش بدون محدودیت زمانی یا Good Till Canceled-GTC نامیده می‌شود. در این سفارش تا زمانی که شما دستور به توقف سفارش ندهید، سفارش خرید یا فروش شما در سامانه معاملاتی بورس فعال باقی می‌ماند و تنها به‌صورت دستی توسط کارگزار لغو خواهد شد. درحالی‌که نوع دیگر سفارش به نام اجرا بی‌درنگ یا ابطال Immediate Or Cancel-IOC وجود دارد که طبق آن تمام یا بخشی از سفارش باید به‌سرعت اجرا شود و در غیر این صورت مابقی سفارش لغو خواهد شد.

توضیحات مدیرمالی در مورد سفارش روز
در دستورالعمل اجرایی نحوه انجام معاملات، <a href="https://sefareshrooz.ir/"> سفارش روز </a> این‌گونه تعریف شده است: «سفارشی است که اعتبار آن در پایان روز معاملاتی به اتمام می‌رسد و به صورت خودکار از سامانه معاملات حذف می‌شود» هنگام ثبت سفارش، خریدار یا فروشنده سهم ملزم به مشخص کردن نوع سفارش خود است. طبق این دستورالعمل اجرایی سرمایه‌گذاران می‌توانند انواع مختلف سفارش را در سامانه معاملاتی بورس ثبت کنند.
Happy Programmers' day
Tags: programming, performance, beginners, codereview
Published: 2021-09-13 03:10:56

The Day of the Programmer is an international professional day that is celebrated on the 256th day of each year. It is officially recognized in Russia. The number 256 was chosen because it is the number of distinct values that can be represented with a byte, a value well known to programmers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvbrfw4irrka3nfwu3y7.png)

The Day of the Programmer is an international professional day that is celebrated on the 256th (hexadecimal 100th, or the 28th) day of each year (September 13 during common years and on September 12 in leap years). It is officially recognized in Russia.

The number 256 (28) was chosen because it is the number of distinct values that can be represented with a byte, a value well known to programmers. 256 is also the highest power of two that is less than 365, the number of days in a common year.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hi6i9evrlxeab291ppi.png)

This particular day was proposed by Valentin Balt and Michael Cherviakov (aka htonus), employees of Parallel Technologies (a software company). As early as 2002, they tried to gather signatures for a petition to the government of Russia to recognize the day as the official Day of the Programmer.

On July 24, 2009, the Ministry of Communications and Mass Media (Russia) issued a draft of an executive order on a new professional holiday, Day of the Programmer.

On September 11, 2009, President of Russia Dmitry Medvedev signed the decree.

A computer programmer, sometimes called a software developer, a programmer or more recently a coder, is a person who creates computer software. The term computer programmer can refer to a specialist in one area of computers or to a generalist who writes code for many kinds of software. 

[Nitesh Taliyan](niteshtaliyan.tech)
Python 🤫 Hidden Syntax 🤫, You'll be using always from now 😝
Tags: python, tutorial
Published: 2021-09-13 02:35:25

## Ellipsis

Use ... (Ellipsis), an alternative to `pass`.

``` python
def main():
    ...
```

``` python
if True:
    ...
```

## single line return

For single line utility functions use, single line return statement. 

``` python
def greet(): return "Welcome!"
```

``` python
def todo(): ...
```

## Document Your Functions
To get proper documented Classes or functions with auto-completion define types of parameters and return types

``` python
def rectangle_area(l: float, b: float) -> float:
    area = l * b
    return area
```

![Python 🤫 Hidden Syntax 🤫, You'll be using always from now 😝](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7999vuuuvg3a0n2hyf7.png)

## Clever use of `type()` method

Call type function to know default value of any datatype.

``` python
>>> type(512)()
0
>>> type(True)()
False
```

Also, Use for type checking

``` python
>>> type('Apple') == str
True
>>> type([1, 2, '3']) == list
True
```

Thanks and Cheers
RajeshJ3
Boilerplate Summary 
Published: 2021-09-13 02:26:15

##**Similarities**

I will start by comparing the different boilerplates that my group has started to look at. We look at VueJS, Angular, React, and StencilJS.  The first thing that I noticed is that the README files for all of them actually proved to be very helpful.  I would say that probably the least helpful README was actually for the Angular, which is what I was specifically taking a closer look at.  I noticed that the React and Angular boilerplates have very similar file organization which made it easy for me to navigate the files between the two. The gitignore was somewhat different for each of the boilerplates. They all also had very similar LICENSE information, I assumed they would be. 

##**Easiest DX**

I am not 100% certain which would be the true easiest DX to get going.  The answer I am going to go with though is either React or VueJS.  I have little to no experience with either but I know they are very popular.  After taking a deeper look into the two, I feel like VueJS would be more simple based on the amount of files included in the React folder in our current repo.  There is so much information that overall just made me more and more confused about how React works.  

##**Starting an app tomorrow**

My reasoning for making my selection may not be the best reason but I am going to say I would select React, even though I just said above that I don't think it is the easiest the learn.  I am saying this because of all the popularity I have seen from it.  I did some research and it seems like most companies are looking for developers who have experience working with React and that it just helps your career in the long run.  In my past experience this summer working my internship, I know that company I worked for would push their developers to even learn React during the work day.  So I think creating an app using React would just be beneficial to me in the long-run, even if it may be more difficult to learn.

My organization: https://github.com/PaddysHub

Repo I got boilerplate from:  https://github.com/mdbootstrap/Angular-Bootstrap-Boilerplate.git
Day 3 (and 4) of 100 Days of Code
Tags: cpp, 100daysofcode
Published: 2021-09-13 01:48:52

Day 3: Doing pretty good so far. Starting to find it hard to make time to code. Yesterday I learned more about how to interact with files as well as booleans.

Day 4: Another day, another script. Learned more about switches and loops. Spent some more time on my script as well. Having some issues figuring out why it's only outputting to the user folder.
First Week as Computer Science Major
Tags: college, python
Published: 2021-09-13 01:35:29

#So my first week at college

**It wasn't bad, it was pretty fun**

However, there is just so much to do and most of it for me wasn't programming. I was stressing out over internships and getting my resume ready before the career fair. Also classes, there's a lot to get used to. My programming class is fairly basic with not much going on, except for printing out some basic python. But in Math we used sympy in Jupyter for learning. **Overall I'm excited**

SIGNING OUT,

Aneek
RSpec Negated Matchers
Tags: ruby, testing
Published: 2021-09-13 01:26:21

## Problem

We want to test that when we call our Ruby method, one result _does_ occur while another result _does not_ occur. Specifically, we want to test that an `Event` is created but that an `EventPayload` is not created. Using RSpec, we have this so far:

```ruby
it "creates an event without an associated payload" do
  expect { service.create_event! }.to change { Event.count }.by(1)
  expect { service.create_event! }.not_to change { EventPayload.count }
end
```

This is ok, but we'd like to run both expectations on a single method call.

We know that RSpec has [and](https://relishapp.com/rspec/rspec-expectations/docs/compound-expectations) which can help us make compound expectations, but this falls apart when we want to make one positive assertion and one negative assertion. We could try this:

```ruby
it "creates an event without an associated payload" do
  expect { service.create_event! }
    .not_to change { EventPayload.count }
    .and change { Event.count }.by(1)
end
```

But no joy:

```
NotImplementedError: expect(...).not_to matcher.and matcher` is not supported, since it creates a bit of an ambiguity.
```

## Solution

How can we chain two expectations together with `and` if one is a "not" condition? RSpec allows us to define a [negated matcher](https://relishapp.com/rspec/rspec-expectations/v/3-10/docs/define-negated-matcher):

```ruby
RSpec::Matchers.define_negated_matcher :not_change, :change
```

Which allows us to then write this:

```ruby
it "creates an event without an associated payload" do
  expect { service.create_event! }
    .to change { Event.count }.by(1)
    .and(not_change { EventPayload.count })
end
```

And we can flip the order if we choose:

```ruby
it "creates an event without an associated payload" do
  expect { service.create_event! }
    .to not_change { EventPayload.count }
    .and change { Event.count }.by(1)
end
```

Fun!

_Learn more about how The Gnar [builds Ruby on Rails applications](https://www.thegnar.com/software-development/ruby-on-rails-development)._
Web Component Boilerplates
Tags: vue, angular, reactnative, webdev
Published: 2021-09-13 00:57:04

When researching frameworks for web components many different ones come up, but some common ones are VueJS, angular, StencilJS, and react. In this blog post I will be going over similarities between these frameworks and my opinion on them.

## Similarities 
Within each package, there is a source directory that has JavaScript, HTML, and CSS to run the whole package. All of them share similar code because it is so widely used and accepted. Also, Angular and React have more dependencies, that make it easier for the user to get what they want, but it makes the download longer.

## Easiest DX
I believe that the easiest DX to get going is  react. All that is needed is a few commands in the users terminal window and the program is up and running. All of these frameworks are similar and it all comes down to personal preference and whatever the user has more experience with.

## What would I use to build an app tomorrow?
If I had to start building an app tomorrow, I would want to use react to build it. React has a large community behind it compared to others so it is easy to find information on it. Also, my personal experience with it has been good and I have the most experience with it.

To see some simple examples of these boilerplates, check out this repo: https://github.com/runtimeErrorsMadeEasy/boilerplates.git
Tutorial for a Hello-World program: https://upmostly.com/tutorials/react-hello-world-your-first-react-app
Debugging Angular App on Android from Mac
Tags: todayilearned, tooling, angular, android
Published: 2021-09-13 00:41:32

Today I needed to inspect an Angular web app I'm building to determine why it was not displaying correctly. 

(It displayed just fine in the Chrome Dev Tools Emulator, but not on a real device).

I've done this a lot in the past and thought I knew how to set this up, but there was one thing particular to Angular that I was missing.

## 1. Determine your Mac's IP address

Open a Terminal window and type `ifconfig`
Look for the `inet` entry under `en0` and make a note of it

![Screen Shot 2021-09-13 at 12.31.18 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ereu6w962ltetd4krp2.png)
  

## 2. Update your hosts file

Open a Terminal window and type the following to open the hosts file on your Mac

   `sudo nano /etc/hosts`

Add the following entry, where Mac IP is what you copied above

`127.0.0.1 <Mac IP>` E.g. `127.0.0.1 192.168.1.4`

## 3. Start Angular with host parameter

This is the bit I was missing, you need to serve the Angular app with an additional flag.

`ng serve --host 0.0.0.0`

> By default Angular will be served on `localhost` but here we need to use 0.0.0.0

## 4. Open the app in Chrome on Android

In your mobile browser, use the IP address of your Mac and the appropriate port number

E.g. `http:192.168.1.4:4000`

## 5. Inspect your device from Mac Chrome

Start Chrome on your Mac and in the address bar type
`chrome://inspect/#devices`

Find your device in the list and click "inspect"