teleren/devto huggingface dataset:
Native App vs. Hybrid App vs. Web App
Tags: ios, android, webdev
Published: 2021-11-19 13:19:26

What exactly are Native, Hybrid, and Web Apps?

As mentioned earlier, it will be feasible to create a mobile app in 3 primary ways – native app development, web app development, and hybrid app development. They all have their advantages and drawbacks, which we have discussed in the following paragraphs.

 
<b>What do you mean by a Native App?</b>

We call an app native when we make use of platform-specific programming languages for creating them. Right now, the two most popular operating systems happen to be Android and iOS. The languages used for building native apps are Objective-C or Swift for iOS and Java for Android. Programmers also employ SDKs (software development kits) for creating these types of apps.

<b>What do you mean by a Web App?</b>

We refer to a responsive website that can be launched in a browser on any mobile device, tablet, or desktop computer by the term web app. There is no need to download a web app since it can be accessed through a URL. However, one cannot deny that a web app will provide you with a native-like experience despite having the ability to run on all types of devices and browsers.

<b>What do you mean by a Hybrid App?</b>

A hybrid app is going to combine the attributes of native as well as web apps. Therefore, it is possible to run the hybrid application on virtually any platform with some slight enhancements. Apps produced by hybrid app development services are backed by a hybrid development framework based on HTML, JavaScript, and CSS.

Let's explore more here about pros and cons of Native App, Hybrid App, Web App: https://www.rlogical.com/blog/native-app-vs-hybrid-app-vs-web-app/
Docker commit: converting a container into an image
Tags: docker, linux, devops
Published: 2021-11-19 13:15:10

We can convert a specific container into a base Docker image, but that's not the recommended way to create images because these could include useless cached or session data. 
The easiest way to control the data stored in the Docker layers is using the `Dockerfile`.

🧠 Remember that a Docker image has a read-only filesystem based on layers which works as a _template_ to start containers in a preinstalled environment, and a Docker container uses this _"template"_ to run isolated applications into a virtualized run-time environment with a normal filesystem.

## Is this necessary to create images with non-root users?

No, you can run commands with other users using the `Dockerfile` as well. You can see an example [here](https://dev.to/cloudx/testing-our-package-build-in-the-docker-world-34p0).

## Adding a port forwarding rule to a container

When you are testing a random software within a container you might need to publish a port on the host OS, or into another computer. In this case you can't add a forwarding port rule to an already existing container, so here is when docker commit comes to save us:

```
$ docker commit my_container my_image
$ docker run -p 8080:80 -it my_image
```

Now we can access to the port `80` in the container using `http://localhost:8080` in the host OS.

`docker commit` can also be used to attach new volumes to the container.

## The size is important

Remember that it's a good practice to keep your Docker images as minimalist as possible. Also the reproducible way to create and ship images is the `Dockerfile`.

💡 You can [inspect the layers of a Docker image](https://dev.to/cloudx/analyzing-the-docker-layers-with-dive-5e7o) using Dive, to optimize the size of your images.
Ruby (Manik) stone
Published: 2021-11-19 13:06:43

In Sanskrit, "Ruler of Gems" or Ratnaraja exemplifies the sun with its force and splendid light and was the name given to all dark red diamonds, from rubies to garnets. Today, the corundum ruby family are normally sturdy gemstones that are hued with chromium and transmit inner fluorescence when light hits the gemstone. With her dynamic red and enrapturing charm, Ruby makes certain to stop people in their tracks with her striking tones known to her for improving both wellbeing and connections.
https://rashiratanjaipur.net/gemstones/ruby
I created a full stack open source invoicing application using the MERN stack
Tags: react, javascript, mongodb, opensource
Published: 2021-11-19 13:04:51

Hello All,
This happen to be my first post since I join this forum in 2019 and I’m happy to share with you a side project I’ve been working on for some months now. Having gone through many web projects on Github, I noticed that these projects are mostly ecommerce or blog sites, so I decided to do something different in order to challenge myself and to up my skills in software development.
I build a full stack invoicing application, using the MERN stack (MongoDB, Express, React & Nodejs). This app is specially designed for freelancers and small businesses, but can be used for almost any type of business need. With this application, you can send beautiful invoices, receipts, estimates, quotes, bills etc to your clients. I have made the [Source code](https://github.com/Panshak/arcinvoice) available in my GitHub profile for anyone who is interested. You can also find a  [Demo link](https://github.com/Panshak/arcinvoice) in the Github repo of this project.
![Invoice Dashboard](https://res.cloudinary.com/almpo/image/upload/v1637314504/invoice/dashboard_c5z0is.png)

## Key Features
- Send invoices, receipts, estimates, quotations and bills via email
- Generate and send/download pdf invoices, receipts, estimates, quotations and bills via email
- Set due date.
- Automatic status change when payment record is added
- Payment history section for each invoice with record about payment date, payment method and extra note.
- Record partial payment of invoice.
- Clean admin dashboard for displaying all invoice statistics including total amount received, total pending, recent payments, total invoice paid, total unpaid and partially paid invoices. 
- Multiple user registration.
- Authentication using jsonwebtoken (jwt) and Google auth


## Technologies used
This project was created using the following technologies.

#### Client

- React JS
- Redux (for managing and centralizing application state)
- React-router-dom (To handle routing)
- Axios (for making api calls)
- Material UI & CSS Module (for User Interface)
- React simple Snackbar (To display success/error notifications)
- Cloudinary (to allows users to upload their business logo)
- Apex Charts (to display payment history)
- React-google-login (To enable authentication using Google)

#### Server

- Express
- Mongoose
- JWT (For authentication)
- bcryptjs (for data encryption)
- Nodemailer (for sending invoice via email)
- html-pdf (for generating invoice PDFs)

#### Database
MongoDB (MongoDB Atlas)

I have written a detailed documentation of how to run this project locally, and it can be found in the readme file of the project repository [here](https://github.com/Panshak/arcinvoice).

I intend to keep adding more features to this application, so if you found this project interesting, please give it a star, it will encourage me a lot.
How to create responsive loopstudios landing page with HTML CSS JS | Frontend Mentor
Tags: css, tutorial, webdev, beginners
Published: 2021-11-19 13:00:18

{% youtube lDHspzUov88 %}

How to create responsive loopstudios landing page with html css js
Frontend mentor

In this video, 
I will show you how to build a Complete Landing Page Website using HTML CSS JS step by step.

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

📹 Recommended Videos
-----------------------------
[How to use ionicon](https://youtu.be/TTrYjLOJeKs)

---

🔗 Essential links
-----------------------------
[All files](https://drive.google.com/file/d/1imAhujwJPv7lv1XVyqlbXPW0Nv4psRPs/view?usp=sharing)
[Font - Alata](https://fonts.google.com/specimen/Alata?query=alata)
[Font - Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans?query=josefin)
[Ionicon](https://ionic.io/ionicons)
[Source Code](https://www.patreon.com/codewithsadee)

---

⏱️ Timestamp
-----------------------------
0:00 - Demo
1:42 - File structure
2:06 - Html structure & variable setup.
4:37 - Reset & all heading style
5:38 - Header section 
10:08 - About section
12:17 - Product section
20:16 - Footer section
23:40 - Media queries
37:07 - Mobile nav toggling funcitonality

---

📹 Others Videos
-----------------------------
[Personal Portfolio Website](https://youtube.com/playlist?list=PLasZMtSCguZbYYb7uzDMAC0rg49A8XOsS)
[Toggle Button with 3d Effect](https://youtu.be/OpbbPLPqSDc)
[Twitter Sidebar Clone](https://youtu.be/0MDBVR93g7E)
[Awesome Card Design for Website](https://youtu.be/g9VdvKx8fuM)
[Restaurant Header Design](https://youtu.be/mUBW8i2kht0)

---

👤 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
What is AWS Artifact?
Tags: aws, webdev, tutorial, programming
Published: 2021-11-19 13:40:57

---
title: What is AWS Artifact?
published: true
date: 2021-11-19 12:58:55 UTC
tags: AWS,webdev,tutorial,programming
canonical_url: https://devswisdom.com/what-is-aws-artifact/
---

## **Introduction**

AWS Artifact is a self service which anyone with AWS account can access and use it for free, it provides AWS customers to access compliance documentation and agreements on demand for free. It is like a portfolio for AWS reports which we can see and read about it in details. Even all IAM users with admin permissions can access this service and get to know more about AWS compliance and agreements.

All the agreements found here will be of two types

**Active –** Agreements which are signed by users and are currently going on.

**Inactive –** These are agreements which are not accepted by the user or user has terminated these agreements.

AWS root account has all the permissions to access any kind of document through this service, for IAM users we have an option to use IAM policies to give access to certain documents to certain IAM users according to their authority and requirement.

For example if there is an audit needed and our auditors need access to certain documents needed for the audit, we can create IAM user and give it to access certain types of documents only.

## **How to access AWS Artifact?**

We simply need to go to our AWS account and type “artifact” in the AWS service search option and select Artifact from the list.

![how to access aws artifact](https://devswisdom.com/wp-content/uploads/2021/11/how-to-access-aws-artifact.png)

## **How to download reports?**

On the current AWS service console, we will see these two buttons, one is to view agreements and one is to view reports, click on “View reports”.

![view reports button](https://devswisdom.com/wp-content/uploads/2021/11/view-reports-button.png)

We need to select the document which we want to download and then click on “Download report” button.

![download report button](https://devswisdom.com/wp-content/uploads/2021/11/download-report-button-1024x147.png)

## **How to accept agreements?**

Select “View agreements” which is on the home page of AWS artifact service then select the agreement which you want to accept and click on “Accept agreement” button on the page.

## **Conclusion**

Overall AWS Artifact is a great service provided by AWS so their users can get to know them more and evaluate them.

Check more posts from DevsWisdom

[AWS Cognito Pricing and Features – 2021](https://devswisdom.com/aws-cognito-pricing-and-features-2021/)
[AWS Step Functions Most Used Nodejs SDK APIs](https://devswisdom.com/aws-step-functions-most-used-nodejs-sdk-apis/)
[AWS Step Functions Cheatsheet](https://devswisdom.com/aws-step-functions-cheatsheet/)
[How to extract text from an image using AWS Textract](https://devswisdom.com/extract-text-with-aws-textract-using-aws-step-functions/)

The post [What is AWS Artifact?](https://devswisdom.com/what-is-aws-artifact/) appeared first on [DevsWisdom](https://devswisdom.com).
The Classlist API
Tags: html, css, javascript, tutorial
Published: 2021-11-19 12:52:02

Hey **fellow creators**,

Let's learn how to use the **classlist API**, which is handy since it'll let you add, remove, and plenty of other things with the classes of your html code!
 
If you prefer to watch the video **version**, it's right here :

{%youtube nmQKIJ8gZBE%}

Here's a [code pen]( https://codepen.io/Ziratsu/pen/LYyYKyZ) for you to follow along!

##1. Access the API.

This is an API directly implemented in the browser, so you don't need to do anything as long as you are using Javascript with your browser.

Create a simple title in your HTML, here's mine:

```html
<h1 class="title t1 heading">Yellowstone National Park is an American national park located in the western United States.</h1>
``` 

As well as a CSS file:

```css
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: Arial, Helvetica, sans-serif;
}

.title {
    color: #f1f1f1;
    padding: 15px 40px;
}

.salmon {
    background: salmon;
}
```

So here's how you can access the API:

```js
const title = document.querySelector('h1')
console.log(title.classList);
```

Then, look into your console and you'll see that you have a list with the different classes, and in the prototype you'll see the different methods that you can use, like toggle, replace etc.

##2. Let's try the *add* method!

```js
title.classList.add('salmon')
```

This will add the background colour to the H1! You're just adding one class to your title.

##3. Try the *remove* method.

```js
title.classList.remove('salmon')
```
And now the background color is removed!

##4. What does the *toggle* method do?

Imagine if you click on the element, you want to toggle the salmon class:

```js
title.addEventListener('click', () => {
            title.classList.toggle('salmon')
})
``` 

Now, if you click on it, the background will reappear, and if you click on it again it'll disappear, etc!

##5. The *item* method.

```js
console.log(title.classList.item(0));
```
This will give us the first class. It's not always useful, but that way you know it!

##6. What's the *contains* method?

This method is more useful! This will help you know if an element contains a certain class:

```js
console.log(title.classList.contains('heading'));
```

Here, since our title does contain the class heading, it will return true in the console.

##7. What about the *replace* method?

The replace method is pretty straightforward: as the title says, it replaces a class by another class:

```js
title.classList.replace('heading', 'salmon')
``` 

The title will now have the class salmon instead of heading. 

These methods are fairly easy to learn, but are pretty useful as you can see!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool


*See you soon!*

Enzo.
Github to Whatsapp Push Notifier using GitHub Actions
Tags: actionshackathon21, github, whatsapp, automation
Published: 2021-11-19 12:40:20







# Github to Whatsapp Push Notifier
#### Link to GitHub repo: [Github to Whatsapp Push Notifier](https://github.com/G-Sudarshan/Github-to-Whatsapp-Push-Notifier)

The whatsapp bot built using Twilio APIs which sends a Whatsapp message when code is pushed to a repository.

<h1 align="center">Whatsapp Push Notify Action 🚀</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/g-sudarshan/Github-to-Whatsapp-Push-Notifier/blob/master/LICENSE" target="_blank">
    <img alt="License: GNU GPLv3" src="https://img.shields.io/badge/License-GPLv3-blue.svg" />
  </a>
</p>

<!-- > A github action which sends a Whatsapp message when code is pushed to a repository. -->

<!-- ### :house_with_garden: [Homepage](https://github.com/g-sudarshan/whatsapp-push-notify-action) -->

### Usage
1. Create account in twilio [here](https://www.twilio.com/).  
2. From your twilio dashboard fetch Account Sid and Auth Token.  
3. To encrypt them, create new secrets in your repository named account_sid, auth_token, to_whatsapp_no and give it's value.  
4. Create a .github/workflows/whatsapp-push-notify-action.yml.  
5. Add the following properties to whatsapp-push-notify-action.yml file   

```
name: When a push occurs in the master branch, a private message is sent on the Whatsapp.
on:
  push:
    branches: 
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: install twilio
        run: pip install twilio
      - name: run code
        run: python main.py
        env:
          account_sid: ${{ secrets.ACCOUNT_SID }}
          auth_token: ${{ secrets.AUTH_TOKEN }}
          to_whatsapp_no: ${{ secrets.TO_WHATSAPP_NO }}
          from_whatsapp_no: ${{ secrets.FROM_WHATSAPP_NO }}
```

# Whatsapp Push Notifier Output

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkmkiz7voca7cc626a4c.jpeg)


This project is [MIT](https://github.com/G-Sudarshan/Github-to-Whatsapp-Push-Notifier/blob/main/LICENSE) licensed.

***




### Submission Category: 

Maintainer Must-Haves, DIY Deployments, Phone Friendly, or Wacky Wildcards


### Additional Resources / Info

I have used [Twilio's Whatsapp APIs](https://www.twilio.com/) for this project

#### Link to GitHub repo: [Github to Whatsapp Push Notifier](https://github.com/G-Sudarshan/Github-to-Whatsapp-Push-Notifier)
Virtual Webinar on 'Reliability Reimagined: How SREs spearhead competitive CX'
Tags: sre, devops, monitoring, oncall
Published: 2021-11-19 12:31:50

Topic - **"Reliability Reimagined: How SREs spearhead competitive CX"**
Date: **9th Dec, Thursday**
Time: **10:00 AM PST**
Hosted by: **[DNX Ventures](https://www.linkedin.com/company/dnxventures/) in collaboration with [Squadcast](https://www.linkedin.com/company/squadcast/).**

Keynote speaker and industry expert - [Salim Virji](https://www.linkedin.com/in/lasagnaboy/), Sr. SRE at Google along with [Biju Chacko](https://www.linkedin.com/in/bijuchacko/), VP of Engineering at Squadcast will be sharing their thoughts on how practising Site Reliability Engineering can effectively improve Customer Experience.

The second half of the session will be a thought leadership panel with speakers and [Eva Nahari](https://www.linkedin.com/in/ACoAAAAQSIYBuuI53xUqLCp4Pmh1oAh2Shpi-p0), Principal at [DNX Ventures](https://www.linkedin.com/company/dnxventures/), discussing methods and practices on how organizations can achieve competitive CX by leveraging SRE.

Register here: [https://lnkd.in/dTxj_K-v](https://lnkd.in/dTxj_K-v)
Everything You Need to Know About Blazor Kanban Cards
Tags: blazor, dotnet, webdev, csharp
Published: 2021-11-19 12:15:54

Learn how to work with cards in the Syncfusion [Blazor Kanban component](https://www.syncfusion.com/blazor-components/blazor-kanban-board?utm_source=social&utm_medium=socialmedia&utm_campaign=backlink_promotion&ref=dev.to). You will learn about a few card options like setting card headers, content, and the left border color. 

Product Overview: [Blazor Kanban Component](https://www.syncfusion.com/blazor-components/blazor-kanban-board?utm_source=social&utm_medium=socialmedia&utm_campaign=backlink_promotion&ref=dev.to)

Download an example from GitHub: https://github.com/SyncfusionExamples... 

Refer to the following documentation to learn about Blazor Kanban cards: https://blazor.syncfusion.com/documen...

 Check out this online example of Blazor Kanban cards: https://blazor.syncfusion.com/demos/kanban/card-template

 Watch the following video to customize the Blazor Kanban cards using templates: https://www.youtube.com/watch?v=PjTgX... 

Watch the following video to get started with a Blazor WebAssembly app and add Syncfusion Blazor components to it: https://www.youtube.com/watch?v=zKU58...

{% youtube fRjpmWxV6ao %}
How to test API with Golang.
Tags: test, api, integration
Published: 2021-11-19 12:13:32

Hi there!

I needed to test a few requests I do in my API and then I will show to you how I did that.

First things first, you need to create an application and a file with routes:

`main.go`
```golang
package main

import (
	"net/http"

	"devto.com/v1/src/router"
)

func main() {
	/// Start server with Routes
	http.ListenAndServe(":3333", router.Routes())
}
```

`router\router.go`

```golang
package router

import (
	"net/http"

	"github.com/go-chi/chi"
	"github.com/go-chi/chi/middleware"
)


func Routes() *chi.Mux {
	r := chi.NewRouter()
	r.Use(middleware.Logger)
	r.Use(middleware.Recoverer)

	r.Get("/info", func(w http.ResponseWriter, r *http.Request) {
                w.WriteHeader(http.StatusOK)
		w.Write([]byte(":)"))
	})

	return r
}
```

Then we're gonna make our test for that request called `info`. 


`tests\integration\info_test.go`
```golang
package integration

import (
	"net/http"
	"net/http/httptest"
	"testing"

	"devto.com/v1/src/router"
)

func TestInfoRequest(t *testing.T) {
	// Set up a new request.
	req, err := http.NewRequest("GET", "/info", nil)
	if err != nil {
		t.Fatal(err)
	}

	newRecorder := httptest.NewRecorder()

	router.Routes().ServeHTTP(newRecorder, req)

	statusCode := 200
	if newRecorder.Result().StatusCode != statusCode {
		t.Errorf("TestInfoRequest() test returned an unexpected result: got %v want %v", newRecorder.Result().StatusCode, statusCode)
	}
}
```

That's all! I hope it helps you to get your integration tests working.