teleren/devto huggingface dataset:
Don’t settle for a fast homepage
Tags: performance, webdev, beginners
Published: 2022-07-03 07:12:23

Many people are inspired to make their websites faster, which is excellent news.

We need faster and more optimized websites. However, I also see a lot of people stop at the homepage.

They ensure the homepage gets a decent score and then totally forget to test additional pages.

## Why does it matter

Looking at my blog, the homepage is only 1% of the entries to my website.
That means 99% of the people enter through a different path.

So why should we focus on making the homepage faster if it isn't even the primary traffic source?

You might think, well, that might be your website, even if you are right. I would love to hope that people explore your website beyond the homepage.

## But my site is massive!

My website, for instance, has 9xx pages at the moment, and trust me, I don't want to try to speedtest them all.

There is no need for that even.
So what can you do to ensure the majority of your pages work.

Here are some tips.

- Identify unique pages and test those
- Pick your most visited pages
- Pick your largest pages

These are some samples that I use.
Since optimizing your website is a recurring task, I like to mix these methods a bit.

Sometimes I check my analytics and see my most viewed pages, which have the highest impact.
Other times I pick the ones with the most elements of content in it.
And when starting a project, you might want to test all the different pages you have. Such as `contact`, `about`, `blog-article`, and so on.

## Conclusion

Evaluate your website based on how users make use of it.
Your homepage might not even be the main entry point, so ensure you optimize your whole website.

We looked at different approaches to test individual pages as it's sometimes impossible to try every single page.

### 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)
DRONE SURVEILLANCE
Published: 2022-07-03 07:10:49

DRONE was invented by Abraham Karem .He imagined his
drones involved in a “tactical conflict with the Warsaw Pact, be
it on the plains of Germany or as part of our Navy and Marines.
In 1935 the first drone is developed . The purpose was to detect
the target from heights and for military purposes as well. And
it’s a important part of civil life . Drones are very useful and
became very popular these days they possess areas ability to
reach area without pilot. Over 5 million people started using
drone for different purposes .
Drone was invented for security purposes. So it’s obvious that it
can contribute exceptionally in that task . Drones have
capabilities , small size and ability to withstand harsh
environments mean they can often survey subjects that might
not be accessible otherwise and can access a first-person view
(FPV) that would normally be impossible for the photographer.
Beyond surveillance UAV’s are used for drone journalism , 
search and rescue. Both fixed- wing and multi-rotor drones are
used for surveillance . Fixed-wing UAVs are typically used to
patrol larger areas such as coastlines, borders and long sections
of road and infrastructure, as they have greater flight
endurance and can cover a greater distance without recharging
or refuelling. Drones can be used to peer in windows to record
meetings, or to identify any valuable information in plain sight.
DRONES are considered as the best inventions of humans till
now . The invention which contributed many ways to the
security system by providing high-quality aerial photographs
and video, and collecting vast amounts of imaging data.
ExpressJs Authentication Starter Project
Tags: javascript, auth, express, webdev
Published: 2022-07-03 07:08:24

For almost every backend app or API I have to implement complete Auth functionalities. Creating DB Schema, making routes, implementing login and etc takes a long time of my whole project. That's why I though that why not I make a starter project with all auth features and just clone it when I need? From this thought I build this starter project.

**Auth Features:**

 1. Sign Up
 2. Login
 3. Email Verification ( Gmail )
 4. Reset Password
 5. Change Password
 6. **Test Included ( Jest + Supertest )**

**User Schema Field**
 1. Username
 2. Email
 3. Password
 4. User Role ( Admin/Customer )
 5. Active ( True/False )
 6. Verified ( True/False )
 7. Random String ( For Verification Purpose )
 8. Created At
 9. Updated At

**Tech Stack** 
 1. NodeJs
 2. ExpressJs
 3. MongoDB

**Packages** 
 1. bcrypt
 2. cors
 3. dotenv
 4. googleapis
 5. jsonwebtoken
 6. mongodb
 7. mongoose
 8. nodemailer
 9. nodemon
 10. jest
 11. supertest

## **How to use?**

 1. Clone this [repo](https://github.com/shahriar-programmer/expressjs-auth-starter).
 2. Go to the directory.
 3. Make a `.env` file.
 4. Open `.env.example` file and copy everything from this file.
 5. Paste copied text to just created .env file
 6. Fill necessary variable. ( How to get CLIENT_ID, CLEINT_SECRET etc ?? Follow this [link](https://docs.google.com/document/d/e/2PACX-1vSC-d9T5kRDn-J8iem57OXC5fK5KU1m8SZNinxPcU4b4qBTET7PWhWaN6lSTvdAKYPiP81oIudvEraB/pub) )
 8. Use `yarn install` or `npm install` command
 9. Use `yarn dev` or `npm dev` command.


**N.B: Your test may fail, take a look and change necessary value to pass.**
Consistency v/s Availability
Tags: webdev, programming, discuss, api
Published: 2022-07-03 06:22:56

_Let's take the following example, where **S** and **A** desire to work together on an online document._

## Always consistent but not always available

One method is to lock the document while one person is working on it to stop the other person from working on it concurrently. This method is adopted by WordPress.

The disadvantage of this is that only one person may work on the document at a time when it is locked, preventing anyone else from editing it.

This ensures that the document is consistently available but not always available.

Both WordPress & MSFT SharePoint adopt this strategy

## Always available, but not always consistent

Another strategy is to let both sides collaborate on the paper simultaneously. This is how Google Docs operates.

Conflicts could arise, and occasionally someone's work might be overwritten, as a result of this system.

This method ensures that the document is constantly available but is not always consistent.

## Conclusion

Due to the unpredictability of network stability, partition tolerance in distributed systems is non-negotiable. As a result, an application must decide between availability and consistency.

A service could:

- high availability by returning data that may be stale or high consistency by blocking any requests (not available) to the data until they are addressed (not consistent)

- Both strategies include trade-offs, and the best choice relies on what's crucial for your application.

_For example, an Amazon Cart's high availability is more crucial. However, the balance of a bank account must always remain consistent._
Convert Programming Languages To Another
Tags: convert, programming, productivity, languages
Published: 2022-07-03 06:21:53

Have you ever wondered about how does your code look in different programming languages? Have you ever thought about a tool that can [convert your code](https://digital.pijari.com/2022/05/18/tricks/convert-programming-languages/) from one particular [programming language to another languages](https://digital.pijari.com/2022/05/18/tricks/convert-programming-languages/). Then here is a tool that can do so.

Onelang.io – [https://ide.onelang.io/](https://ide.onelang.io/)
This site could convert programming languages and provides video tutorials that you can watch to understand how to use it.
 
Link demo: [https://www.youtube.com/watch?v=Rwo6KJ_Pa9Q](https://www.youtube.com/watch?v=Rwo6KJ_Pa9Q)
 
This site displays commands in various programming languages. Very interesting and useful site.
CSS Battle: #5 - Acid Rain
Tags: css, webdev, beginners, tutorial
Published: 2022-07-03 05:25:52


In this article, I will solve a [Acid Rain](https://cssbattle.dev/play/5) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/5) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Acid Rain](https://cssbattle.dev/targets/5.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML


<CodeTitle title="index.html" lang="html"/>
```html
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
```

There are three divs, each one represents a single raindrop. 


### CSS

Now let's style the Body first.

```css
body {
  margin: 0;
  background: #0b2429;
}
```

After doing that, we can style the raindrops.

```css
.one, .two, .three {
  position: absolute;
  width: 120;
  height: 120;
  background: #998235;
  border-radius: 50% 0 50% 50%;  
}
.one, .three {
  background: #f3ac3c; 
}
```

In the above code, we are initializing the height and width of the raindrops to `120px` and applying the `border-radius` property to make the perfect raindrop shape.


Now I'll define positions for all the raindrops individually with `z-index`. 

>*The `z-index` property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.* 

```css
.one {
  left: 20%;
  top: 50%;
  z-index: 11;
}
.two {
  z-index: 10;
  left: 35%;
  top: 30%;
}
.three {
  transform: rotate(180deg);
  left: 50%;
  top: 10%;
  z-index: 9;
}
```
This is all you need to solve this CSS Problem.

>*In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or % then you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

### Codepen 

{% codepen https://codepen.io/j471n/pen/wvdWaYN %}

## Alternate Solution
There could be many Alternative Solutions I've used this one because of the fewer characters and simplicity.

### HTML
```html
<p t></p>
<p m></p>
<p b></p>
```

Here I am using the `<p>` tag and inside them `t` stands for a top, `m` stands for middle and `b` stands for the bottom raindrop.

### CSS

```css
* {
  margin: 0;
}
body {
  background: #0b2429;
}
p[t],
p[m],
p[b] {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #998235;
  border-radius: 50% 0 50% 50%;
}
p[t],
p[b] {
  background: #f3ac3c;
}
p[t] {
  transform: rotate(180deg);
  left: 50%;
  top: 10%;
  z-index: 9;
}
p[b] {
  left: 20%;
  top: 50%;
  z-index: 11;
}
p[m] {
  z-index: 10;
  left: 35%;
  top: 30%;
}
```

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

### Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Building a Jekyll website using Visual Studio
Tags: jekyll, visualstudio
Published: 2022-07-03 05:24:17

---
title: "Building a Jekyll website using Visual Studio"
published: true
tags: jekyll, visualstudio
canonical_url: https://lmadhavan.com/2022/06/26/building-a-jekyll-website-using-visual-studio/
---

[Jekyll](https://jekyllrb.com/) is a popular static site generator that takes Markdown content and renders it through templates to produce static pages, which you can then upload to a hosting service such as [GitHub Pages](https://pages.github.com/).

I'm someone who likes to use an IDE whenever possible, and if you're a Windows developer like me who happens to have Visual Studio installed, then you've already got an excellent dev environment for Jekyll. A lightweight editor such as Visual Studio Code will work just as well, if not better, but I already had Visual Studio, so that's what I used.

 Once you've bootstrapped your Jekyll website (see [Jekyll documentation](https://jekyllrb.com/docs/) for instructions), simply right-click your website folder in File Explorer and select *Open in Visual Studio*. Out of the box, you get support for most of the file types you will be dealing with, including HTML/CSS, `_config.yml` and `Gemfile`. The two quality-of-life improvements that I made were related to Markdown support and a custom task for launching a local server.

### Markdown support
Most of the content in a Jekyll website is typically authored using Markdown, however the built-in Markdown support in Visual Studio is somewhat lacking. This is easily fixed by grabbing the excellent [Markdown Editor](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.MarkdownEditor) extension from the Visual Studio Marketplace, which improves syntax highlighting and adds live preview.

**Note:** *VS Code supports these features out of the box, no extension needed.*

### Custom launch task
Jekyll provides an easy way to test your website locally by running `bundle exec jekyll serve`. I created a custom launch task for this so I could fire up the server without leaving the IDE. To do this, right-click any file in Solution Explorer and select *Configure Tasks*. In the `tasks.vs.json` file that opens up, replace the **tasks** section with the following:

```json
"tasks": [
    {
      "taskLabel": "Local Server",
      "appliesTo": "*",
      "type": "default",
      "command": "${env.COMSPEC}",
      "args": [
        "bundle exec jekyll serve"
      ]
    }
]
```

Now, when you right-click any file in Solution Explorer, you should see a *Run Local Server* option. Clicking this will launch the server and Jekyll logs will go to the Output pane. You can continue editing files in the IDE and Jekyll will automatically pick up any changes. The server will terminate when you close Visual Studio; if you need to do this manually (for example, if you make changes to `_config.yml`), select *Build > Cancel* from the menu or use the `Ctrl+Break` shortcut.

**Note:** *VS Code uses a nearly identical `tasks.json` file for custom tasks. See the [documentation](https://code.visualstudio.com/docs/editor/tasks#_custom-tasks) for more details.*
Compiling a Direct2D linkable shader using Visual Studio
Tags: direct2d, directx, shader, visualstudio
Published: 2022-07-03 05:08:32

---
title: "Compiling a Direct2D linkable shader using Visual Studio"
published: true
canonical_url: https://lmadhavan.com/2021/12/09/compiling-a-direct2d-linkable-shader-using-visual-studio/
tags: direct2d, directx, shader, visualstudio
---

Effect shader linking is a Direct2D optimization that links multiple shaders together so that they can be rendered in a single pass. If you're writing custom shaders, you want to ensure that they are linking compatible in order to take advantage of this optimization. The [official documentation](https://docs.microsoft.com/en-us/windows/win32/direct2d/effect-shader-linking) explains how to author and compile such effects, however the default HLSL build in Visual Studio does not provide support for linking-compatible shaders. Instead, you need to configure a custom build step to do this, which is what this post will walk you through.

### Step 1: Create a batch script to compile the shader

First, create a batch script in your Visual Studio project that will execute the two-step process to compile a linking-compatible shader, let's call it `buildshader.bat`:
	
```batchfile
fxc %1.hlsl /nologo /T lib_4_0 /D D2D_FUNCTION /D D2D_ENTRY=main /Fl %1.fxlib /I %2
fxc %1.hlsl /nologo /T ps_4_0 /D D2D_FULL_SHADER /D D2D_ENTRY=main /E main /setprivate %1.fxlib /Fo:%1.cso /I %2
```

This is taken straight from the official documentation, except I've introduced a couple of parameters so it can be used as a custom build tool. The first is the input file and the second is the SDK include directory (which is required for the *d2d1effecthelpers* include that you will be using in your shader). The outputs of this script are a .fxlib file (intermediate file) and a .cso file (final linking-compatible shader output).

### Step 2: Configure a custom build tool for the HLSL file

Next, for each HLSL file in your project, open up the property page and make the following changes:

**Item Type**
Custom Build Tool

**Command Line**
`buildshader "%(Filename)" "$(UM_IncludePath)"`

**Outputs**
`%(Filename).fxlib;%(Filename).cso`

**Additional Dependencies**
`buildshader.bat`

![Custom build settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8lmc1m0oy2dv5th2tgt.png)

The outputs and additional dependencies let the build system know when to trigger a rebuild of the input file. You can read more about these options in the [Visual Studio documentation](https://docs.microsoft.com/en-us/cpp/build/specifying-custom-build-tools).

And that's it! Your shaders will be automatically (re)built as part of the standard Visual Studio build process. If you want to look at an actual example, check out the [Fotografix repository on GitHub](https://github.com/lmadhavan/fotografix/tree/master/Fotografix.Shaders).
Complete React Installation For Windows
Tags: beginners, react, tutorial, webdev
Published: 2022-07-03 05:07:25

In this part, we will see React Installation for windows, There are actually two ways to do installation, but we will show you the easiest one method because other one is actually a little complicated, for that we need some download:

Download NodeJS and install react NPM.
Install any editor, either sublime or Visual Studio.
Using NodeJS, install the create-node-app package.
Create the app using create-react-app command.

[Read more](https://reactjsguru.com/complete-react-installation-for-windows/)
How to persist the data in atoms with local storage using recoil persist.
Tags: nextjs, recoil, statemanagement
Published: 2022-07-03 05:03:40

Welcome friends 👋. In this blog post, you will learn how to persist the data in local storage in recoil.

For people, who understand Hindi
{% embed https://youtu.be/HLt512RmLEM %}

### 👁️Situation

Suppose, you are making a to-do list website where people can type todos and todos will be stored in the local storage. But the question arises, how can you persist the data with local storage.

### 😍Solution

Let’s take an example 👇
{% gist https://gist.github.com/studywithdesign/96bfbf66467a8b185f5c169d441ed35c.js %}
In the 👆 example, there is an atom(‘todosAtom’) that is responsible for storing all the todos.

Now, we can use effects_UNSTABLE 
{% gist https://gist.github.com/studywithdesign/ec8062ea6250825984dafbcdac681db3.js %}
Here, we are using **effects_unstable **which runs when the atom is initialized or changed.

But, unfortunately, you will encounter an error if you are using **an SSR framework like nextjs.**

### 🤔Then how to solve it?

    yarn add recoil-persist
[**recoil-persist**](https://www.npmjs.com/package/recoil-persist)
{% gist https://gist.github.com/studywithdesign/8aef91831e7920bc9bcbd693d1ec8fdf.js %}
Now, all of your work would be done with the help of the **recoil persist**.

If you have any questions, feel free to ask here👇:
[**Join the Next Dev Discord Server!**](https://discord.gg/hN4Wc5VR4M)
Conditional Routing with React Router V6
Tags: react, javascript, webdev, programming
Published: 2022-07-03 04:44:36

Lets take a look at how to render a component on a certain route conditionally using React router v6 features.

> Check out my latest [blog post](https://salehmubashar.com/blog/3-advanced-famer-motion-effects-in-react) on Framer Motion!

---

# Perquisites

Install React Router V6 using the following npm command:
`npm install react-router-dom@6`

Next, import the following components from react router dom.

```javascript
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
```

# Cresting the Routes

Firstly wrap all the content of your page inside the return function inside the <BrowserRouter>. Next, create the induvial routes inside the <Routes> component. 

```javascript
return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="start" element={<Start />} />
      </Routes>
    </Router>
)
```

For each route, we have the path and the element props, these tell the path on the address bar and the component to be rendered out respectively. The exact prop ensures that the **location.pathname ** will match exact location path.


# Conditional Routing

Lets say we want to render a component only if a state is true for example if a user is logged in, we can do that like this:

```javascript
<Route
  exact
  path="start"
  element={
    loggedIn ? (
      <Start />
    ) : (
      <Navigate replace to={"/"} />
    )
  }
/>
```
Basically here we are checking if the loggedIn state is true. If it is, we return the Start component, however if it is false, we redirect the user to the homepage using the Navigate element.

The replace prop simply replaces the current location with the given path instead of adding on to it.

# Example

For example we have a state that we can toggle with a button. We can add a function on the button to toggle the state which in turn shows/hides the component/route.
```javascript
import * as React from "react";
import {  useState } from "react";
import { BrowserRouter as Router, Routes,Route,Navigate } from "react-router-dom";
import Start from "./Start";

function App() {
  const [loggedIn, setLoggedIn ] = useState(true)
  const toggleRoute = () =>{
    setLoggedIn(!loggedIn)
  }
  return (
    <>
    <Router>
      <Routes>
        <Route
          exact
          path="start"
          element={loggedIn ? <Start /> : <Navigate replace to={"/"} />}
        />
      </Routes>
    </Router>
    <button onClick={toggleRoute}>Toggle</button>
    </>
  );
}
export default App;
```

---

Thanks for reading!
Check out my [blog](https://salehmubashar.com/blog) too!
The first non-blockchain cryptocurrency. Evolution of Cryptum.
Tags: finance, currency, database
Published: 2022-07-03 04:42:20

All cryptocurrencies in the world work on blockchain technology. But today our team has stepped into a new evolution.
#### What is [Cryptum](http://cryptum.eu5.org/) (CCM)?
Cryptum is the first cryptocurrency running on the CCNet network. CCNet (Cryptum Cyber Network) is a large network running on a single server. To use Cryptum, other computers must connect to a server with a CCNet network. Transactions in Cryptum are public and stored in the database of the CCNet network. Cryptom has SRDB (Sender Receiver Data Base) protocol for transactions. Transactions work based on this protocol.
#### Why Cryptum?
The main advantage of Cryptum over other blockchain-based cryptocurrencies is that transactions can be carried out like a simple transfer through the "LiteFast" function. For example, transactions in other cryptocurrencies sometimes have to wait for hours. Cryptum does not have this problem.
#### Mining in Cryptum
In order to mine cryptum coins in Cryptum, your computer needs to run a digital algorithm. The digital algorithm does not allow your computer to mine 0.5 CCM or more.
Tesla Logo | Pure CSS
Tags: codepen, css, showdev, beginners
Published: 2022-07-03 04:05:36

In today’s tutorial, I finished creating a Tesla logo with CSS. Simple css code for this iconic staple. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are CSS inspired. You can check them out [here](https://codepen.io/rembertdesigns).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/BarNrej %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)