teleren/devto huggingface dataset:
Web rendering methodologies, a quick snap .
Tags: webdev, javascript, html
Published: 2021-06-30 14:28:27

When it comes the performance tradeoffs in application development , rendering methodologies plays an important role.
Generally we classify this as server side rendering and client side rendering but there is more to it. for a detailed study anyone can refer this link https://developers.google.com/web/updates/2019/02/rendering-on-the-web

But in this article i am trying to share a quick introduction to three types of the rendering .

* Static rendering 
* Server rendering
* Client side rendering

Before getting into the subject let us check the performance time gaps which we can take for guaging the efficiency of a web application.

TTFB (Time To First Byte) - time between clicking link and first bit of content coming in.

FP (First Paint) - The first time any pixel becomes visible to the user.

FCP (First Content Paint) - The time when requested content becomes visible.

TTI (Time To Interactive) - The time at which a page becomes interactive.

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


In Server rendering generally produces a first paint(FP) and first contentful paint(FCP) .Running page logic and rendering on the server makes it possible to avoid sending lots of javascript to the client. Which helps to achieve a fast TTI (Time To Interactive) .Primary drawback of SSR is that generating pages on server takes time, which can often result in slower Time To First Byte(TTFB).

Static rendering happens at build time offers a fast First Paint, First Content Paint and Time To Interactive assuming the client side js is limited.
Unlike server side rendering consistantly fast Time To First Byte since the HTML for a page doesnt have to be generated on the fly.

one of the drawback of the static rendering is that it individual HTML files must be generated for every possible Url.

Where as in client side rendering rendering pages directly in the browser using javascript. All logic , data fetching, templpating and routing are handled on the client rather than the server.
The primary downside to client side rendering is that the amount of javascript required tends to grow as an application grows.
Hacker101 CTF-Micro-CMS v2
Tags: ctf, hacker101, capturetheflag
Published: 2021-06-30 14:22:06

<ul><li>Skills: Web</li>
<li>Difficulty: moderate</li></ul>

### Flag0
The second hint suggests a 'perfect union' which I understood as a hint for SQL injection union attack. 
I checked for any SQL injection vulnerabilities in all URLs by adding apostrophe(') at the end of each URL. They all returned 404 error so I decided to try with the input for log in. On submitting, I got an SQL error, implying that the login input page was vulnerable to SQL attack. <br>
I wrote an apostrophe (') in the username log in box and submitted, which brought the SQL error. The error revealed that the able were login information is stored is the admins. 
I used <code>' or''=' </code> for both the password and username and got invalid password, meaning that the username is vulnerable but the password is not. 
Therefore, I injected the SQL code <code>' UNION SELECT "xyz" as password FROM admins where ''='';--</code> in the username column with the password as xyz which logged me in. And through this, I got the flag. 
### Flag1
Hint 1 was not much helpful but the second one implied that what we might be dealing with are request methods in HTTP. I turned to CURL to help me find the flag. While logged in, I tried to send different request methods to the page with CURL. <br> Running this in the command line brought the flag.  <code> curl -i -X POST http://35.190.155.168/e29da9ad93/page/edit/1</code> 
### Flag2
Through the hint, I understood that what I needed was to login as an actual user since I had previously logged in through SQL injection. So I went back to the login page to try to obtain information from the database and login with the details shown there. 
<br> I decided to use blind SQL injection for this. I decided to use <code>sqlmap</code> for this. 
In command line, I wrote the code <code>sqlmap -u http://35.190.155.168/e29da9ad93/login --data "username=a&password=b" -p username --dump</code> and got username as Winston and password as concepcion. Using the two as login credentials, I got the flag.
Basic step in image classification model - Loading Image Dataset (Part-1)
Tags: deeplearning, machinelearning, loadingdataset
Published: 2021-06-30 14:17:57

It's expected that you know the problem and must have the dataset on which you want to work on.

In image classification/detection tasks the basic step is to load the data in your notebook.

It is very important to arrange the data in proper order before using it.
The image dataset must follow a particular hierarchy depending upon your problem.
`image-data/
 image-data/class-1
 image-data/class-2
 .
 .
 .
 image-data/class-n `

The dataset folder contains file having sorted images of different classes.

Now we will be loading the dataset 
Using Keras

## 1. Using Keras
We'll use image_dataset_from_directory function to load dataset.

     image_size = (n, n)  #depending 
     #upon the model requirement
     batch_size = 32  

     train_ds = 
     tf.keras.preprocessing.
     image_dataset_from_directory(  
     Directory,
     validation_split=0.2,
     labels="inferred",
     subset="training",
     class_names=["Class1","Class2"],
     seed=123,
     image_size=image_size,
     batch_size=batch_size)   

The function will automatically split the dataset into 2 parts, train and validation set depending upon the value provided in `validation_split` parameter.

    val_ds = 
    tf.keras.preprocessing.
    image_dataset_from_directory(
    Directory,
    validation_split=0.2,
    labels="inferred",
    subset="validation",
    class_names=['Class1','Class2'],
    seed=123,
    image_size=image_size,
    batch_size=batch_size)

  
  Hence, this way we can load our image data and can use for further training process.
For more info about parameters used in this function refer to [keras documentation](https://keras.io/api/preprocessing/image/#imagedatasetfromdirectory-function) .

In next article we will learn how to load image data using other techniques.
Menu Layout: Brutalist and Skewmorphism
Tags: codepen, showdev, uiweekly, design
Published: 2021-06-30 14:16:51

<h1>CodePenChallenge Menu Layout (Brutalist and Skewmorphism inspired)</h1>

<p>This is a design of a menu inspired by brutalist design, which having a chaotic design, transformation of elements, and absurd choice of color, and skewmorphism having 3D'ish, and glassmorphic design.</p>

<p>I cheated a little by touching few of the HTML codes, so that I could make the design well based on my idea. I used the image as the background image.</p>

<p>This design works well with Google Chrome, because of the <code>backdrop-filter</code> CSS attribute which only works with Chrome (Based on my test. I used Google Chrome, Safari, and Firefox so far)</p>

<h1>Fonts</h1>

<p><a href="https://fonts.google.com/specimen/Sigmar+One">Sigmar One</a></p>

<p><a href="https://fonts.google.com/specimen/Righteous">Righteous</a></p>

<p><a href="https://fonts.google.com/specimen/Alfa+Slab+One">Alfa Slab One</a></p>

<p><a href="https://fonts.google.com/specimen/Viaoda+Libre">Viaoda Libre</a></p>

{% codepen https://codepen.io/takaneichinose/pen/MWmYQZG %}
Big-O Cheatsheet to most common Data Structures and Sorting algorithms
Tags: computerscience, programming, beginners, tutorial
Published: 2021-06-30 14:14:42

## Common data structure operations (Worst Case)

<table style="width:100%">
	<tr>
               <th></th>
		<th>Access</th>
		<th>Search</th>
                <th>Insertion</th>
		<th>Deletion</th>
	</tr>
	<tr>
		<td> Array </td>
		<td> O(1) </td>
                <td> O(n) </td>
		<td> O(n) </td>
                <td> O(n) </td>
   
	</tr>
	<tr>
		<td> Stack </td>
		<td> O(n) </td>
                <td> O(n) </td>
		<td> O(1) </td>
                <td> O(1) </td>
   
	</tr>
	<tr>
		<td> Queue </td>
		<td> O(n) </td>
                <td> O(n) </td>
		<td> O(1) </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Singly Linkedlist </td>
		<td> O(n) </td>
                <td> O(n) </td>
		<td> O(1) </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Doubly Linkedlist </td>
		<td> O(n) </td>
                <td> O(n) </td>
		<td> O(1) </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Hash Table </td>
		<td> N/A </td>
                <td> O(n) </td>
		<td> O(n) </td>
                <td> O(n) </td>
   
	</tr>
        <tr>
		<td> Binary Search Tree </td>
		<td> O(n) </td>
                <td> O(n) </td>
		<td> O(n) </td>
                <td> O(n) </td>
   
	</tr>
</table>

## Sorting Algorithms

<table style="width:100%">
	<tr>
               <th></th>
		<th>Best Case</th>
		<th>Avergae Case</th>
                <th>Worst Case</th>
                <th>Space Complexity</th>
	</tr>
	<tr>
		<td> Quicksort </td>
		<td> nlogn </td>
                <td> nlogn </td>
		<td> n^2 </td>
                <td> logn </td>
   
	</tr>
	<tr>
		<td> Mergesort </td>
		<td> nlogn </td>
                <td> nlogn </td>
		<td> nlogn </td>
                <td> n </td>
   
	</tr>
	<tr>
		<td> Heapsort </td>
		<td> nlogn </td>
                <td> nlogn </td>
		<td> nlogn </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Bubble sort </td>
		<td> n </td>
                <td> n^2 </td>
		<td> n^2 </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Insertion sort </td>
		<td> n </td>
                <td> n^2 </td>
		<td> n^2 </td>
                <td> O(1) </td>
   
	</tr>
        <tr>
		<td> Selection sort </td>
		<td> n^2 </td>
                <td> n^2 </td>
		<td> n^2 </td>
                <td> O(1) </td>
   
	</tr>
</table>
Useful CSS units
Tags: webdev, css, 100daysofcode
Published: 2021-06-30 14:18:34

---
title: Useful CSS units
published: true
date: 2021-06-30 14:14:01 UTC
tags: webdevelopment, css, 100daysofcode
canonical_url: https://bharadwaj.hashnode.dev/useful-css-units
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7dazgovtzxjiyqpept3.png
---

Generally, there is a lot of confusion in the selection or usage of units in CSS. But, they are things that affect the styling. So, they are the ones which should be handled with utmost care.

When writing CSS there are a lot of options for the units you can use. Here are some main ones you need to be aware of and when to use them.

**PX**

Pixels are the most popular and well-known CSS unit. They are static and don't scale therefore are best for any value and won't change with screen sizes like borders and fixed-size elements.

```
.button{
    border-radius: 4px;
    border: 2px solid;
}

```

**Percentage %**

Percentage units are also popular and are a good choice for responsive design. However, % units don't always work as expected when setting heights. So, it's recommended to use them for widths only.

```
.wrapper{
    width: 100%;
    padding: 0 2%;
}
We can use a combination of % and px also


.article{
    max-width: 30%;
    padding: 20px;
}

```

**VH and VW**

Viewport height and viewport width units are great for areas that need to take up a specific portion of the screen.

```
.full_screen{
    width: 100vh;
    height: 100vh;
}
.image{
    width: 45vw;
}

```

**EM and REM**

Em and Rem units are calculated based on the font size. It's usually best to stick with Rem units because they are based on the root font size and are more predictable.

Generally, the base font size is 16px. Therefore, 1rem = 16px

```
.heading{
    font_size: 2rem; /* 32px */
    line-height: 1.4;
}
.subheading{
    font_size: 1.5rem; /* 24px */
    line-height: 1.2;
}

```

**CH**

Character units are brilliant for setting widths on text blocks. You can limit how many characters wide you want an element to be and that will be different based on the font size of the text.

```
.article_text{
    max_width: 70ch;
}
.headline{
    width: 15ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

```

**Others**

Centimetres(cm), Millimetres(mm), Inches(in), Points(pt), Picas(pc). These are some other units that are technically acceptable in CSS, but they aren't web units so it's better to avoid them. However, they can be useful for print specific styles.

**There is no best unit!**

Don't pick one unit and try to use only that throughout the project, it won't work well. Instead, evaluate each thing you are trying to style and pick the best unit for the job! This will create a much more versatile and professional design that works across devices.

That's a wrap. Hope you enjoyed this. Connect with me on [Twitter](https://twitter.com/Bharadwaj6262) where I post some useful content.
A quick admin panel for DynamoDB for devs
Tags: database, aws, react
Published: 2021-06-30 14:11:41

Since this comes up a lot for people working with AWS/DynamoDB, I made a short video on how to quickly spin up a CRUD admin panel using Retool (a sort of fast React for internal tools). Check it out here: 

{% youtube Zds3lP3CCHc %}

Thanks!
Chris
⚙️ Quarkus and Auth0 Integration
Tags: arquitecture, security, quarkus
Published: 2021-06-30 14:07:23

#### 📚 Learn how to create a natively compiled #Quarkus #HTTP #API secured with #Auth0.

### <br>

Cloud computing has seen a shift from traditional Java deployments to application servers like Tomcat to highly dynamic environments such as serverless and container orchestration platforms like Kubernetes.

Many of the benefits of these new cloud platforms rely on their ability to quickly spin application instances up to meet additional demand and restart applications to adapt to infrastructure changes like operating system upgrades or virtual machine provisioning.

Deploying Java to these environments has been a challenge, though, largely due to the amount of time it takes even a basic Java web application to start, called the cold boot time. It is not uncommon to have to wait 30 seconds or more before your application can begin serving traffic, which becomes a problem on platforms that scale down to zero waiting for incoming traffic and expect to quickly launch an application to process a request.

[Quarkus](https://quarkus.io/) is a container native platform that addresses many of these performance issues, and in this blog post, we'll take a look at a simple Quarkus web application exposing a REST endpoint protected by Auth0.

## What is Quarkus

Quarkus has been designed to address the needs of serverless and container environments by reducing startup times and memory consumption. Perhaps the most exciting thing about Quarkus is its tight integration with GraalVM to allow applications to be compiled into native binaries.

Quarkus integrates with a huge range of libraries, giving developers access to many familiar platforms and allowing for the migration of existing code bases. These libraries are selected or customized to run seamlessly on Quarkus and to be able to take advantage of native compilation.

Of course, authentication is a central requirement of any modern web application, and Quarkus has out of the box support for OAuth, which in turn can be integrated into Auth0.

## The Sample Application Prerequisites


[Read more...](https://auth0.com/blog/quarkus-and-auth0-integration/?utm_source=content_synd&utm_medium=sc&utm_campaign=quarkus)
Hosting frontend Blazor applications on the edge
Tags: blazor, angular, vue, react
Published: 2021-06-30 14:05:31

Frameworks such as Angular, Vue.js, React or more recently, Blazor allow you to build highly dynamic applications based on a set of static files. Hosting these applications everywhere should be simple, but the catch is that the entry point will typically be an index.html file that holds the main application logic and connects everything together.

To work around this, you are usually forced to use a .htaccess file or special server configuration to route all of your requests to the correct destinations. This issue makes hosting frontend framework applications cumbersome in a cloud storage scenario.

However, we believe that bunny.net [Edge Storage](https://bunny.net/edge-storage/?mtm_campaign=devto&mtm_kwd=edgestorage&mtm_source=devtosite) is a perfect home for these files. Not only is deployment extremely easy, but we also distribute and host these files in 5 different regions around the world and accelerate everything through a global CDN of over 54+ PoPs. This provides unparalleled performance and reliability thanks to a globally redundant footprint.

To make this work we've added two new options to Edge Storage. They allow you to control how Edge Storage handles 404 responses and status codes. With a few clicks, you can now configure your Edge Storage zone to rewrite 404 responses into 200 status codes and set a custom 404 path to your index.html file.

Then simply upload your static application to Edge Storage, connect a pull zone and enjoy a performance boost like never before.

Your application is now hosted and supercharged directly through bunny.net's global infrastructure and just a hop away from your users!

That's it. A simple but exciting update. No more servers to manage or complex configuration necessary, just raw global performance thanks to distributed global storage. In our example we used Angular, but this can be configured with any of the other popular frameworks, including Blazor, just as easily.

We are very thrilled about more and more opportunities possible through our Edge Storage, and helping more developers hop to the edge. If you're a front-end developer yourself, give it a try and show us the cool projects you're building. We're always eager to see what the bunnies are powering up.
What is business domain?
Published: 2021-06-30 13:51:49

So I've read books about "Domain Driven Design" architecture,
most of the thoughts coming to my mind during reading process are where should I put these fraction of code to? And wonder that everyone is also having this problem.

Then, I concluded that you will put everything related to "Business logic" into "Domain layer"

Next question comes to my mind, "Are these fraction of code business logic ?"

FU.. it's a hard question, I even let my friends look at the code and ask them is it the "Business logic" or not, not to be surprised, their answers diverted and with different reasons at that.

Confused, really confused.

Then I found this "Vertical Slice Architecture" (ref. https://jimmybogard.com/vertical-slice-architecture/) invented by Jimmy Bogard, and went through some of his talks.

Finally, I got the idea that every thing is "Business logic", don't spend a lot of time arguing where should we put the code to, put it in plainly first then the important step is later "Refactor" it.

That's it !!
Show dev: glassmorphism CSS generator
Tags: css, html, showdev
Published: 2021-06-30 13:06:48

Hello devs 👋

Me and my friend decided to built a [glassmorphism css generator](https://ui.glass/generator/) based on an upcoming CSS library called Glass UI.

What you can do with this tool is that you can generate the CSS that you need to get the glassmorphism effect.

Some of the features include:

- multiple background types (gradient & solid)
- change the background color
- glassmorphism properties (blur, transparency)
- component border radius
- dark/light mode
- card color
- get the HTML code for the component (coming soon)

Here's a preview of the tool in both dark and light mode:

![Glassmorphism CSS Generator in dark mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyiknjbti8u7iss0jha0.png)

![Glassmorphism CSS Generator in light mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upuciwcwouwkbsqafuye.png)

The tool is free to use and to play with. Let us know in the comments section what you think about it, what would you do differently, or how we can improve it. Thank you! ❤️

Check it out: [https://ui.glass/generator](https://ui.glass/generator/)
Doc management app integrated with Postgres in UI Bakery
Tags: webdev, showdev, frontend, development
Published: 2021-06-30 13:34:14

See how a biotech company created a document management #webapp connected to Postgresql 🐘

Brief results:
✔️ A few weeks of #lowcode development instead of months of coding.
✔️ Snappy page load times & great responsiveness.
✔️ No front-end development skills needed.
✔️ No additional training for new web app users.
✔️ Smooth app performance.

[Read the story](https://uibakery.io/use-cases/how-a-biotech-company-built-a-document-management-app-integrated-with-postgres?utm_campaign=ui_bakery%20-%20use_case%20-%20cacq%20-%20doc_management%20-%20views&utm_source=DevTo&utm_medium=webdev&utm_content=announce)
Las 30 mejores herramientas digitales para la educación en línea
Published: 2021-06-30 13:24:08

Debido a la pandemia de COVID-19, muchas empresas e instituciones educativas han recurrido al aprendizaje a distancia. En estos tiempos difíciles, esta es la manera más segura y efectiva de que las personas continúen [aprendiendo](https://www.ispring.es/blog/capacitacion-de-personal). Por esto es esencial contar con las herramientas adecuadas para que [los empleados](https://www.ispring.es/blog/capacitacion-en-ventas) y los formadores, así como los estudiantes y los profesores, estén siempre conectados y tengan a mano el material de aprendizaje necesario. 

En este artículo, hablaremos sobre cinco tipos de herramientas digitales para la educación en línea que puedes usar para ofrecer la mejor experiencia de aprendizaje posible a tus estudiantes. Compártelas en las redes sociales o añade esta página a tus favoritos para volver a consultar el artículo más tarde.

Para leer más sigue este artículo:
https://www.ispring.es/blog/herramientas-digitales-para-la-educacion-en-linea