teleren/devto huggingface dataset:
Paper Kit 2 Angular - Free Template
Tags: webdev, angular, opensource
Published: 2022-01-29 08:58:13

---
title: Paper Kit 2 Angular - Free Template
published: true
description: Paper Kit 2 Angular is a free Bootstrap 4 UI Kit with pale colors, beautiful typography built for Angular 11 - provided by Creative-Tim.
tags: webdev, angular, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2bqyv31npv8tbh8v7qt.jpg
canonical_url: https://www.admin-dashboards.com/paper-kit-2-angular-free-ui-kit/
---
Hello Coders!

This article presents an `open-source` **Angular UI kit** crafted and released for free by `Creative-Tim`. [Paper Kit 2 Angular](https://www.creative-tim.com/product/paper-kit-2-angular?AFFILIATE=128200) is a free Bootstrap 4 UI Kit with pale colors, beautiful typography built for Angular 11. The product can be downloaded from Github and used for commercial projects or eLearning activities.

> `Thanks for reading!` Content provided by [Admin Dashboards](https://www.admin-dashboards.com/) 

- 👉 [Paper Kit 2 Angular](https://demos.creative-tim.com/paper-kit-2-angular/#/home?AFFILIATE=128200) - LIVE demo
- 👉 [Paper Kit 2 Angular](https://www.creative-tim.com/product/paper-kit-2-angular?AFFILIATE=128200) - product page
- 🎁 More [Free Templates](https://bit.ly/3wd5D25) provided by `Creative-Tim`

---

**Paper Kit 2** is built on top of Bootstrap, so it fully supports it. Most of the elements from the framework are re-designed to resemble sheets of paper and color pastels. 

--- 

> *Disclosure* - **This post contains affiliate links**. 

If you use these links to buy something (no additional cost to you) I may earn a commission, product, or service. **Thank you!**

---

**Beautiful Components** - All the components are designed to look great together, following the same design pattern. Any elements that is vital to code a web project is already here, fully coded. Transitions, shadows, colors, they all resemble the flow you would have using pieces of paper.

**Paper Kit 2** contains some pages already designed and implemented. Here is the list with the pages available and components.

---

> `Paper Kit 2 Angular` - Team Cards

![Paper Kit 2 Angular - Team Cards.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5a3fe8f85u73yxc53q8.png)

--- 

> `Paper Kit 2 Angular` - Features Component

![Paper Kit 2 Angular - UI Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nuhtpi4pvrxrlwr7kzx.png)

---

> `Paper Kit 2 Angular` - Login Page

![Paper Kit 2 Angular - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kg3sxlfkaq5l5xy4jgs.png)

---

> `Thanks for reading!` For more resources, feel free to access:

---

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and **React**
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products
Test
Published: 2022-01-29 08:56:35

```
 if(token){
        jwt.verify(token, config.secret, (err, payload) => {
            if(err){console.log(err.message)
            res.redirect('/user/login')}
            else{
                console.log(payload)
                next()
            }
        })
    }else{
       
        res.redirect('/user/login')}
    }
```
A Fast and Portable PSP Emulator
Tags: c, cpp, opensource, gamedev
Published: 2022-01-29 08:51:03

## [PPSSPP](https://github.com/hrydgard/ppsspp) - a fast and portable PSP emulator
<span><strong><i class="fa fa-star">Star 6.9k</i> <i class="fa fa-eye">Watch 477</i> <i class="fa fa-code-fork">Fork 1.7k</i></strong></span>


Author: **Henrik Rydgård**

Originally released under the GPL 2.0 (and later) in November 2012

[Official website](https://www.ppsspp.org/)

[Discord](https://discord.gg/5NJB6dD)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stizfrzqxcfklkgysw66.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4ctmk7dhfd7r2aroc55.jpeg)

No BIOS file required to play, PPSSPP is an "HLE" emulator. Default settings balance good compatibility and speed.

To contribute, see [the development page](https://www.ppsspp.org/development.html). Help testing, investigating, or fixing is always welcome. See the [list of issues](https://github.com/hrydgard/ppsspp/issues).

For the latest source code, see [our GitHub page](https://github.com/hrydgard/ppsspp).

For build instructions and other development tutorials, see [the wiki](https://github.com/hrydgard/ppsspp/wiki).

If you want to download regularly updated builds for Android, Windows x86 and x64, proceed to this [page](https://buildbot.orphis.net/ppsspp/)

For game compatibility, see [community compatibility feedback](https://report.ppsspp.org/games).
15Five's response to the Log4J RCE
Tags: security, devops
Published: 2022-01-29 05:55:21

When we learned about the [Log4j RCE](https://www.theguardian.com/technology/2021/dec/10/software-flaw-most-critical-vulnerability-log-4-shell) in early December we quickly patched our servers, working on the weekend the day after the CVE was reported to get it done ASAP before hackers could strike. 

We started by escalating the incident to our security officer to get the appropriate attention on it. He immediately stopped the vulnerable server to prevent any exploits. This gave us time to do a thorough review of our services for use of Log4j. We used https://www.techsolvency.com/story-so-far/cve-2021-44228-log4j-log4shell to see what services were affected. Fortunately, only the aforementioned server was affected.

Updating the server was easy thanks to Docker. A quick increment to the tag version and a run of Ansible was all it took. Fortunately our other software was unaffected, so that was all the work needed. In less than a day the server was back online.

To verify that Log4j no longer affected us we used https://log4j-tester.trendmicro.com, which reported a clean result. Problem solved! 🎉

Lessons learned:
* I learned about the Log4J vulnerability via Reddit. Therefore, browsing Reddit has a business purpose; learning about security vulnerabilities. That's totally what I'm doing on there. Any [adorable cat gifs](https://imgur.com/XRBCL) on my screen is 100% related to security.
* You have more vendors and packages than you realize. When you see a vulnerability, think carefully about what it might affect.
* Containerization is good for security not just because it isolates attacks but also because the ease of updating makes attack response fast.
8 unexpected tips for remote workers
Tags: remote, tips, team
Published: 2022-01-29 08:26:10

As a manager of a team of 8 developers and working in a full-remote company across the globe, I share here a list of simple yet useful tips to make remote work more efficient.

👤**Use profile pictures**

In all the tools you're using, use a picture of you as a profile picture. Do not leave a default one or do not use unrelated content. It helps the team members know each other and remembering that we are all humans after all...

🖼️**Post personal photos** of things you are doing out of work. Show your pets, family members, how your surroundings look like, outdoor activities... It might seem weird at first, but it is very appreciated and commented. Use appropriate channels and the right frequency (once a week?).

⌨️**Learn to type fast**

Written communication is so omnipresent in remote teams that fast-typers deal better with team work. Expressing ideas will be a lot easier if you can type fast. If it's not your case, don't despair and use train regularly with tools like [kebr](https://www.keybr.com/).

🙌**Use emojis**

They seem unprofessional at first, but they are a premium artefact to have rich remote conversation. Sometimes an emoji is just what you need to react to an assertion. Remote teams use emojis as a second, and subtle, language.

📹**Use your video** in all meetings, at least for the first and the last minutes. Every meeting is an opportunity to connect to others and show how you look today. We all need this to work together! People deactivating it are suddenly more distant and can alter a team spirit after a while.

⏰**Be punctual**

Respect scrupulously meeting end and start times. It is frustrating to wait for someone in front of a screen. Being on time is more respectful and more efficient than ever.

📅**Reduce the default meeting length**

Remote meetings are more energy-consuming than their physical counterpart. They can be more frustrating as well. Use 20 or 30 minutes as the default duration. 40 minutes for long meeting and 1 hour for exceptionally long meetings.

🌴**Expose your break times**

Personal and professional spheres are more porous than ever. Indicate in your calendar your availability zones and make clear when you won't be working (beginning and end of a regular day, breaks, focus times...). This will reduce your stress and liberate a lot of positive energy.

Happy remote work! 🎉
Open Source File transfer Tool
Tags: opensource, linux, tooling, github
Published: 2022-01-29 08:24:20

## [croc](https://github.com/schollz/croc)
<span><strong><i class="fa fa-star">Star 18.3k</i> <i class="fa fa-eye">Watch 230</i> <i class="fa fa-code-fork">Fork 802</i></strong></span>


`croc` is a tool that allows any two computers to simply and securely transfer files and folders. AFAIK, croc is the only CLI file-transfer tool that does all of the following:
- allows **any two computers** to transfer data (using a relay)
- provides **end-to-end encryption** (using PAKE)
- enables easy **cross-platform** transfers (Windows, Linux, Mac)
- allows **multiple file** transfers
- allows **resuming transfers** that are interrupted
- local server or port-forwarding **not needed**
- **ipv6-first** with ipv4 fallback
- can **use proxy**, like tor

[Author Blog](https://github.com/schollz/croc/blob/master/src/install/customization.gif).

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

## License
MIT
Friendly Advice from A Software Engineering Graduate to New and Prospective Students
Published: 2022-01-29 08:01:52

To all aspiring and actively achieving their goals of becoming a software engineer today, here's a shout out of support and encouragement with friendly recommendations from someone who has shared your enthusiasm for over a year as a student and as a webmaster. On behalf of our community of learners, teachers, tinkerers, and more, welcome! I hope this will help you navigate what can occasionally feel as choppy, difficult to navigate seas in our ever-exponentially-expanding world of new technologies and abstract concepts and ideas leveraged through our machines:

-Be proactive. Whether studying a new language, framework, and/or related concept, etc., creating, updating, and/or maintaining your own contributions to the seemingly innumerable lines of code that have offered greater simplicity and efficiency to people the world over, maintain a thirst for knowledge and for results. A desire and willingness to learn and progress is not only highly desirable, but intrinsic to being able to understand systems and abstract them away via code, and thus essential. As a self-paced/self-study full-stack software engineering student at the Flatiron School, my success was directly tied to my enthusiasm and willingness to immerse myself in the course material; at times, exhaust my ability to ask questions and search for answers related to topics, and learn about new and emerging practices that built on already fine-tuned lesson material. 

-Be humble and build from a solid foundation. Break down projects and problems to simple, easy to execute steps and solutions, and continue building up from there. Flatiron exemplifies and validates this approach in training and employing thousands of software engineers by beginning with fundamental concepts such as DRY code, CRUD, MVC structure, RESTful routing, and coding with language syntax, then building on these and showing how they incorporate into newer frameworks, from Ruby, to Sinatra, to Ruby on Rails, to fullstack Ruby on Rails and JavaScript, to fullstack Ruby on Rails and ReactJS.
Autosave For Excel Files
Tags: beginners, testing, tutorial, test
Published: 2022-01-29 07:44:34

Read this article to find out how to restore the original condition of an Excel document with the autosave function if there were some editing issues. A file accidentally edited or deleted can spoil your day, especially if there is no backup copy. Automatic data backup in Excel will boost security for your files by saving the previous version of a file automatically.

AutoBackup will create a copy of the spreadsheet you are working in when it is saved. In case you make some changes to the original spreadsheet, save them, and then suddenly change your mind, you will always have the opportunity to open the file backup. Every time you save the main spreadsheet file, AutoBackup will update the backup file to the previous version of this spreadsheet.

To have everything confgured, open an Excel spreadsheet. After that:

YouTube: {% youtube _5jWHA0ow74 %}

Go to the tab File – Save As

![Image description](https://hetmanrecovery.com/pic/blog/a142/saveas-in-excel.jpg)

Go to the folder OneDrive: Personal.

![Image description](https://hetmanrecovery.com/pic/blog/a142/save-onedrive-excel.jpg)

Click Tools and choose General Options….

![Image description](https://hetmanrecovery.com/pic/blog/a142/file-saving-in-excel.jpg)

Check the box for Always create backup and click OK.

![Image description](https://hetmanrecovery.com/pic/blog/a142/excel-general-options.jpg)

Hit Save in the document save window.

![Image description](https://hetmanrecovery.com/pic/blog/a142/excel-file-saving-confirmation.jpg)

From now on, every time you edit the spreadsheet file and save it, the backup file will be updated to the previously saved spreadsheet file.

If data backup for Excel was not configured at the time when a file was lost or deleted, you can always use one of the tools for restoring Excel spreadsheets or [bringing back Microsoft Office documents](https://hetmanrecovery.com/deleted-word-excel-documents-recovery-software).
MNIST Digit Classification 			
Tags: tutorial, machinelearning, deeplearning, programming
Published: 2022-01-29 07:34:54

MNIST dataset is a set of 70,000 small images of digits handwritten by high school students and employees of the US Census Bureau. Each image is labeled with the digit it represents.

This set has been studied so much that it is often called the *"hello world"* of Machine Learning.

> The idea is to feed through the pixel values to the neural network and then have the neural network output, which number it actually thinks that image is.

**1. Load the data**

Now we're going to import dataset. MNIST dataset consists of 28 * 28 sized unique images of handwritten digits 0-9. Now, we are going to unpack the data to training and testing set.

**2. Normalization**

The data seems to vary from 0 to 255 for pixel data. So, we want to scale the data between 0 and 1 and that just make it easier for the network to learn.

**3. Building model**

It is going to be Sequential type of model. It's a feed forward like the image we drew. The first layer will be the input layer. We want the image to be flat and not in multidimensional array. Now, we are going to have two hidden layers with 128 neurons and relu activation and the output layer will consist of 10 classifications and softmax activation.

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

**4. Training model**

Now we need to "compile" the model. This is where we pass the settings for actually optimizing/training the model we've defined.
Next, we have our loss metric. Loss is a calculation of error. A neural network doesn't actually attempt to maximize accuracy. It attempts to minimize loss. Again, there are many choices, but some form of categorical crossentropy is a good start for a classification task like this.

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

**5. Making predictions**

Finally, with your model, you can save it super easily and make predictions.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m54o2d96mo0csieg1yh2.png)
Install Jenkins on Debian 11 Bullseye
Tags: jenkins, debian, linux
Published: 2022-01-29 07:24:59

## What?

A quick tip for using Jenkins LTS 2.319.2 and up on Debian GNU/Linux 11 Bullseye (it may work for other Linux systems too like CentOS, RedHat, Fedora, ArchLinux and Gentoo).

## Why?

Because you can have your own TravisCI, Vercel or Netlify and Jenkins is a good start.

## How?

* Create a file at /etc/jenkins/jenkins.conf with the content

```
JENKINS_WAR=/opt/jenkins/jenkins.war

JENKINS_HOME=/opt/jenkins/home

JAVA_ARGS="-Djava.awt.headless=true \
  -Djava.net.preferIPv4Stack=true \
  -XX:+AlwaysPreTouch \
  -XX:+UseG1GC \
  -Xms1024m \
  -Xmx1024m \
  -Xss16m \
  -Xlog:gc*=debug:file=gclog.log:utctime,level,tags:filecount=9,filesize=1M"

JENKINS_ARGS="--httpPort=8080 \
  --logfile=/var/log/jenkins/jenkins.log \
  --useJmx"
```

* Then a file at /lib/systemd/system/jenkins.service with the content:

```
[Unit]
Description=Jenkins
After=network.target

[Service]
Type=simple
User=jenkins
Group=jenkins
EnvironmentFile=/etc/jenkins/jenkins.conf
ExecStart=/usr/bin/java $JAVA_ARGS -jar $JENKINS_WAR $JENKINS_ARGS
WorkingDirectory=/opt/jenkins/home
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
```

* Create the jenkins user with the jenkins group

* Create the /opt/jenkins/home and /var/log/jenkins directories with jenkins user as the owner

* Download Jenkins war from https://www.jenkins.io/download/ to /opt/jenkins/jenkins.war (it's the Generic Java Package .war link)

* Ensure you have Java installed and start Jenkins with the command `systemctl start jenkins`

* Go to http://localhost:8080/ and start building !!

## Where?

Tested on Debian 11 Bullseye arm64 and OpenJDK 11 in and AWS m6g.large (it may work also locally and with amd64 chips using newer version of Java like Java 17)

Based on:
https://www.jenkins.io/doc/book/managing/system-properties/
https://www.jenkins.io/doc/book/installing/initial-settings/
https://github.com/jenkinsci/winstone#command-line-options
https://gist.github.com/karnauskas/aca138bb8338689a178e
Why doesn't element go through to the top of the parent even though it setted absolute top: 0;?
Tags: css
Published: 2022-01-29 07:19:10

## Solution
When we do that most of time the element goes to the top of the page. But why?

When we write...

```css
.element{
  position: absolute;
}
```


...it won't happen.

But when we add `top: 0;`

```css
.element {
  position: absolute;
  top: 0;
}
```
It'll continue until it finds a parent element that setted as ` position: relative;`. So we should limit the element.

```css
.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
}
```

## Sources
I came across with this information on [a video (second: 1:53:35)](https://youtu.be/G0VdeLFNKIU?t=6815)
Channel: [Coder Coder](https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ)

You can also look: [https://stackoverflow.com/questions/3830486/absolute-position-is-not-working](https://stackoverflow.com/questions/3830486/absolute-position-is-not-working)

And if you want learn more about positions in CSS you should take a look that:
[CSS-Tricks.com position](https://css-tricks.com/almanac/properties/p/position/)
How to delete all commits history in GitHub?
Published: 2022-01-29 07:10:16

Checkout to main branch
`git checkout --orphan latest_branch`

Add all the files from main branch
`git add -A`

Commit the changes
`git commit -am "Initial commit"`

Delete the main branch
`git branch -D main`

Rename the current branch to main
`git branch -m main`

Force update your GitHub repository
`git push -f origin main`
PHP Promotional Application
Published: 2022-01-29 06:49:40

#Introduction

[TLTR: Feel free to get the source code.](https://github.com/mwpenn94/jason-malabute-promo)

##App Design
The overall plan for this application was to design a web site for light, instant deployment, leaving opportunity to easily maintain and update the codebase for simple functionality, lightly scale functionality with the same base, or replace the original code with a more component-friendly structure through Rails React or others depending on intended future project goals. 

Based on the requirements, the app allows users CRUD functionality allows users with necessary permissions CRUD functionality for form generation and customer feedback.

Similar to large scale counterparts, it is designed for straightforward use with minimal explanation required for the user.
JavaScript recurring timers with setInterval
Tags: javascript, beginners
Published: 2022-01-29 06:46:31


Now that we have a good understanding of [how JavaScript setTimeout works](https://daily-dev-tips.com/posts/using-settimeout-in-javascript/) to delay a function.

Let's look at how we can perform an action every x time.

This can be super helpful for animating stuff or checking a data feed.

## JavaScript setInterval function

Let's look at how this will work in its most basic form.

```js
setInterval(() => {
  // Run every 100 milliseconds
}, 100);
```

This function will run every 100 milliseconds.

Often you might want to achieve this to run only until a specific condition is met.

We can clear the interval by using the `clearInterval`.

```js
const timer = setInterval(() => {
  // Do something
}, 100);

clearInterval(timer);
```

Or you can even stop it from inside the interval.

```js
const timer = setInterval(() => {
  if (condition) {
    clearInterval(timer);
    return;
  }

  // Execute the function
}, 100);
```

This is a great way to stop a particular action from running.

## Attention points

When you use setInterval, it does not care how long your function runs.

Meaning it will always start a new loop at the set time.

For example, when you use it to animate, but the animations have different lengths, it might cause weird side-effects where the following animation will start, and the first one only just finished.

![setInterval example](https://cdn.hashnode.com/res/hashnode/image/upload/v1643539173110/z2co0lG0X.jpeg)

As you can see, each function can have its own time to execute.

If you find yourself needing them to wait a specific time, using `setTimeout` might be a better solution.

We can set up a recursive setTimeout function.
That is a function that calls itself once it's done doing its thing.

```js
const coolFunc = () => {
  // Execute the function

  setTimeout(coolFunc, 100);
};

setTimeout(coolFunc, 100);
```

Which will result in the following flow.

![Set Timeout recursive](https://cdn.hashnode.com/res/hashnode/image/upload/v1642656276197/IwYIM-cwX.jpeg)

If you are keen to see some more real-world examples, here is a list of articles using them.

- [Fading images with JavaScript](https://daily-dev-tips.com/posts/fading-images-using-javascript/)
- [Creating a song in JavaScript](https://daily-dev-tips.com/posts/public-solving-creating-a-song-with-javascript/)
- [Countdown clock](https://daily-dev-tips.com/posts/vanilla-javascript-countdown-clock/)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)