teleren/devto huggingface dataset:
Getting Started with Vercel
Published: 2022-03-14 22:17:22

### What is Vercel?
Vercel is a functions as a service architecture that allows developers to deploy websites instantly. It takes away all of the headaches associated with building and deploying a site (*cough cough GitHub), for example the CI/CD configuration needed to deploy sites.

## Setting it up
First you want to create account with Vercel and link your GitHub account to it so that you can import your GitHub repositories as projects.
![Vercel project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u4uqxq2j43kkgwyam30.png)

You will also want to download Vercel onto your machine using this line of code in terminal
```
npm i -g vercel
```

## Building and Deploying
I cloned this [repository](https://github.com/heyMP/ist-vercel-demo) onto my machine and created a `.env` file. My file contained these line items:
![env file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmn97xprrzhbffzahqbi.png)

Back in Vercel, you will update the settings in the project as follows. This will ensure that your project is being outputted to the correct folder (could also be "_site" for you)![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qkm8lwyrlqifetmjmo2.png)

You are now ready to click deploy! My site looked like this![deployed site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzc49c5aejhs3iw18deo.png)

## Publishing my Projects
Now that I am familiar with Vercel, I used it to deploy some of the repositories I created with 11ty.

### 1. 11ty Hello World Repo
https://github.com/abbeylyle4/11ty-hello
*Note: While this site shows a 404 error, Vercel deployed this site correctly. It is a problem with our original page :)
![hello-world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k87xk6d542sxukdybo5k.png)

### 2. 11ty Cloned Blog Repo
My repo: https://github.com/abbeylyle4/11ty-repo
Cloned repo: https://github.com/11ty/eleventy-base-blog
![cloned blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjr00c5sz5lpvd29cdqb.png)

### 3. 11ty HAX Repo
https://github.com/abbeylyle4/11ty-hax
![hax blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pty2cp3d6u64rlmb53ui.png)
 
Thanks for taking a look at my post, good luck using Vercel with your own projects! This class lab was partly in conjunction with Michael Potter from RedHat. Some of his work with web components and front-ends can be found [here](https://dev.to/heymp/micro-frontends-by-example-4ii).
Mailcatcher for beginners
Tags: smtp, mailcatcher, programming, docker
Published: 2022-03-14 21:46:29

When in need to troubleshoot email messages use Mailcatcher.

Mailcatcher is a simple SMTP server that you can run locally or remotely intercept emails during test and development phases.

Once captured by Mailcatcher emails can be rendered from within their web interface and exported to be opened in any mail client.

Mailcatcher web interface is refreshed in realtime when your app is using websocket otherwise every 30 seconds.

Mailcatcher is language agnostic and simple to use as you just have to redirect SMTP traffic to Mailcatcher smtp port 1025.

So, let's say that you have an application that uses an external SMTP provider and that you have Mailcatcher running locally, you just need to replace your third party provider by smtp://127.0.0.1:1025 and done!

To access Mailcatcher web interface, simply point to http://127.0.0.1:1080.

If for any reason your instance of Mailcatcher is using a different IP address, just adapt the above examples.

Over the years, I found it more convenient to not install Mailcatcher on my computer, but have it running in a docker image.

Here are few ways to have it up and running:

* `docker run --rm -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher` Will delete the image once you are done using it. This could be interesting for a test environment.
* `docker run -d -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher` Will launch the image as a daemon.
* `docker run -it -p 1080:1080 -p 1025:1025 --name mailcatcher stpaquet/alpinemailcatcher` Will launch the image in interactive mode

**Useful links:**
Mailcatcher homepage: [mailcatcher.me](https://mailcatcher.me)
Dockerfile and Docker Compose: [https://github.com/spaquet/docker-alpine-mailcatcher](https://github.com/spaquet/docker-alpine-mailcatcher)
Dockerhub: [https://hub.docker.com/r/stpaquet/alpinemailcatcher](https://hub.docker.com/r/stpaquet/alpinemailcatcher)

Longer article can be found on Medium with Docker Compose basic configuration and more examples:  https://medium.com/@spaquet/mailcatcher-to-the-rescue-4ba438dc98c2
16 Data Analytics Buzzwords You Need To Know
Tags: database, datascience, analytics, sql
Published: 2022-03-14 21:28:31

Photo by [Romain Vignes](https://unsplash.com/@rvignes?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

**Analytics Engineer** = A BI Engineer who uses dbt

**Data Mesh** = We tried an EDW and it was taking too long so we went back to the siloed data approach but now we opened it up to the entire company

**Data Quality Monitoring** = A bunch of automated SQL statements

**Low Code/No Code** = Click, click, click, shoot how do I configure the underlying environment. Forget it, I am going back to Python

**Self Service Analytics** = Self-service after a data engineer or BIE spends 3 hours writing the query

[Modern Data Stack ](https://seattledataguy.substack.com/p/the-baseline-datastack-going-beyond?utm_source=url)= Everything is SQL now, No more excel

**Source Of Truth** = I used to trust this, until I learned about Truth V2

**Reverse ETL** = LTE

**Data Lineage** = Some unmaintained tool that was accurate once

**Data Warehouse** = it's just an analytical database where you can drop all your data randomly and maybe spend some years later to try to model them

**BI For BI Teams** = Analyzing your analysis tools

**Democratizing Data** = Let's give everyone access and see how many competing narratives we can get from the same data

**Data Observability** = Oh look we can parse Snowflake logs

**Data Scientist** = a Schrodinger's cat of: an analyst, or a Stats PhD

**Lakehouse** = We couldn't setup a Data Lake so we salvaged whatever we could and told our users it looks now like the previous DWH.

**Data Lake** = File server we just dump all our files in.

Special thanks to [mehdio](https://medium.com/u/d9259b41277a?source=post_page-----b6eb6d925ee4-----------------------------------), [Galen B](https://medium.com/u/a023a229ec8d?source=post_page-----b6eb6d925ee4-----------------------------------), [Ethan](https://www.linkedin.com/in/ethanaaron/), [Lauren](https://www.linkedin.com/in/laurenbalik/) and several others who all played a vital role in crystallizing these concepts.

Read/Watch More Videos On Data And Data Analytics Below:

[3 SQL Interview Tips For Data Scientists And Data Engineers
](https://dev.to/seattledataguy/3-sql-interview-tips-for-data-scientists-and-data-engineers-5hm6)

[5 Tips On How To Become a Better Data Analyst
](https://dev.to/seattledataguy/5-tips-on-how-to-become-a-better-data-analyst-4geg)

[How To Set Up A Successful Data Analytics Team](https://www.youtube.com/watch?v=qgSqLh_mhXE)
How to write and save a PDF file in Android using Intents
Tags: android, tutorial, kotlin
Published: 2022-03-14 20:21:15

I remembered when I wanted a user to save a pdf file and programmatically save “a decoded base64” data to it. It was quite challenging as there were limited documentations on the topic and other articles and blog posts I came across happened to be a bit outdated.

> What is Base64? - [Read about it here](https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-forhttps://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for)

In the code snippet below. I used implicit intent to get the file manager to show list of directories, the user can save the file and then OutputStream to write to the file in that directory.

```
class SaveDocumentFragment : Fragment(R.layout.fragment_save_document) {

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

// Set your button
view.findViewById<Button>(R.id.button)?.setOnClickListener {

           
Toast.makeText(requireContext(), "Please save the pdf", Toast.LENGTH_SHORT).show()

      //        Save the pdf using an intent
        val intent = Intent(Intent.ACTION_CREATE_DOCUMENT).apply {
            addCategory(Intent.CATEGORY_OPENABLE)
            type = "application/pdf"
            putExtra(Intent.EXTRA_TITLE, "recovery.pdf")

        }
        startActivityForResult(intent, CREATE_PDF_FILE)      
        }    }
}


// Call the `onActivityResult` to get the directory the user saved the file
 
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (resultCode == Activity.RESULT_OK && requestCode == CREATE_PDF_FILE) {

            var pdfPath = data?.data

            val outPutStream: OutputStream? = data?.data?.let { context?.contentResolver?.openOutputStream(it) }

// generatedPDFAsBase64 should be the data in the form of a Base64 you want to write to the file.

outPutStream?.write(Base64.decode(generatedPDFAsBase64, Base64.NO_WRAP))
            outPutStream?.flush()
            outPutStream?.close()
        }

    }

companion object {
        private const val CREATE_PDF_FILE = 190
    }
```
ZIP PASSWORD CRACKING USING JOHN THE RIPPER IN KALI LINUX
Published: 2022-03-14 20:18:16


Hello,today am going to show you how to crack password protected zip files in kali linux.

Kali linux is pre installed with password cracking tools namely:

1.John the ripper
2.Fcrackzip utility
3.Wordlists
We’ll focus more on john the ripper which is pre-installed in most unix operating systems.
However if your linux operating system lacks this tools,you can install or update the necessary packages with the following commands:

`$sudo apt update`

`
$sudo apt install john fcrackzip wordlists `


John the ripper will use its own wordlist located in the /user/share/john/password.lst to crack the password.you can also locate all the wordlists in your system by typing the following command:
`$locate wordlist`


**Step 1:create a password protected zip file**
The only other thing needed to start is a password protected zip file. 
Follow the steps:
Create a text file add some text and name it say hacker.txt.
Open the terminal in the directory and type the following command
`$zip -password 12345678 hacker.zip hacker.txt`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6e7ua8ucs0kodh5ll3v.png)

The command creates a zip file with the password of your choosing after the word password in the shell command above.
Replace the file names and paths to your own.

**Step 2:get the password hash**
To get the password hash to be cracked, we need to enter the command:

`$zip2john hacker.zip
`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fql8dcvtkbaly1uke9j.png)

**Step 3:put the password hash in a text fi**le 
Type the following command :
`$zip2john hacker.zip > hash3.txt`

Followed by:
`$John hash.txt`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyq7voz4se1yhaacnn1c.png)

Sometimes you may need to customize or create your own wordlist or use a different wordlist the command follows the following format 

$john –wordlist= the wordlist path saved hashes
I.e
`$john --wordlist= /usr/share/wordlists/rockyou.txt hacker.txt`

The time taken to crack each password varies with the strength of the password
One color palette a day with example. - 007
Tags: uiweekly, design, webdev
Published: 2022-03-14 20:17:03

www.colorsandfonts.com

## Color and typography for Web Developers and Digital Designers.

From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br5ualtyr7jeiwqu7c25.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bslmcgd695sm05pe3iwp.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiezmpi63iowme2ddqrn.png)

You will find them here, [Dribbble](https://dribbble.com/MichaelAndreuzza), [Instagram](https://www.instagram.com/apes_of_london/), [Pinterest](https://pin.it/w18zxbr) and [Twitter](https://twitter.com/Mike_Andreuzza).

Since 2017 - 2022
Deploying Static Website in Apache2.4
Tags: cloud, productivity, devops, tutorial
Published: 2022-03-14 20:08:58



## Creating a Static Website and Getting Working Directory Path

A Static website is a simple content website that runs without a server, just processing the contents added on the website, generally created using HTML, CSS, and JavaScript.

For quickly deploying we will just add a simple index.html HTML file and configure it in the virtual host configuration.
We will change the default index.html page of the apache webserver to add  

Open the terminal change directory to `/var/www/html/` 
remove the index.html and create a new  index.html file.

**Remove the existing index.html**
```
$ cd /var/www/html
$ rm -r index.html
```

**Create a new index.html and edit it**

```
$ nano index.html
Or 
$ touch index.html

Start VIM 
$ vi index.html
```
Content of index.html
```
<!DOCTYPE html>
<html>
    <head>
        <title>My First Website</title>
    </head>
    <body>
        <p>Hello World!My First Site Deployed On Apache2.4 Webserver</p>
    </body>
</html>
```


## Configuring virtualhost

Open the directory `/etc/apache2/`

**Open the website configurations inside `/etc/apache2/sites-available`, if setup custom website - `/sites-available/my-site.conf`

Or open the default configuration under 
`/etc/apache2/sites-available/000-default.conf`
and update the `ServerName` to whatever domain you want or for testing it locally change it to `localhost`

**change the Root Directory of the contents**
here our root directory where our contents are stored is `/var/www/html/`
Update it to 
`DocumentRoot /var/www/html`

> Final Configuration will look like this
```
<VirtualHost *:80>
        ServerName localhost

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html

        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>
```


## Testing and deploying a static website

After adding configurations to VirualHost, check the configurations for any warning or error using this command. 

```
sudo apachectl configtest
```
**Reload and Restart the server**
```
# Reload
$ sudo service apache2 reload

# Restart
$ sudo service apache2 restart
```

**Test the live server with updated content using Curl in terminal or opening the localhost in your local system.

```
$ curl localhost:80
```
Importing data by CSV | SQL
Tags: sql, bulkinsert, csv, dataintegration
Published: 2022-04-05 17:48:28

---
title: Importing data by CSV | SQL
published: true
date: 2022-03-14 20:01:33 UTC
tags: SQL,BULKINSERT,CSV,DataIntegration
canonical_url: 
---

Let’s continue improving our **SampleTest** database, today by creating a new table and importing data to it by using a CSV file.

The new table will store the country details that we will use to relate with our customer table, already created on the **[post](https://dev.to/toolgbrmaker/create-a-table-sql-1hh4)**.

Schema creation…

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-5.png?w=526)
_Country table creation_

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-6.png?w=402)

Now, that we have our table schema, it’s time to import some data, I’ve created a CSV file with the following rows…

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-2.png?w=312)

and to perform the data importation the following script:

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-3.png?w=523)

Above we are invoking a **[Bulk Insert](https://docs.microsoft.com/en-us/sql/t-sql/statements/bulk-insert-transact-sql?view=sql-server-ver15)** for our new table Country and the data used for insertion is the one stored on our CSV file. Afterward, on our With clause we are configurating some settings to be considered during the data reading on CSV file, although I’m considering that the settings are quite easy to understand, I would like to highlight the FIRSTROW, where we are saying that due to our column headers on the file, should only considered the data from the 2nd row on.

Time to see if the data ended as expected…

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-4.png?w=206)

As the last step, let related now this new table with our **[Customer](https://dev.to/toolgbrmaker/create-a-table-sql-1hh4)** table, by **CountryCode** field. For that, we will use the **[ALTER TABLE](https://docs.microsoft.com/en-us/sql/t-sql/statements/alter-table-transact-sql?view=sql-server-ver15)** statement where we’ll add a Constraint, Foreign Key and we’ll referrer for the field we want on table Country.

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-7.png?w=1024)
_Creating Relation_

Time to test this new relation. I’ll now add a row with a non-existent country and see if an error is now invoked as supposed.

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-8.png?w=1024)
_The new relation is now blocking non-existent countries on Country table for the Customer_

Now a test with an existent country…

![](https://toolgbrmaker.files.wordpress.com/2022/03/image-10.png?w=840)

And that’s it. With the above importation, we can easily add data that can be used to relate with our existent table Customer. Time to try by yourself and let me know the results.

Stay safe!
10 essential resources for JavaScript developers
Tags: javascript, webdev, beginners, productivity
Published: 2022-03-14 19:52:09



##[InternetingIsHard](https://www.internetingishard.com/html-and-css/)
Great free lessons on HTML/CSS. I love the design of this!


![Internet is hard screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkbng4ardzf9jqckivhr.png)

---

##[Brad Traversy Design Repo](https://github.com/bradtraversy/design-resources-for-developers)

Has every possible thing needed to design your website in one really handy place. Essential!

---

##[JavaScript the Right Way](http://jstherightway.org/)

Lots of resources and information here. An essential place to start with any topics. 



![the right way screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i32nk2d3jr16n7bin8m3.png)

---


##[JavaScript in plain English](https://javascript.plainenglish.io/)

Great selection of articles about everything JavaScript related. Remember to log in and save your favourite ones!

---


## [GeeksforGeeks](https://www.geeksforgeeks.org/javascript/)

Useful for

- Data Structure and Algorithms
- JavaScript quizzes/interview preparation
- Reference for everything JavaScript related

---

##[Exercism](https://exercism.org/tracks/javascript/exercises)

A great place to uhh exercise your demons with JavaScript(sorry!) or attempt the many coding challenges they have.


![exercism](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3imgx4woxmwh45gyoap.png)

---

##[RegExr](https://regexr.com/)

Want to get better or learn regular expressions, well here is the perfect website to do just that!

---


##[David Walsh](https://davidwalsh.name/)

A great blog website with so much in depth info and some very interesting articles. A wonderful read any time of the day. Read it now!

---


##[Serverless](https://serverless.css-tricks.com/)

Want to be server-less? Then start here. 


![Serverless](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egdus1lylmvr42400a5k.png)

---

##[JSFiddle](https://jsfiddle.net/)

A better version place to online code than codepen. Yeah! I said that!

---
Anymore that you would like to share, then please comment below!
Getting Started with Vercel
Tags: webdev, beginners, programming, tutorial
Published: 2022-03-14 19:16:21

#Vercel
Vercel is a new technology, specifically a FaaS, that is growing fast. It's a platform used to host sites. Vercel is one of the easiest to learn and developers all over are falling in love.

#Functions as a Service
FaaS are a type of services that allow customers to focus on what they are interested in doing (normally managing application functionalities) without having to build or maintain infrastructure they don't know how to use and don't want to take the time to learn. Usually a FaaS is associated with developing and launching an app.

#How to get started with Vercel
1. Set up an Account
On the [Vercel Website](https://vercel.com/) select sign up or login.

2. Link your GitHub
Use the `Continue with GitHub` option to link your accounts.

3. Choose a new project
On the home page, you should see an option to make a new project. 

4. Select a repo to deploy
You should see a list of options from your GitHub because you linked the two. Choose an updated repository to deploy it. I chose an 11ty site I had.
![Vercel Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8rrrpnvyxzwa2fso8r3.png)

5. Configure and Deploy
Change anything you want to and select the `Deploy` button.

6. Congrats!
You should have a working project! It should not be on your dashboard. 
![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9aobcq9fdqnfkhlxo2w.png)
Clicking on it will give you more information.
![More Info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmseys44pdc0o0h9elxc.png)

#IST Vercel Demo
Now that you understand the basics of Vercel, here is how I deployed it using the command line.

1. Clone Repo
I chose this [repository](https://github.com/btopro/ist-vercel-demo) online in order to help us.

2. Set up the repositroy
Use `npm install` and `npm i -g vercel` in order to install all the right dependencies. Start the project with `vercel dev`.

3. Log into Vercel on the command line
This will prompt you to ensure you're logged in. Your projects should now be linked.
ArrayList (Java Collections)
Tags: arraylist, beginners, java, programming
Published: 2022-03-14 19:11:08

Java ArrayList class uses a dynamic array for storing the elements. It is like an array, but there is no size limit. We can add or remove elements anytime. So, it is much more flexible than the traditional array. It is found in the java.util package. It is like the Vector in C++. The ArrayList in Java can have the duplicate elements also. It implements the List interface so we can use all the methods of the List interface here. The ArrayList maintains the insertion order internally.

## Java ArrayList Example :

_Example 1 :_

```
import java.util.*;

public class Array_List {
    public static void main(String[] args) {
        ArrayList<String> list = new ArrayList<String>(); // Creating arrayList

        list.add("James"); // adding object in arrayList
        list.add("John");

        for (int i = 0; i < list.size(); i++) {
            System.out.println(list.get(i)); // printing arrayList
        }

    }
}

//OutPut:
  James
  John

```

_Example 2:_

```
import java.util.*;

public class Array_List {
    public static void main(String[] args) {
        ArrayList<String> list = new ArrayList<String>(); // Creating arrayList

        Scanner scanner = new Scanner(System.in);
        System.out.println("Enter the Lenght: ");
        int number = scanner.nextInt();
        scanner.nextLine();

        for (int i = 1; i <= number; i++) {
            list.add(scanner.nextLine());
        }

        System.out.println(list);

    }
}

```

We can not create an array list of the primitive types, such as int, float, char, etc. It is required to use the required wrapper class in such cases. For example:

```
ArrayList<int> al = ArrayList<int>(); // does not work  
ArrayList<Integer> al = new ArrayList<Integer>(); // works fine  
```