teleren/devto huggingface dataset:
🛑WEB DESIGNING ROAD MAP.........🛑
Published: 2022-06-07 18:56:20

Building websites is most often considered a technical job but the truth is far different from reality. most modern websites are first designed by web designers and then developed by web developers which means building a website includes creative as well as technical work.

Web designing is the work of creating digital art which can show information in an easy and fun way so that people on the internet can easily understand it.



Pros:-
Website designing is easy to learn,
It helps you to build beautiful websites,
There are a lot of free tools to design a website,
A lot of high paying internships and job opportunities,
you can do freelancing projects and earn money in a short time.

Cons:-
You have to use many tools to complete a project.
You have to work longer to create something creative.
You have to do a lot of meetings to get feedback and improve the design.
It highly competitive market and you have to do many projects to gain an advantage.


Why web developers should learn web designing?
Building a website can become very confusing if you have designs of a website then you can build a website faster. Not only that it is very creative work, you can work at any company or start a business.


Web designing is divided into parts:

User experience (UX): In this part, you have to research about project and its users and then design a rough diagram of the website on paper or computer which shows the workflow of the website.

User Interface (UI): This part is the actual design that shows colours, patterns, size, and images which you can use to develop the website.
New GitHub Achievements
Tags: git, beginners, programming, discuss
Published: 2022-07-16 11:55:21

Some more GitHub Achievements out there.
Check them out on my profile: https://github.com/MrKrishnaAgarwal


But, one more badge remains "stargazer", so go star my repos and I'll see you there 👍🏻

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

<br>
<br>

Also I am posting very useful repos, so do follow me too.


{% embed https://github.com/MrKrishnaAgarwal %}
How i use Splitbee to measure web traffic on my website
Tags: webdev, analytics, splitbee
Published: 2022-07-16 11:54:04

Splitbee is a lightweight and easy to use web analytics tool. It allows you to collect stats about your website, such as where visitors came from, how long they stayed, how they found the site and their country. 

### 1. Get started
Heard over to [splitbee](https://splitbee.io/) to create your free account. Sign up for a free account, and add your website on the dashboard.

### 2. Add Splitbee to your website.
Adding Splitbee to your website is easy. Add the following script tag to the <head> of your website.
```js
<script async src="https://cdn.splitbee.io/sb.js"></script>
```
Ensure your script tag has the `async` or `defer` attribute.
Navigate to your website, you should now some some stats on your Splitbee dashboard.

Or even better, if you use `NPM` or `Yarn`, Splitbee has package called `@splitbee/web`.

#### Installation with npm
```bash
npm i @splitbee/web
``` 
#### Installation with yarn
```bash
yarn add @splitbee/web
``` 
Initialize splitbee in your `main.js` or entry point of your application.
```js
splitbee.init();
```

### 3. Event tracking
Splitbee also supports custom events, you can track user actions within your app, such as sign up button click, product purchase/adding to cart.
It is as easy as 
```js
splitbee.track("Sign Up")
```
If you want to add custom data, 
```js
splitbee.track('CART', {
  name: 'Added product to cart',
});
```

```js
splitbee.track('CART', {
  name: 'Removed product from cart',
});
```

Thank you for reading, for more information, see the Splitbee [documentation](https://splitbee.io/docs).
What is Intersection Observer API in JavaScript?
Published: 2022-07-16 11:31:16

##Introduction
The intersection observer API is one of the Observer API in JavaScript which provides a way to observe changes in the the visibility and position of a DOM element relative to the containing root element or viewport asynchronously. . This will  By Intersection Observer, we can control the element’s loading and animations based on the target element’s visibility and positions. This observer API is mainly used for infinite scrolling, lazing loading images, track the user interactions and scroll based animations. 

In this article, we will discuss about all the basics of Intersection Observer API so that you can implement on your website and looks cool 😎.

##Constructor

```
const observer = new IntersectionObserver(callback, options)
```

##Parameters

###callback: 
A function which is called when the percentage of the target element is visible crosses a threshold. The callback receives as input two parameters: entries and observer

- **Entries:** Entries parameter is an argument that accepts function and it just outputs the information related to each element that changes its intersection status.


- **Observer:** observer tells to observe intersection changes for the element. Now for an element to change its intersection status it must scroll in/out of the current viewport.


###options:
Options is an optional parameter which includes the settings of the current observer. The options are


- **root:** Root helps to identify actually where to start observing the elements. For example if we set `{ root: document.querySelector('#scrollArea') } ` then the observer API will start observing the scollArea id only.


- **rootMargin:** Root margin is similar with CSS margin property. It will add margin around the root element to extend, or shrink the capturing frame when the dimensions of the root do not provide enough flexibility. It's defaults is `"0px 0px 0px 0px"` or `"0px"`


- **thresholds:** Thresholds accepts a value between 0 and 1 which  represents the percentage of the element that must be visible before isIntersecting value becomes true. By default it will set to 0 which means as soon as any part of the element is visible it will be considered intersecting. If we update to 1 then unless whole part of the element is visible, intersecting will false.

## Methods:
- **disconnect() -**  disconnect() method stops watching all of its target elements for visibility changes.


- **observe() -** observe() method is to observe intersection changes for the element with the id or querySelector.


- **takeRecords() -** takeRecords() method is to 


- **unobserve() -** unobserve() method helps to stop observing elements when they are no longer needed to be observed. 


##Example
{% codepen https://codepen.io/connectaryal/pen/jOzyrVw %}


##Conculusion:
The Intersection Observer is great observer APIs helps so many use cases from lazy loading images, to scroll based animations. It is also incredibly easy to use which is a huge bonus.
Introduction to JavaScript
Published: 2022-07-16 11:30:49

## JavaScript Variables

Variables are data containers which stores values and information we want the computer to remember in subsequent times. Variables can be changed by simply changing the values of an existing variable to a new one.
Variables are the memory of JavaScript, lets create some variables
`var myName="Aliyu"` this will save into JavaScript's memory as my name, so next time I try to recall the variable in a function, it'll bring _**Aliyu**_ as its value.
 

## JavaScript Strings
Stings in JavaScript are values that are enclosed in quotation marks, there  are a lot of operations you can do with strings which include printing a value which can be a combination of multiple strings. One of the things you can do with strings is calculating the strings' length and retrieving the number of characters in a string. This can be with in the following syntax; 
To count the number of characters in the variable above simply try: `myName.length;` and teh result will be 5. 
Try some  code to allow javascript to tell you the number of characters you have written and the number remaining to enter

`var tweet = prompt("what is your name");
var tweetcount = tweet.length;
alert("You have written" + tweetcount + "characters, you have" +(200 - tweetcount) + "characters remaining");`

## Slicing and extracting part of a string
`var tweet = prompt("what is your name");
var tweetunder50 = tweet.slice(0,50);
alert(tweetunder50);`
you can also shorten your syntax by putting the functions on a single line
`alert(prompt("what is your name").slice(0,50));`

##Changing the characters in a string.
`// var name = prompt("What is your name");
// name = name.toUpperCase();
// alert("hello" + " " + name.toUpperCase());
var firstChar = name.slice(0,1);
var remainingchar = name.slice(1,name.length);
// alert(remainingchar);
var lowercaseremainingchar = remainingchar.toLowerCase();
alert(lowercaseremainingchar);`
Create custom VSCode shortcuts and code snippets
Tags: vscode, react, typescript, snippets
Published: 2022-07-16 10:55:11

## Keyboard Shortcuts



on Linux, go to:

```
File -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)
```


On Mac:

```
Code -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)
```



Then add custom key bindings like this:



`Ctrl+D` to duplicate line / selection:

```sh
{
  "key": "ctrl+d",
  "command": "editor.action.duplicateSelection"
}
```



`Ctrl+Shift+L` to insert a `console.log` with the selected text:

```sh
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}
```

 


Or `Ctrl+Shift+L` to insert a `console.log` with the clipboard's content:

```sh
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${CLIPBOARD}', ${CLIPBOARD})"
  }
}
```

 

More useful variables: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

## Code Snippets



To add some React Component code snippets, on Linux, go to:

```
File -> Preferences -> Configure User Snippets -> search for TypescriptReact
```



On Mac:

```
Code -> Preferences -> Configure User Snippets -> search for TypescriptReact
```



Then paste this in the json file:

```json
 "New React Component": {
  "prefix": ["react-component", "rc"],
  "body": ["const ${1} = () => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component"
 },
 "New React Component With Props": {
  "prefix": ["react-component-props", "rcp"],
  "body": ["interface I${1}Props {\n\t\n}\n\nconst ${1} = (props: I${1/(.*)/${1:/capitalize}/}Props) => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component With Props"
 }
```



To use the snippets, open a `tsx` file and type **react** or **rcp** -> you'll see the snippets' names in the auto-complete pop-up.



Code output example (you can edit the component's name)

```ts
const Comp1 = () => {
  return (
    <div>

    </div>
  )
}

export default Comp1

// and

interface IComp2Props {
  
}

const Comp2 = (props: IComp2Props) => {
  return (
    <div>

    </div>
  )
}

export default Comp2
```



More: https://code.visualstudio.com/docs/editor/userdefinedsnippets
300 beautiful pure CSS loaders
Published: 2022-07-16 10:52:24

As we navigate through websites and apps, we might sometimes wait for some progress or for something to load. A loader or spinner can be used in such cases to indicate to users that something is loading.

[Open cssloaders.github.io](https://cssloaders.github.io)

Just click on the specific loader that you want to use in your application and a dialog box with the source code will appear.

![Loader source code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngu5tws410yspwucbqt1.gif)

A huge advantage is also the fact that it is possible to translate the displayed loading text very easily and not spoil the impression of the animation.

![English version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n4okgfrgv53tu62cggp.gif)

![Translated vesion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4b5idtefva53z3vm4evd.gif)
Learn Advanced web designing course with A2n academy and upscale your career in IT industry
Tags: webdesigningcourseinhyderabad
Published: 2022-07-16 10:51:35

Web design is currently one of the most well-liked and quickly expanding IT training courses. Learning web design will make it easier for you to understand concepts in HTML, CSS, and JAVASCRIPT. A web developer may create their own website from scratch if they have mastered all of the concepts.

The significance of a web design course has increased recently due to growing demands from customers and architects. Learning through instruction enables students to advance up the website architecture ladder and sharpen their abilities. Additionally, they help you build a solid portfolio, which may inspire you to pursue your vocation more seriously.

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

A2n Academy is the finest place to take a web design course in Hyderabad. We provide top-notch web design instruction globally with the help of our highly skilled experts.
We believe it is important to understand the principles of web design before diving into challenging coding languages. Our interesting, dynamic courses are made to make learning for you quick and pleasurable.

Planning a **[web development course in Hyderabad](https://www.a2nacademy.com/course/web-designing-course-in-hyderabad)** is a good way to master both the fundamentals and the most cutting-edge web planning techniques.

The doors of A2n Academy, a training facility for experts in web design, development, and marketing, have been opened.
A swiss knife for a developer
Tags: webdev, productivity, programming
Published: 2022-07-16 10:48:47

According to [Macmillan dictionary](https://www.macmillandictionary.com/dictionary/british/swiss-army-knife), A swiss knife means 

> 
a method or system that deals with situations of all types.

For a typical developer during times of prototyping where a demo is required and you want to get placeholders whether in either a front-end or back-end setting, you need a few types on the go to so that you concentrate on the business need than extras that will articulate your designs. However, most online tools offer one solution like formatting a json object, getting a GUID (UUID v4) and so on. 

[IT tools tech](https://it-tools.tech/) is that swiss knife for a developer. It is a responsive application made with [VueJS](https://vuejs.org/) that enables a developer reduce time either scraping the web or installing a flurry of CLI tools to get quick sample types needed for a prototype showcase.
 

## Sidebar
![Sidebar for handy tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjkkjkahqx098u8ms54z.png)
It has well categorized sidebar making finding what you find easily. As of version 2.5.1, these are the categories;

- Crypto

- Converter

- Web

- Development

- Math

- Text

## Search bar
![Search bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chyf5pbc1fo6hammwgdk.png)
This auto complete which offers simple and flexible type-ahead functionality leading to dynamic search of the tools in the IT Tools.

## Main 

![Main grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnsgrc3e7pbess9qz7sn.png)

This features a responsive card grid of the available tools on the site with brief descriptions of what they do. This makes it easier in accessing the tools. They have both light and dark themes to make it comfortable for the eyes at the the different time of the day.

## Conclusion
Dealing with tokens, Date-time **IT Tools** a [super App](https://en.wikipedia.org/wiki/Super-app) for developers.
Do not forget to try it out leave a [GitHub star](https://github.com/CorentinTh/it-tools) or [sponsor](https://github.com/sponsors/CorentinTh) the creators for the awesome and handy tool they envisioned.
How to convert html to pdf (something like a generated invoice) and send it to an email
Tags: javascript, webdev, codenewbie, beginners
Published: 2022-07-16 10:45:49

Long time, no post. Sorry about that, been quite busy with my youth service PPA (Place of Primary Assignment), and sadly it has taken quite so much of my time. Anyways, down to business. So I'm building this web application for my PPA which generates a delivery note from a set of inputs and sends to the inputed email by the click of the "Send Email" button. I had problems with converting it to a pdf and I did a lot of research but I finally figured it out with the help of the internet and some people at Stack Overflow (every junior developer needs help from the internet), to convert it to pdf and print by the click of a button, here's the code below:

![Code to convert html to pdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyx6nj8ghdn5mlbfsdps.PNG)

So you have to add the html2pdf script before it can work, though there are other ways, this was the one I found.
Meanwhile if you want to generate a pdf and then send it to an email, that is a different ball game. I tried fetching the downloaded pdf and then sending it to the email, but that gave me problems and I couldn't quite figure it out. Anyways, I did some research and also asked other senior developers I knew for help (Special thanks, Mr Samuel Adetoro @big_black_fella ). So I found smtpJs and followed the steps shown below

![smtpJs snippets on sending attachments to email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdz7hekrb7c2q7ksmfik.PNG)
As you can see in the highlighted part, I could send an email with attachment but the code to convert and send a pdf straight was more complex than that so I did some further research and also found some help from some guys at Stack Overflow and to avoid long talk, I had to create an Elastic email account shown below

![My Elastic Email account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jo13fwgy8pv2es6wput.PNG)

Then I combined it with the smtpjs code and also the html2pdf code to convert the invoice to a pdf, then change it to a datauristring and then send it as a data using the email code from smtpjs. I used elastic email as my smtp server. The code is shown below

![JS code to convert html to pdf and then send as an attachment to email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k75wnz5co58jjsv7usw.PNG)

Finally, it all worked out and the invoice looks like this:

![The Invoice generated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ue84tvla1jysek2dxs3.PNG).
It was successfully sent to the email that was inputed. That's all from me for now, till next time. Hope you found this useful.
Laravel 9 - Avoid data leakage when using orWhere on a relationship
Tags: laravel, php
Published: 2022-07-16 10:43:34

Not Bad:
<small>This returns ALL posts where votes are greater than or equal to 100 are returned.</small>
```
$user->posts()->where('active', 1)->orWhere('votes', '>=', 100)->get();
```



Good:
<small>This returns Users posts where votes are greater than or equal to 100 are returned.</small>
```
use Illuminate\Database\Eloquent\Builder;

$users->posts()->where(function (Builder $query) {
     return $query->where('active', 1)->orWhere('votes', '>=', 100);
})->get();
```
Logto: Open-source project to build sign-in, auth, and user identity within minutes
Tags: webdev, javascript, opensource, showdev
Published: 2022-07-16 10:31:56

**TL;DR**
Website -> https://logto.io
Repo -> https://github.com/logto-io/logto

---

I asked myself – why should I code sign-in again? With this unsolved question in mind, I started building Logto with several developer friends about one year ago.

While we were exploring how could a better sign-in solution solve our own business problem, we found that the sign-in breakdowns get way more challenging than many people realize. The community we interact with daily is talking so much about how painful it is not to have a decent open-source solution. This is something we could offer our best effort into.

Self-help advice often encourages people to dream big. So our idea went bigger, too 😁. We want to build not just a customizable sign-in UI but also an identity solution.

---

![Logto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fds2yfyuvhlexb52zmln.jpg)

I’ve heard of numerous projects that are solving similar problems. They are great. And here’s how we stand out. A few highlights of Logto:

🧑‍💻 A frontend-to-backend identity solution.

- A delightful sign-in experience for end-users and an OIDC-based identity service.

- Multi-platform SDKs that can integrate your apps with Logto quickly.

![Logto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbcnv1dew35578tyxbi7.jpg)

🎨 Out-of-box technology and UI support for many things you needed to code before.

- A centralized place to customize the user interface and then LIVE PREVIEW the changes you make.

![Logto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4uxz0ayteqb2ap329vc.jpg) 

- Social sign-in for multiple platforms (GitHub, Google, WeChat, Alipay, etc.).

- Dynamic passcode sign-in (via SMS or email).

![Logto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8gqzfmety6wepdme62e.jpg)
 

💻 Fully open-sourced, while no identity knowledge is required to use.

- Super easy setup (less than 1 min via GitPod, not joking), step-by-step tutorials and decent docs.

- A full-function web admin console to manage the users, identities, and other things you need within a few clicks.

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

---

We just launched the public beta of Logto! As always, I'd be incredibly grateful to hear your thoughts about Logto. I truly look forward to your participation in the discussion. Cheers!

(btw, Logto service is written in full Node.js+TypeScript)

Website -> https://logto.io
Repo -> https://github.com/logto-io/logto