teleren/devto huggingface dataset:
Free Static Web Hosts for Frontend Developers
Tags: css, html, javascript, tips
Published: 2022-01-15 10:26:14

---
title: Free Static Web Hosts for Frontend Developers
published: true
date: 2022-01-15 09:30:31 UTC
tags: css,html,javascript,tips
canonical_url: http://kaeruct.github.io/posts/free-static-web-hosts-for-frontend-developers.html
---

![F-Droid](http://kaeruct.github.io/static-website-code.jpg)

Nowadays it's very easy to publish on the web for free.

There are countless blogging platforms and website creators. But these platforms usually end up controlling your content. Sometimes you cannot even export your own data!

The other extreme is to set up your own server by yourself. Buy a VPS (virtual private server) or a shared hosting somewhere, install a web server, and upload your files. This is a lot of work already! Specially if all you want is to publish a static website.

You already know HTML and CSS, and maybe a bit of JavaScript. You just want a place where you can drop your files and see it on the web!

Here is a list of services that allow you to do that, in no specific order:

## Netlify

[Netlify](https://www.netlify.com/) allows you to drag & drop a zip with your files. You can also connect it to your project from Github, Gitlab or Bitbucket. I use Netlify for a lot of my projects, such as [desk.glitchy.website](https://desk.glitchy.website).

## Vercel

[Vercel](https://vercel.com/new) is very similar to Netlify. They are also the company behing Next.js, so they have many integrations with it. I use Vercel for my [personal website](https://andres.villarreal.co.cr) and for [glitchy.website](https://glitchy.website).

## Surge

[Surge](https://surge.sh/) allows you to easily publish your static website from the command line.

## Github Pages

[Github Pages](https://pages.github.com/) allows you to directly from your GitHub repository. Just edit, push, and your changes are live. [My blog](https://kaeruct.github.io/) is hosted on Github Pages.

## GitLab Pages

[GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) allows you to publish static websites directly from a repository in GitLab.

## Closing Words

With these services, you can host your own static website for free. If having your own domain is important, then you will have to buy one, but that's the only thing you need, as many of these services allow you to use your own custom domain as well.

I recommend you familiarize yourself with the options and not to put all your eggs in one basket. The beauty of static website is that something happens to the provider, you can just copy your files to another one, and you're done! Keep it simple.
Read
Tags: discuss, books, improvement, growth
Published: 2022-01-15 09:17:38

---
title: Read
published: true
description: Read books
tags: discuss, books, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlw4h1685d1d2u8p6cmi.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/read/)._

> If you spend 1 hour a day reading, you'll read more than 60 books in a year (here's the [math that proves that](https://www.nikola-breznjak.com/blog/books/math-behind-reading-30-books-per-year/)). What if you get only 1 actionable insight from each of these books? How much do you think you could improve x (whatever area of your life x represents) in a year from now by investing that 1 hour a day?

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Web Cache Poisoning
Tags: security, webdev
Published: 2022-01-15 09:07:03

Web cache poisoning attacks target the intermediate storage points such as POP servers, load balancers, proxies etc which reside between web servers and client devices.

Instead of passing to the server a request that the CDN already knows its response to (static file), it can return a response immediately to the client and reduce both server load and response time when the cache responds. 

The response caches to avoid wasting time processing requests frequently send to Servers and CDNs (Content delivery networks, Cloudflare for example). 

Web cache poisoning involves two phases:

* Attackers must obtain a response from the back-end server that recklessly contains some kind of dangerous payload. 
* After the successful request, make sure that the response is cached and subsequently served to the intended victims.

Even Though being a known vulnerability, web cache poisoning continues to turn up around the web.

In wide research of numerous websites, including some most popular internet services, security researcher Iustin Ladunca (Youstin) discovered 70 cache poisoning vulnerabilities recently with diverse impacts.

***
*More detailed version along with how you can avoid these vulnerabilities is published at :* [*https://beaglesecurity.com/blog/vulnerability/web-cache-poisoning.html*](https://beaglesecurity.com/blog/vulnerability/web-cache-poisoning.html)
Should Lambda services be built in the cloud (vs. local environment)?
Tags: serverless, aws, cloud
Published: 2022-01-15 09:05:26

When developing for AWS Lambda, if you have to decide between coding on the workstation and doing everything cloud-native, what do you choose? Assuming that the development tools can be of equal quality. What challenges have you faced with each approach?

My colleague wrote [an article](https://blog.mantil.com/local-development-is-not-the-right-choice-for-the-cloud-serverless-world-29fe5bd27d52) about it on Medium.
Angular Module Loading: Eager, Lazy and Preloading😇
Tags: angular, typescript, performance, javascript
Published: 2022-01-15 09:03:46

This Blog will walk through Angular module loading example. A module can be loaded **eagerly**, **lazily** and **preloaded**. 
**Eager** loading is loading modules before application starts. 
**Lazy** loading is loading modules on demand. 
**Preloading** is loading modules in background just after application starts.
In lazy loading and preloading, modules are loaded asynchronously.
The application module i.e. `AppModule` is loaded eagerly before application starts. But the feature modules can be loaded either eagerly or lazily or preloaded.

## Eager loading:
To load a feature module eagerly, we need to import it into application module using imports metadata of `@NgModule ` decorator. Eager loading is useful in small size applications. In eager loading, all the feature modules will be loaded before the application starts. Hence the subsequent request to the application will be faster.

Checkout to know more about the [Eager Loading Modules](https://dev.to/krishna7852/eagerly-load-angular-module-nii).

## Lazy loading: 
To load a feature module lazily, we need to load it using `loadChildren` property in route configuration and that feature module must not be imported in application module. Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster.

Checkout to know more about the [Lazy Loading Modules](https://dev.to/krishna7852/lazily-load-angular-modules-4m64).

## Preloading:
 
To preload a feature module, we need to load it using `loadChildren` property and configure `preloadingStrategy` property in `RouterModule.forRoot`. That feature module must not be imported in application module. When we assign Angular `PreloadAllModules` strategy to `preloadingStrategy` property, then all feature modules configured with `loadChildren`, are preloaded. To preload selective modules, we need to use custom preloading strategy. We should preload only those features which will be visited by users just after application start and rest feature modules can be loaded lazily. In this way we can improve the performance of our bigger size application.

Checkout to know more about the [Pre-Loading Modules](https://dev.to/krishna7852/pre-load-angular-modules-5hg).
Top 25 Active Chatrooms for DevOps Engineers Like You
Published: 2022-01-15 08:56:09

As the tech stacks are becoming more and more complex and business is moving at a fast pace, DevOps Teams worldwide are turning to the communication tools like Slack and Discord to stay productive. Collabnix community is coming together to list out the top 100 active Slack and discord channels for DevOps engineer like you.

![chatrooms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e0766kambwntj39x5wr.png)


| Community  | Slack | Discord |
| ------------- | ------------- | ------------- | 
| [All Day DevOps](https://www.alldaydevops.com) | https://alldaydevops.slack.com (official) | N/A |
| [Azure Stack Blog]() | https://azurestackblog.slack.com (official) | N/A |
| [CNCF](https://cncf.io) | https://slack.cncf.io/ (official) | N/A |
| [Collabnix](https://www.collabnix.com) | https://launchpass.com/collabnix (Official) | N/A |
| [Devtron](https://devtron.ai/) | N/A | https://discord.com/invite/jsRG5qx2gp (Official) |
| [Docker](https://docker.com)   | https://dockercommunity.slack.com (Official)  | https://discord.gg/CVBzBtdY (Unofficial) |
| [Devlio DevChat]() | https://devolio-devchat.slack.com (Official) | N/A | 
| [DevOps Chat](https://devopschat.co) | https://devopschat.slack.com (Official) | N/A | 
| [DevOps Engineers](https://www.devopsengineers.com) | https://devopsengineers.slack.com (Official) | N/A | 
| [Datadog](https://www.datadoghq.com/) | https://chat.datadoghq.com/(Official) | N/A |
| [Grafana](https://grafana.com) | https://slack.grafana.com/ (official) | N/A |
| [HangOps]() | https://hangops.slack.com (Official) | N/A | 
| [Kubernetes](https://www.kubernetes.dev/)  | https://slack.k8s.io/ (official)  | N/A |
| [KubeDaily](https://www.kubedaily.live) | N/A | https://discord.gg/rEvr7vq (official) | 
| [OpenFaas](https://openfaas.com) | https://tinyurl.com/openfaas (official) | N/A |
| [Prometheus](https://prometheus.io/) |  https://slack.cncf.io/ | N/A |
| [Portainer](https://portainer.io) | https://tinyurl.com/portainer (Official) | https://discord.com/invite/j8fVken (Official) |
| [Redis](https://developer.redis.com) | N/A | https://discord.gg/redis (Official)|
| [Rancher](https://rancher.com) | https://slack.rancher.io/ (official) | N/A |
| [Shipa](https://shipa.io) | https://tinyurl.com/shipaio (official) | N/A |
| [SweetOps](https://sweetops.com) | https://sweetops.slack.com (official) | N/A | 
| [Thanos](https://thanos.io) | [#thanos-dev(CNCF)](https://slack.cncf.io/) (official) | N/A | 
| [Bret Fisher's Vital DevOps](https://devops.fan) | N/A | https://discord.gg/CXvdcE66vw |
| [The Rawkode Academy ](https://discord.gg/f4FBMcH8) | N/A | https://discord.gg/f4FBMcH8 | 
| [Layer5](https://layer5.io/) | https://layer5io.slack.com (official) | N/A | 

Unable to see your favorite chatroom? No worries. [Just raise PR](https://github.com/collabnix/devopschatrooms) and get it listed.
Encryption Decryption User Details Using Crypto-JS Library to secure application in React
Tags: webdev, web3, javascript, react
Published: 2022-01-15 08:05:15

hello developers today we talk about a library named is crypto-js
so why we use this library in our development.
because it secure aur informaion from malicius user.


It encrypt our information in cipher text. and we decrypt that text in our 
servers file to verify on behalf of secret key.

> npm install crypto-js --save

## encrypt information

```
var CryptoJS = require("crypto-js");

// Encrypt
var ciphertext = CryptoJS.AES.encrypt('user info', 'secret key').toString();


```

## Decrypt information

```
var CryptoJS = require("crypto-js");
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key');
var originalText = bytes.toString(CryptoJS.enc.Utf8);
```
The main reason using this library because some use check their history to see their payload on login time user inter into the login form. so we can use crypto library to secure application


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc3sgxa7wkxj80y0i44m.png)
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-01-15 08:00:06

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258836687f.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ How did the developer announce their engagement?

___A:___ They `return`ed `true`!
 -->
Testing React Components with API Calls (Video)
Tags: react, testing, jest
Published: 2022-01-15 07:49:34

Testing React Components that is fetching data from external API is always a challenge. Luckily react-testing-library and Jest makes it super easy. In this video, I'm explaining the how to test a react component that accesses data from external API using Fetch.

{% youtube z656HufH3pA %}
Top 10 Reasons Why Python Programming is So Popular in 2022
Tags: python, machinelearning, datascience, programming
Published: 2022-01-15 07:42:23

In this blog, we are going to see Top 10 Reasons Why Python Programming is So Popular in 2022. 
No.1: [Easy to Learn and Use](https://codexashish.blogspot.com/2022/01/top-10-reasons-why-python-programming.html)
No.2: [Active and Supportive Community](https://codexashish.blogspot.com/2022/01/top-10-reasons-why-python-programming.html)
No.3: Support Some Great Corporate Sponsors
No.4: First-choice Language
No.5: Hundreds of Python Libraries and Frameworks
No.6: Python Has Big Data
No.7: Python Is Reliable and Efficient
No.8: Support in AI, ML and DL
No.9: The Flexibility of Python Language
No.10: Platform Independent

If you want to read full blog, click on the above link or search my website (**CodesAshish**) on Google. I used to upload blogs related to programming and coding on my website. So Please visit once.

**Thankyou**
Quick Summary - The Technologies That Tech Corporates Use To Build Software (For Beginners)
Published: 2022-01-15 07:25:22

```java
function introduction() {
  if (you've already been working in a large tech team) {
    console.log("This article is probably not for you.");
  } else if (you're a curious guy on the topic) {
    console.log("This article is for you.");
  }
}

introduction().then(() => likeThisPost() && shareThisPost());
```

Anyway, how does a large team work together to build a software product? 

###[1] Communication Channel
To communicate, there are a whole lot of options. Some prefer to use internal tools, while others prefer software like Discord or Slack. Videoconferencing? You guessed it - Google Meet, Microsoft Teams, or Zoom. 

###[2] Code Collaboration
GitHub or GitLab. I see that newer companies start to transition to GitLab because it's offers more convenience when dealing with CI/CD pipeline. Nonetheless, they're both good.

###[3] Documentation
For every software, there's gonna be a documentation so it's easier for anyone in the team or future engineers to test and work on it. One popular tool is Atlassian Confluence which lets you to write amazing documentations and collaborate with your team members.

###[4] Frontend, Backend, & Other Tools
For web frontend, it really is up to the company, but React.js + Next.js seems to be very popular. Angular is popular too but it just stresses out the developers a bit. For backend, currently Node.js is popular, but a lot of companies are transitioning to Go because it's faster, more secure, and costs less in the cloud generally. For mobile app development, although Flutter seems to be slightly more popular among individual developers, large tech corporates and startups prefer to use React Native because it works so well. On top of that, it is super similar to React, so a web dev can in a company can transition to mobile app dev easily and vice versa. For database, most of them use both relational (MySQL/PostgreSQL) & non-relational (MongoDB & Redis). There is much more to this, but this is a pretty good overview in my opinion.

###[5] Project Management & Testing
To manage project, usually Jira is used where the project manager would divide a project to specific tasks and assign them to developers. After development & testing, the devs can mark each task as done and so on. Jira is much more complex, but this is the essence of it. Anyway, to test apps, they'd use a lot of tech for load testing and so on, but one example I wanna tell you is Appium & Selenium, which allow you make automated testing. This means that once the test is run, the testing program would click buttons, fill up forms, and perform any task that a human could do in an app automatically (of course, you have to program the workflow). Encountered bugs will be reported to senior quality assurance engineer, usually.

That's it guys. Leave a like before you go. ;)
Css Animation Features
Tags: html, css
Published: 2022-01-15 07:11:03

## Animation Properties

- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function

`@keyframes`
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function

## Css Properties that can be Animated
- background-color
- background-position
- border-color
- border-radius
- border-width
- border-spacing
- bottom
- box-shadow
- clip
- color
- font-size
- font-weight
- height
- left
- letter-spacing
- line-height
- margin
- max-height
- max-width
- min-height
- min-width
- opacity
- outline
- padding
- perspective
- perspective origin
- right
- shape-image-threshold
- shape-margin
- shape-outside
- text-decoration
- text-indent
- text-shadow
- top
- transform
- transform-origin
- vertical-align
- visibility
- width
- word-spacing
- z-index
Day 7 of 100 - Java: Files scan, OOP concepts
Published: 2022-01-15 07:09:39

### Input scanner

```java
import java.util.Scanner;
//
System.out.println("Enter your name: ");
Scanner scanner = new Scanner(System.in);
String name = scanner.nextLine();
System.out.println("Your name is: " + name);
```

For scanning files

```java
File file = new File("phone_numbers.txt");
Scanner fileScanner = new Scanner(file);
```

Reading an ebook text file, project link https://github.com/j143/wordcount-java

### Errors

Common runtime errors are formalized into something called Exceptions.

Example, `FileNotFoundException`.

Use `throws` keyword.

```java
try {
    openFile("file.txt");
} catch (FileNotFoundException e) {
    // Handle the exception
    System.out.println("File is not available!");
}
// catch(IndexOutOfBoundsException e) {
//
// }
//
```

## Inheritance

Bank account manager

Three different accounts, different account number, balances, limit types

```java
class BankAccount {
  int accountType;
  String accountNumber;
  double balance;
  double limit;
  int transfers;
  Date expiry;
}
```

in place of the above code

```java
class BankAccount {
  String accountNumber;
  double balance;
}

class COD extends BankAccount {
  Date expiry;
}
```

## Polymorphism

```java
Student student = new Student();
Teacher teacher = new Teacher();
//
// or
Person student = new Student();
Person teacher = new Teacher();
```

Bag and contents example

```java
public class Bag {
  int currrentWeight;
  boolean canAddItem(Item item);
}
```

Override

When a class extends a parent class, all public methods declared in the parent class are automatically included in the child class. We are allowed to override any of those methods. Overriding means re-declaring them in the child class and then redefining what they should do.

Super

Re-use the parent method in the child class by using `super` keyword, followed by a dot and method name.

Interface

Its defines what needs to be done, but now how to do it. Include the methods needed but cannot implement method.

A Class can be inherited by more than one class.

Example, Caravan which is a bus + house

```java
public interface Movable{
  void move(int distance);
  boolean canMove();
}

public interface Habitable {
  boolean canFit(int inhabitants);
}

public class Caravan implements Habitable, Movable {
  void move(int distance) {
    location = location + distance;
  }

  boolean canFit(int inhabitants) {
    return max <= inhabitants;
  }
}
```
25 FREE CSS Tools/Resources That You Should Bookmark
Tags: css, webdev, html, programming
Published: 2022-01-15 06:54:39

##Introduction
Hello Developers :) 

I've created a list of 25 Free tools and resources which you can use in your next projects to make them more mesmerizing :) 

So without any further ado, let's begin
##Sites to learn from:
Websites are one of the best places to learn CSS, there are numorous websites where you can learn CSS from, some of them are -
- https://www.freecodecamp.org/

- https://www.w3schools.com/

- https://www.sololearn.com/

## Icons
We can add Icons to our webpage to make them look better, some of the libraries from where you can get many icons are -
- https://fontawesome.com/

- https://icons8.com/icons/set/css

- https://icons.getbootstrap.com/

- https://css.gg/

- https://ikonate.com/

## Gradients
Gradients are a progressive transition between two or more colours, the transition between the colours is usually smooth. In CSS there are 3 types of gradients: Linear gradient, Radial Gradient and Conical gradient. 
Here are some tools which can be used to create gradients-
- https://mycolor.space/gradient

- https://www.css-gradient.com/

- https://learnui.design/tools/gradient-generator.html

- https://cssgradient.io/

## Grid design:
The Grid layout is one of the fundamental properties of responsive web development. 
Some tools which can be used to design grids are -
- https://griddy.io/

- https://angrytools.com/css-grid/

- https://grid.layoutit.com/


##Animation maker:
With CSS animations, we can animate HTML elements' transition without using JavaScript in any way. 
Some tools which can be used to create animations are -
- https://animista.net/

- https://www.toptal.com/developers/css3maker/css3-animation.html

- https://webcode.tools/generators/css/keyframe-animation

## Colour pallets:

- https://mybrandnewlogo.com/color-palette-generator

- https://color.adobe.com/create/color-wheel

- https://mycolor.space/

##Box-Shadow:
The Box-shadow CSS property is used to add a shadow effect on an element's frame, giving it a floating kind of effect. 
Some tools which can be used to create box shadows are -
- https://css3gen.com/box-shadow/

- https://webcode.tools/generators/css/drop-shadow

- https://www.cssmatic.com/box-shadow

- https://html-css-js.com/css/generator/box-shadow/

##Conclusion
So I presented a list of various tools and websites which can help you make better web design. 

I hope that it helped you. Follow me so that you get notified when I publish my next article, also react to this article if you found it useful. 

Thank you
(˵ ͡° ͜ʖ ͡°˵)