teleren/devto huggingface dataset:
Optimize and resize image urls effortlessly - load website faster
Tags: javascript, tricks, sh20raj, website
Published: 2022-01-26 03:36:54


## The fast and easy way to make your websites load faster
### Optimize and resize images effortlessly

---

Statically.io :- [https://statically.io/](https://statically.io/)
YouTube Doc :- [https://youtu.be/uhK1Lh8HMv8](https://youtu.be/uhK1Lh8HMv8)

{% youtube uhK1Lh8HMv8%}

---

**Quick start**
`GET` https://cdn.statically.io/img/:domain/:image

**Resize image by width (w=:pixel)**
`GET` https://cdn.statically.io/img/:domain/w=:pixel/:image

`Resize image by height (h=:pixel)`
`GET`https://cdn.statically.io/img/:domain/h=:pixel/:image

**Enable auto-WebP (f=auto)**
`GET` https://cdn.statically.io/img/:domain/f=auto/:image

**Adjust quality (q=:percentage)**
`GET` https://cdn.statically.io/img/:domain/q=:percentage/:image

**Combine params**
_Params can be combined using commas and after /img/:domain/ path.
_
`GET` https://cdn.statically.io/img/:domain/f=auto,w=:pixel/:image
`GET `https://cdn.statically.io/img/:domain/h=:pixel,q=:percentage/:image

**Live demo**

`GET` https://cdn.statically.io/img/staticsite.fun/w=300,h=500/cat.jpg

`GET` https://cdn.statically.io/img/staticsite.fun/f=auto,w=600,h=400/dog.jpg


GurImg - Free Image Hosting :- https://gurimg.sh20raj.repl.co/
How to disable web fonts
Tags: javascript, chrome, font
Published: 2022-01-26 06:03:42

This is the quick tip to be able to disable all CSS fonts



We had a website which contains a lot of line separator (U+2028) character.

## How to install

1. Make a bookmark on bookmark bar (just add anything as dummy)
    - "Bookmark bar" is the bar that you see the list of icon right below the address bar
1. Edit the newly created bookmark, replace the URL to the following javascript code & rename it to whatever you like
1. Done

## Javascript

```
javascript:Array.prototype.forEach.call(document.getElementsByTagName("*"),
function(e){e.style.fontFamily ="Source Sans Pro"})
```

## How to use

- Visit a page
- Click the bookmark icon that you just made


## Why need this

If you are using modern web font, they treat line separator as space.

However, we had a client whose customers maybe using older computer. They were viewing the page without web font. Then line separator are showing up as corrupted square letters.

We need to remove those characters, but it's hard to locate unless we disable web font.

Thank you user10089632 of StackExchange!
https://superuser.com/questions/1209191/force-chrome-to-use-my-preferred-font-over-the-authors?newreg=20d74beb36514f629acc2f7222727626
#reTerminal – Installing TensorFlow, @Code and recognizing 🐿️🐺 using a Camera 🤳
Tags: englishpost, opencv, reterminal
Published: 2022-01-26 14:57:59

---
title: #reTerminal – Installing TensorFlow, @Code and recognizing 🐿️🐺 using a Camera 🤳
published: true
date: 2022-01-11 20:40:04 UTC
tags: EnglishPost,EnglishPost,OpenCV,reTerminal
canonical_url: 
---

Hi ! Let’s start with some posts using reTerminal with a very simple scenario: Install TensorFlow and Code on reTerminal to run an object recognition app. The desired output is something similar to this one. Live demo in a tweet ! And let´s start with the base commands to install Visual Studio Code. Oficial VSCode… [Continue reading #reTerminal – Installing TensorFlow, @Code and recognizing 🐿️🐺 using a Camera 🤳](https://elbruno.com/2022/01/11/reterminal-installing-tensorflow-code-and-recognizing-%f0%9f%90%bf%ef%b8%8f%f0%9f%90%ba-using-a-camera-%f0%9f%a4%b3/)
#AzureFunctions ⚡- Pip and TLS/SSL error on Debugging with #Python 🐍
Tags: englishpost, azurefunctions, errors
Published: 2022-01-28 14:42:00

---
title: #AzureFunctions ⚡- Pip and TLS/SSL error on Debugging with #Python 🐍
published: true
date: 2022-01-18 14:00:00 UTC
tags: EnglishPost,AzureFunctions,EnglishPost,Error
canonical_url: 
---

Hi! There is something wrong with my current development environment. I have an Azure Function with these dependencies: And I got this error when I press F5 / Run the project in local mode. By default, Azure Functions works with a Python virtual environment. This helps to isolate our current dev environment, and also to… [Continue reading #AzureFunctions ⚡- Pip and TLS/SSL error on Debugging with #Python 🐍](https://elbruno.com/2022/01/18/azurefunctions-%e2%9a%a1-pip-and-tls-ssl-error-on-debugging-with-python-%f0%9f%90%8d/)
Rails React Streaming SPA
Published: 2022-01-27 09:21:24

#Introduction

[TLTR: Feel free to get the source code.](https://github.com/mwpenn94/kaleidoscope)

##Requirements
-The code should be written in ES6 as much as possible

-Use the create-react-app generator to start the project

-The Application should have one HTML page to render your react-redux application

-There should be 5 stateless components

-There should be 3 routes

-The Application must make use of react-router and proper RESTful routing 

-Use Redux middleware to respond to and modify state change

-Make use of async actions and redux-thunk middleware to send data to and receive data from a server

-The Rails API should handle the data persistence with a database. 

-Use fetch() within actions to GET and POST data from the API - do not use jQuery methods.

-The client-side application should handle the display of data with minimal data manipulation

##App Design
The overall plan for this single page application was to design a web site with a full-stack design using a Rails backend with a ReactJS frontend.

Based on the requirements, the app allows users CRUD functionality allows users CRUD functionality for their own streams.

Similar to large scale counterparts, it is designed for straightforward use with minimal explanation required for the user.

##Frontend Design
See the "backend/app/javascript" directory for more info.

##Backend Design
See the "backend" directory for more info.
awesome npm packages for data validation and parsing(user login validation)
Tags: beginners, productivity, javascript, webdev
Published: 2022-01-31 09:18:33

in this post we covering three of the best npm packages for data validation and schema building for javascript programming language

before you start reading, give a follow.

## 1.[Yup](https://github.com/jquense/yup)
Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

Yup's API is heavily inspired by Joi, but leaner and built with client-side validation as its primary use-case. Yup separates the parsing and validating functions into separate steps. cast() transforms data while validate checks that the input is the correct shape. Each can be performed together (such as HTML form validation) or seperately (such as deserializing trusted data from APIs).

## 2.[volder](https://github.com/devSupporters/volder)

**volder** is powerful Object schema validation, it lets you describe your data using a simple and readable schema and transform a value to match the requirements, it has custom error messages, custom types and nested schemas.

## 3. [joi](https://github.com/sideway/joi)
The most powerful schema description language and data validator for JavaScript.

### don't go without star that repos
Paracetamol.js💊| #52: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-02-12 16:26:26

## **Explica este código JavaScript**

```js
const info = {
  [Symbol('a')]: 'b'
}

console.log(info)
console.log(Object.keys(info))
```

-     A: `{Symbol('a'): 'b'}` y `["{Symbol('a')"]`
-     B: `{}` y `[]`
-     C: `{ a: "b" }` y `["a"]`
-     D: `{Symbol('a'): 'b'}` y `[]`

Respuesta en el primer comentario.

---
UI/UX DESIGN FOR BEGINNERS
Tags: beginners, webdev, productivity, ux
Published: 2022-02-16 06:14:04


Starting a journey in UI/UX for any newbie could be a bit challenging due to the fact that it is a novel skill. Do not worry. Here are some useful notes that will help you and, of course, prepare you well for this journey. 

I would not have prepared you well for this journey if I do not bring to bare what UI/UX connotes. UI/UX means User Interface/User experience. It is a skill that involves putting components, elements, texts and other features together for the purpose of defining, ideating and creating a typical web or mobile design structure. One can think about user interface to be  the beauty of the design while user experience can be thought of as the functionality and usability of the design. 

Any application design you see has gone through quite a lot of design thinking  processes that include: 
Empathy
Ideation
Prototype
Test 
Empathy: This is the ability of the designer to be emotional about what the user needs. The designer should be able to feel and know the needs of users.

Ideation: The UI/UX designer thinks about how the design should flow and what  problem to solve.

Prototype: This is the sample of the whole application design usually drafted  to see and test how it would work in real life use. It could also be sent to the user for a review. The review of the user is very critical as  UI/UX is not merely about colors and components, but is greatly dependent on  putting the user first and thinking about what the user needs. The satisfaction derived by the user is also determined by where and how each icons and features are placed. 

User Experience should have some basic principles, which are: 
•        Usable
•        Equitable
•         Enjoyable
•         Useful
Usable: As a UX designer, you must build a design that is usable by the users. It should have all the necessary features such that it is able to fulfil the users need 

Equitable: the designer makes sure the whole app is easier to use both on the mobile app and desktop app. 

Enjoyable: The design should be one which can be enjoyed by the user during use. It shouldn’t be a complicating and difficult to use app by the user.

Useful: Designs created by the UX designer should not be a dormant one that users can’t use. 

Test: This is the stage in which the design is being checked and modeled for its efficiency. It is tested using design tools like Figma or Adobe XD. At this testing stage, the design goes through three stages: internal test within your company; reviews with stakeholders; and external test with potential users. (Note: a stakeholder is a person you need to work with to complete the project or anyone who has some interest in the project.)  

New technologies are coming up virtually every day likewise mockup tool kits for Figma, therefore it is imperative to be informed and be updated about these new technologies.
Image credit: uxdesign.cc
Benefits of using Strapi with Typescript + Storybook tandem
Tags: storybook, strapi, typescript, cms
Published: 2022-02-16 14:31:08

We are working on react components integrated with strapi and  storybook. Both for me - a novice programmer and for Wojtek - a programmer with many years of experience and extensive knowledge, it brings many benefits.

Starting with strapi, we can determine the content type, decide what fields our components will need, e.g. whether a given component will contain a title, description, photo and whether, for example, it must meet a condition to be displayed. In strapi, we can manage the content that we want to include in a given component. We can also easily change it - so that a non-programmer can edit the content.

All data that we input into strapi can be obtained using GraphQL API or REST API. On top of that with the help of a graphql-codegen tool we can make the graphql response typed in typescript.

![GraphQL query and response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc28o4zznkqf0wae1n5p.png)

Typescript shows us what data and in what form component expects to receive. Typescript is also responsible for maintaining contract between strapi responses and components props.

![Typed strapi response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksf95xj9rwxdsqu6xdjg.png)

By passing these props to the components, we can display them by creating a story in the storybook. The storybook shows what a given component will look like and allows you to create different variants of component. We can create stories for different themes, multiple language versions and for example show negative scenarios, for when user forgot to input some data or we have had an backend issue, showcasing display of appropriate error message and gracefully handling those scenarios as well.

![Storybook example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnanofpikx7z87uo7xxt.gif)

This combination of strapi + sb + ts allows a front end developer to work without being strictly dependent on the backend. As long as the initial contract is maintained. But also using Strapi by itself which provides most of the CRUD operations out of the box, limits the amount of custom backend code that needs to be written significantly, which in turn speeds up the development process and amount of bugs that can be introduced.

However, it brings the most benefits for the client, who can :

- manage the content of his application in strapi without the help of a developer
- check how the components will look like, as well as all their variants in the storybook, while the application is still being worked on
- strapi is free and open-source CMS which is constantly being improved and enhanced by the community, making it a choice that in the future may support even more features
Do you want a beautiful developer portfolio website
Tags: showdev, javascript, webdev, productivity
Published: 2022-02-16 13:31:18

hello iam also working as a web builder.I built website under $50 because everyone needs a website for their productivity if you need any types of website contact me now through my email address

email id:myweb6529@gmail.com

!!!!please give your name and phonenumber in the mail!!!!
Node.js New Project Ideas Discussion
Tags: discuss, javascript, webdev, node
Published: 2022-02-18 12:52:02

Are you a software **developer **or just a **thinker **or innovator?

How many times you are searching for collaborator or contributor for your project ideas and you don't find them?

Well, you are in the right place!

I create this post to discuss new project ideas in **_Node.js_** and to find teammate for them!

_You can post comment for propose you ideas, then in the comment can be discussed new ideas or actively partecipate to the start of the project._

If the idea is good will be added in the last part of this post to give more prominence to the project.

**If you comment with a github repos**, the link will be added in the project description.

_I wish this can be helpful for open-source world.
Thank you in advance for your partecipation._
Day 3 of 100 days of Code
Tags: javascript, webdev, beginners
Published: 2022-02-18 22:29:50

![Blackjack game app learning javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgh0vhcrmsbh4u6npe69.jpg)

Today I learnt the use of the conditional if/else if statements and the query selector in JavaScript and created a blackjack app. Blackjack is a game that you win when your card summation is nearer or equals to 21. 21 is the golden summation, but if there isn’t anyone in the game that has the number, the nearest number to 21 wins the game. 
Conditional statements control behavior and determine whether or not pieces of code can be executed following an instruction. The types of conditional statements are:
    • The  ‘if’ statement
    • ‘Else if’ statement
    • ‘ else’ statement

The if statement is where if a condition is true, the blocks of code/statement will be executed. The else if statement is when the first condition is false then this will be executed. Then the else statement is where if all the statements preceding this statement are false then it will be executed.

Example 

```
let firstNumber = 6
let secondNumber =13
let sum = firstNumber + secondNumber
if (sum < 21) {
console.log(“ You could be the winner”)
}

```
Else if example

```

if (sum < 21) {
console.log(“ You could be the winner”)
}
else if ( sum ===21) {
console.log(“ Congratulations you have won the blackjack game” )
}

```
Else example

```
f (sum < 21) {
console.log(“ You could be the winner”)
}
else if ( sum ===21) {
console.log(“ Congratulations you have won the blackjack game” )
}
else{
console.log (“ Sorry better luck next time”)
}

```
Other two things I also learnt were the "==" and the "===".
The difference between them.
Example
`5 =='5'`
This will return true as it sees it as being similar irrespective of the data type difference. Hence you would say. It is not strict in differentiating.
`5==='5'` 
This will return false as there are two different datatypes even though they look similar in view. The first is number five while the second is a string data type.
Show 404s from Laravel's telescope directly from DB
Published: 2022-02-19 13:41:52

Not terribly efficient, but if you want to quickly review the recent 404s, will do in a pinch:

```
SELECT json_extract(content, '$.uri') AS uri, created_at 
FROM `telescope_entries` 
WHERE `content` LIKE '%404%' 
ORDER BY `sequence` DESC 
LIMIT 100
```
Day 27/100
Tags: 100daysofcode
Published: 2022-02-20 19:31:25

Almost bagged another section.

Day 27/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Today's Learning:**
- Linked List Continuation
- Linked Lists Research

**Additional Notes:**
Today was spent on more traditional revising by reading sources. This allowed me to learn on my own accord by getting away from the tutorial. I then continued on the tutorial and finished the section on the Linked Lists explanation.
Make a Shuffling "Fun Facts" Game About Presidents in AR
Tags: unity3d, gamedev, 3d, augmentedreality
Published: 2022-02-21 20:54:56

Today is President's Day 📜✒️ (enjoy your day off!). We created a shuffling game to share a fun fact about each of the top 5 historically popular presidents.

# Register
Don't have an API key? Make sure to register for FREE at [echo3D](https://console.echo3d.co/#/pages/contentmanager).

# Setup
- Clone the [repo](https://github.com/echo3Dco/Unity-PresidentsDay-echo3D-example)
- [Install](https://docs.echo3d.co/unity/installation) the echo3D Unity SDK
- Download the 3D models from the Models folder in the project
- Go to echo3D console and [click "Add to Cloud"](https://docs.echo3d.co/quickstart/add-a-3d-model) and upload the models
- Open the "scene" scene
- [Set the API key](https://docs.echo3d.co/quickstart/access-the-console) on the echo3D object in the Hierarchy using the the Inspector
- Play in Unity or [build and run the AR application](https://docs.echo3d.co/unity/adding-ar-capabilities#4-build-and-run-the-ar-application)

# Learn more
Refer to our [documentation](https://docs.echo3d.co/unity/) to learn more about how to use Unity and echo3D.

# Support
Feel free to reach out at support@echo3D.co or join our support channel on Slack.

# Screenshots

![Roosevelt.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645476508229/1QQk_Slp2.png)

![Lincoln.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645476512095/WkhNZUpGC.png)

![JFK.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645476522714/OFWZBmRVa.png)

---

> *echo3D [(www.echo3D.co](www.echo3D.co); Techstars 19') is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.*

![echo3D - Logo 2021 - Background - Round Edges.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645476555896/ijTTitjLn.png)
Separate numbers in input with Angular Directive
Tags: angular, javascript
Published: 2022-07-10 14:02:00

Imagine that you have an input tag in your project for entering credit card numbers and you want to separate the entered numbers with a few digits for better readability.
Using commands in Angular, we write it as follows.


First, we create a directive that only allows the user to enter numbers, arrows, and backspace.

```js
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appOnlyNumber]',
})
export class NumberDirective {
  constructor() {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event) {
    const charCode = event.which ? event.which : event.keyCode;

    if (
      (charCode >= 48 && charCode <= 57) ||
      (charCode >= 96 && charCode <= 105) ||
      (charCode >= 37 && charCode <= 40) ||
      charCode == 8 ||
      charCode == 16
    ) {
      return true;
    }

    return false;
  }
}
```

Then we write to the main directive. This directive executes commands during the 'keyup' event.
This directive has two inputs, one for 'all the digits of the credit card' and the other for 'the number of digits' to be separated.


```js
import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appDigiSeperator]',
})
export class DigiSeperatorDirective {
  @Input()
  detachableDigit: number;
  @Input()
  totalFigures: number;

  @HostListener('keyup', ['$event'])
  onKeyDown(event) {
    let enteredNumber = 
        this.check_number_not_longer_than_total_figure(
            this.remove_space_from_numbers(event.target.value)
        );

    const categorizedNumbers = [];

    for (
      let index = 0;
      index < enteredNumber.length;
      index += this.detachableDigit
    ) {
      const seperatedDigit = this.substring_numbers_by_digit(
        enteredNumber,
        index,
        this.detachableDigit
      );

      categorizedNumbers.push(seperatedDigit);
    }

    event.target.value = this.join_categorized_numbers(categorizedNumbers);
  }

  private remove_space_from_numbers(numbers: string) {
    return numbers.replace(/\s/g, '');
  }

  private check_number_not_longer_than_total_figure = (numbers: string) => {
    if (numbers.length > this.totalFigures) {
      return numbers.slice(0, this.totalFigures);
    }

    return numbers;
  };

  private substring_numbers_by_digit(
    numbers: string,
    startIndex: number,
    endIndex: number
  ) {
    return numbers.substring(startIndex, startIndex + endIndex);
  }

  private join_categorized_numbers(categorizedNumbers: number[]) {
    return categorizedNumbers.join(' ');
  }
}
```

Now use it in your compnents
```html
<input
  type="text"
  appOnlyNumber
  appDigiSeperator
  [detachableDigit]="4"
  [totalFigures]="16"
  [(ngModel)]="data"
/>

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

Here is complete code!
[See complete code](https://stackblitz.com/edit/angular-ivy-idtysn?file=src%2Fapp%2Fdigi-seperator.directive.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html)