teleren/devto huggingface dataset:
Introduction to Sustainable Web Development
Tags: webdev, sustainable, green, programming
Published: 2023-01-09 03:18:00

## Sustainable Web Development

Sustainable web development is the practice of building and maintaining websites in a way that is environmentally and socially responsible. This includes using resources efficiently, reducing waste, and minimizing negative impacts on the environment and society.

## Ways to Promote Sustainability in Web Development

Use green hosting:
- Choose a hosting provider that uses renewable energy sources and has a commitment to sustainability.
- Optimize website performance: Improve the speed and efficiency of a website to reduce energy consumption and carbon emissions.
- Recycle and reuse code: Save time and resources by reusing and repurposing code instead of starting from scratch for each project.
- Use open source software: Open source software is freely available and can be modified and distributed by anyone.
- Promote sustainability on client websites: Educate clients about the importance of sustainability and encourage them to adopt eco-friendly practices on their own websites.

## Benefits of Sustainable Web Development

Sustainable web development is not only good for the environment, but it can also benefit businesses and organizations by reducing costs, improving efficiency, and enhancing their reputation. By adopting sustainable practices, web developers can play a key role in building a more sustainable future for the internet.

## Organizations and tools that focus on promoting sustainability

There are several organizations and tools that focus on promoting sustainability in the tech industry and provide resources and guidelines for web developers and website owners looking to make their work more environmentally friendly.

One such organization is the Green Web Foundation (https://greenwebfoundation.org/). The Green Web Foundation is a nonprofit organization that works to identify and promote the use of green web hosting providers, as well as provide resources and tools for web developers and website owners to make their websites more energy efficient and environmentally friendly.

Another organization is the Sustainable Websites Initiative (https://sustainablewebsites.org/), a project of the Center for Sustainable Communication. The initiative aims to promote sustainable practices in web development and design, and provides resources and guidelines for creating eco-friendly websites. They also offer a certification program for websites that meet their sustainability standards.

In addition to these organizations, the website https://www.websitecarbon.com/ offers a tool for measuring and reducing the carbon footprint of websites. By using this tool, web developers and website owners can calculate the carbon emissions associated with their website and take steps to reduce them.
Complex queries with Ecto
Tags: elixir, ecto
Published: 2023-01-09 03:00:00

Ecto is a powerful library for working with databases in Elixir. One of its most useful features is the ability to construct complex queries using a simple, expressive syntax.

One way to build complex queries in Ecto is to use the `where` function, which allows you to specify conditions that must be met for a record to be included in the results. For example, you might use where to find all users who are over the age of 18 and have a certain role:

```elixir
import Ecto.Query

query = from u in User,
  where: u.age > 18 and u.role == "admin",
  select: u

users = Repo.all(query)
```

You can also use `or` to combine multiple conditions, like this:

```elixir
import Ecto.Query

query = from u in User,
  where: u.age > 18 or u.role == "admin",
  select: u

users = Repo.all(query)
```

Another useful function is `group_by`, which allows you to group records by a certain field. For example, you might use `group_by` to count the number of users in each role:

```elixir
import Ecto.Query

query = from u in User,
  group_by: u.role,
  select: {u.role, count(u.id)}

role_counts = Repo.all(query)

```
You can also use `order_by` to sort the results of a query. For example, you might use `order_by` to sort users by their age:

```elixir
import Ecto.Query

query = from u in User,
  order_by: u.age,
  select: u

users = Repo.all(query)
```

Because they are all functions you can pipe them to build one single query:

```elixir
import Ecto.Query

query = User
  |> where([u], u.age > 18)
  |> where([u], u.role == "admin")
  |> group_by([u], u.role)
  |> select([u], {u.role, count(u.id)})

users = Repo.all(query)

```

Notice how, in the previous example, we divided our where clause into 2 functions, you might find this way more readable when building your query in this case it's important to know that ecto will create the where clause using `and`.

One another important thing is that you can start your query with a Ecto Schema, like `User`, it will consider it the same as `from(u in User)`.

These are just a few examples of the complex queries that you can build with Ecto. With its simple, expressive syntax, Ecto makes it easy to build powerful queries that can retrieve exactly the data you're looking for.

For more ecto built in functions you can reach out to its [documentation](https://hexdocs.pm/ecto/Ecto.Query.html#functions).
Is Software Engineering more than just coding?
Tags: devjournal, softwareengineering, softwaredeveloper, programming
Published: 2023-01-09 03:00:00

Software engineering is far more than coding. 

It needs to tackle with following as well:


![Software Engineering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oppiomg79rn6xtz6ywgs.png)


Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more in DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
How to debounce a input text on React
Tags: react, javascript, tutorial
Published: 2023-01-09 02:50:23

## Let's explain what a debounce function
A debounce function does not execute at call time, it waits a specific number of times to be executed if the function it's called again before being executed, the time restarts, this will happen N number of times until the function can execute

## How can I achieve this with react?
### First we need to check how the `setTimeout`  function works

This function allows us to execute a block of code after a certain amount of time, it returns a unique identifier which will allow us to clear that `time out` every time we call our function with the help of another function called `clearTimeout` which gets an identifier of the `time out`

All this is possible thanks to the global scope of javascript, if want to learn more about this, you can check the [official documentation](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)

### Now we need to build our debounce function

 1.  Let's store the ID of the timeout
```
	let timeoutID  = null
```	
A varaible with no value on it
	
 2. Let's build the function that will clear the `time out` and set the new one
```
const debounceFunction = (params) =>{
	clearTimeout(timeoutID);// the timeout will be removed, so the code won't be executed
	timeoutID = setTimeout({ // set the new timeout
		//...your custom code
	},500)
}
```
## Let's check a full example
{% codesandbox https://codesandbox.io/embed/buscador-solution-1-3p7trx?fontsize=14&hidenavigation=1&theme=dark %}
Somewhere in the Universe...
Tags: codepen, webdev, beginners
Published: 2023-01-09 02:39:22

[Somewhere in the Universe](https://codepen.io/arbrazil/pen/VwBZWjv)

####I'm still relatively new to CodePen..

I realize it is a space for sharing fun and interesting projects. 
This project is a combination of the Glowing Orbe and falling snow projects I've seen on the platform.
I am particularly fascinated by stars, constellations, and constellations and truly enjoy opportunities to create these types of experiences.
90S Coffee Vietnam
Published: 2023-01-09 02:21:58

90S Coffee Vietnam chuyên cung cấp cà phê giá sỉ - cà phê hạt rang xay - cà phê hạt rang mộc - cafe nguyên chất tại TPHCM.

✅Sản phẩm của 90S Coffee là sản phẩm cà phê sạch - cà phê nguyên chất 100% nên được rất nhiều khách hàng, đặc biệt là các chủ quán cafe ưa thích và sử dụng.

✅90S Coffee luôn cam kết đảm bảo chất lượng cà phê là tốt nhất và giá cà phê hợp lý nhất.

✅90S Coffee có chính sách hỗ trợ cho chủ quán cafe, các quán cafe mới mở hoặc đang được triển khai cực kỳ tốt.

✅Hỗ trợ tư vấn trực tiếp tại quán KH

✅90S Coffee hỗ trợ thử mẫu cafe miễn phí trực tiếp tại công ty và tham quan xưởng rang cà phê của 90S Coffee.

#90scoffee #capheangxay #caphenguyenchat, #caphehatrangxay #caferangmoc

Thông tin liên hệ
90S Coffee Vietnam
Địa chỉ: 20 Đường số 3, phường Trường Thọ, Thành phố Thủ Đức

Hotline: 1800888906 hoặc 0929 899 998

Zipcode: 720300

Email:  info@90scoffee.vn

Ngày sinh: 2017-12-19

Maps: [https://goo.gl/maps/NNWzvtwp4PTy1o9p6 ](https://goo.gl/maps/NNWzvtwp4PTy1o9p6 )       

Website: [https://90scoffee.vn/](https://90scoffee.vn/)

Youtube: [https://www.youtube.com/@90scoffee1/about](https://www.youtube.com/@90scoffee1/about)

Twitter: [https://twitter.com/90SCoffeeVN](https://twitter.com/90SCoffeeVN)

Facebook: [https://www.facebook.com/90scoffeevna](https://www.facebook.com/90scoffeevna)

Instagram: [https://www.instagram.com/90scoffeevietnam/](https://www.instagram.com/90scoffeevietnam/)

Pinterest: [https://www.pinterest.com/90scoffeevietnam/](https://www.pinterest.com/90scoffeevietnam/)

Tumblr: [https://www.tumblr.com/90scoffeevietnam](https://www.tumblr.com/90scoffeevietnam)

Linkedin: [https://www.linkedin.com/in/90scoffee/](https://www.linkedin.com/in/90scoffee/)

Medium: [https://medium.com/@90scoffeevietnam/about](https://medium.com/@90scoffeevietnam/about)

Vimeo: [https://vimeo.com/90scoffee](https://vimeo.com/90scoffee)

Blooger: [https://www.blogger.com/profile/02922807394782412418](https://www.blogger.com/profile/02922807394782412418)

Social.msdn.microsoft.com: [https://social.msdn.microsoft.com/profile/90s%20coffee%20vietnam/](https://social.msdn.microsoft.com/profile/90s%20coffee%20vietnam/)

Soundcloud: [https://soundcloud.com/90scoffee](https://soundcloud.com/90scoffee)

Evernote: [https://www.evernote.com/shard/s356/sh/08547de2-4257-f5b2-1039-6996013f311c/4df62fdbebde50a8b877fcc8db581d7e](https://www.evernote.com/shard/s356/sh/08547de2-4257-f5b2-1039-6996013f311c/4df62fdbebde50a8b877fcc8db581d7e)

Linktr.ee: [https://linktr.ee/90scoffee](https://linktr.ee/90scoffee)
The Fundamentals of Floating Point Numbers in Computer Systems
Tags: tutorial, computerscience, beginners, datascience
Published: 2023-01-09 02:13:43


As a programmer, you may have heard the term "floating point number" thrown around, but may not fully understand what it means or how it is represented in a computer system. In this post, we'll explore floating point numbers and how they are represented in computer systems.

![Binary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98mrdiapf9ppa96omwt5.jpg)

A floating point number is a type of numerical representation that allows us to represent a wide range of values with a fixed number of digits. It is called a "floating point" number because the decimal point can "float" and represent values with a fractional component.

In computer systems, floating point numbers are usually represented in a format known as `IEEE 754.` This standard defines how floating point numbers should be represented in a computer system in order to ensure consistent behavior across different hardware and software platforms.

The IEEE 754 standard uses a "scientific notation" approach to represent floating point numbers. Essentially, a floating point number is represented as a mantissa and an exponent. The mantissa represents the significant digits of the number, and the exponent determines where the decimal point should be placed.

```
For example, consider the number 123.45. In scientific
notation, this can be written as 1.2345 x 10^2. In this
representation, the mantissa is 1.2345 and the exponent is 2.
```

In IEEE 754 representation, the mantissa and exponent are stored as binary numbers. The mantissa is typically stored using a fixed number of bits (such as 23 bits), and the exponent is stored using a larger number of bits (such as 8 bits).

![IEEE 754 representation of float](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8223q1n9ib6w6v9kb8yh.png)

Note that it may be stored using a fixed number of bits (such as 52 bits), and the exponent is stored using a larger number of bits (such as 11 bits).


![IEEE 754 representation of float](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv2nu04yj73zrizatwhy.png)

One important aspect of floating point numbers is that they have a limited precision. This means that they can only represent a certain number of significant digits, and numbers with more digits will be rounded off. This can lead to some loss of accuracy when working with floating point numbers.

In summary, floating point numbers are a type of numerical representation that allows us to represent a wide range of values with a fixed number of digits. They are represented in computer systems using the IEEE 754 standard, which stores the mantissa and exponent as binary numbers. While they offer a lot of flexibility, they do have a limited precision and can introduce some loss of accuracy.

[Learn more on cprogramming.c](https://www.cprogramming.com/tutorial/floating_point/understanding_floating_point_representation.html)

[From Berkeley university](https://inst.eecs.berkeley.edu//~cs61c/sp06/handout/fixedpt.html) <br>
TERMUX CONFIGURATION
Tags: zsh, terminal, linux, github
Published: 2023-01-09 02:05:49

---
title: TERMUX CONFIGURATION
published: true
description: personalizacion de termux para programar
tags: zsh, terminal, linux, github
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-09 01:02 +0000
---

### Install

- Ingresamos a la pagina F-Droid para poder descargar Termux

### Update

```shell
pkg update && pkg upgrade
```

### mirror error
```shell
termux-change-repo
```
- select first and second first and enter
React & TypeScript: How to use Context API and useReducer with Firestore Database?
Tags: react, typescript, firebase, tutorial
Published: 2023-01-09 01:18:20

Here is an example of how you could create a React Context API and use the useReducer hook with TypeScript to manage state for a list of Amazon products stored in a Firestore database and more explanation for the code. 

```react
import React, { createContext, useReducer, Reducer, useEffect } from 'react';
import { db } from './firebase';

// Create a context for the products
export const ProductsContext = createContext<{
  products: Product[];
  dispatch: React.Dispatch<ProductAction>;
}>({
  products: [],
  dispatch: () => {},
});

// Define the types for the state and actions
type Product = {
  id: string;
  name: string;
  price: number;
};

type ProductAction =
  | { type: 'ADD'; product: Product }
  | { type: 'DELETE'; id: string }
  | { type: 'UPDATE'; id: string; product: Product }
  | { type: 'SET'; products: Product[] };

// Define the reducer function
const productsReducer: Reducer<Product[], ProductAction> = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [...state, action.product];
    case 'DELETE':
      return state.filter((product) => product.id !== action.id);
    case 'UPDATE':
      return state.map((product) =>
        product.id === action.id ? action.product : product
      );
    case 'SET':
      return action.products;
    default:
      return state;
  }
};

//In React version 18
type ProductsProviderProp = {
   children: ReactNode;
}

// Create a provider component for the products context
const ProductsProvider: React.FC<ProductsProviderProp> = ({ children }) => {
  const [products, dispatch] = useReducer(productsReducer, []);

  // Load the products from the Firestore database when the component mounts
  useEffect(() => {
    const unsubscribe = db.collection('products').onSnapshot((snapshot) => {
      const products: Product[] = [];
      snapshot.forEach((doc) => {
        products.push({ id: doc.id, ...doc.data() });
      });
      dispatch({ type: 'SET', products });
    });

    // Unsubscribe from the snapshot listener when the component unmounts
    return () => unsubscribe();
  }, []);

  // Return the products context provider with the current state and dispatch function
  return (
    <ProductsContext.Provider value={{ products, dispatch }}>
      {children}
      ...
```
This is just to show you how to use React and Typescript with Context API and useReducer hook,not a complete app.

Got any questions, please leave a comment.
LEARN: Take a Break Reminder App with Next.js and Microsoft Graph
Tags: javascript, nextjs, webdev, microsoftgraph
Published: 2023-01-09 02:01:27

---
title: LEARN: Take a Break Reminder App with Next.js and Microsoft Graph
published: true
description: an article to show a workshop how you can learn to create a reminder app using Next.js & Microsoft Graph
tags: #javascript #nextjs #webdev #microsoftgraph
canonical_url: https://microsoft.github.io/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/
series: LEARN - JavaScript Applications with Microsoft Graph
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-09 01:44 +0000
---

[![reminder.gif](https://i.postimg.cc/ry4WYPP4/reminder.gif)](https://postimg.cc/XXVprQ3N)

Hi, Coders!

I am here again with another wonderful workshop for you today!
But now how to create a Reminder Application with:

✅ Next.js 
✅ TypeScript 
✅ Microsoft Graph

In this workshop, you will learn how to build a simple application with Next.js and Microsoft Graph that will send an alert to the user each 60 minutes, if the user status is set to `Available`. If so, the user will need to take a break.

So, do you want to know how to create a Reminder Application with Next.js and Microsoft Graph? Check out this workshop!

👉 **[REMINDER APP WORKSHOP HERE](https://microsoft.github.io/MicrosoftCloud/tutorials/docs/Take-A-Break-Reminder-App/)**

And, happy coding! 🚀🚀🚀
Code Smell 191 - Misplaced Responsibility
Tags: webdev, javascript, beginners, programming
Published: 2023-01-09 01:59:35

*You have a clear responsibility for the wrong object*

> TL;DR: Don't be afraid to create or overload the proper objects.

# Problems

- [Bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) Fault.

# Solutions

1. Find actual behavior on the real objects using the [MAPPER](https://dev.to/mcsee/what-is-wrong-with-software-5pa).

2. Answer the question: 'Whose responsibility is..?'

# Context

Finding responsible objects is a tough task.

If we talk to anybody outside the software world, they will tell us where we should place every responsibility.

Software engineers, on the contrary, tend to put behavior in strange places like [helpers](https://dev.to/mcsee/code-smell-22-helpers-2j6j).

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/66489fee9b0707d7514d520c515ad102)
```javascript
function add(a, b) {
  return a + b;
}
// this is natural in many programming languages,
// but unnatural in real life

class GraphicEditor {
  constructor() {
    this.PI = 3.14;
    // We shouldn't define it here
  }

  pi() {
    return this.PI;
    // Not this object responsibility
  }

  drawCircle(radius) {
    console.log(`Drawing a circle with radius ${radius}
    and circumference ${2 * this.pi() * radius}.`);
  }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/57f86bc7ab8f2e4c67039733ddacb118)
```javascript
class Integer {

  function add(adder) {
    return this + adder;
  }
}
// This won't compile in many programming languages
// But it is the right place for adding responsibility

class GraphicEditor {
  drawCircle(radius) {
    console.log(`Drawing a circle with radius ${radius} 
    and circumference ${2 * Number.pi() * radius}.`);
  }
}
// PI's definition is Number's responsibility

```

# Detection

[X] Manual

This is a semantic smell.

# Exceptions

- Some languages force you to add protocol in some objects and not on everyone (like primitive integers, Strings, Arrays, etc.)

# Tags

- Behavior

# Conclusion

If you put the responsibilities in the proper object, you will surely find them in the same place.

# Relations

{% post https://dev.to/mcsee/code-smell-22-helpers-2j6j %}

{% post https://dev.to/mcsee/code-smell-63-feature-envy-502f %}

# More Info

- [Clean Code Book](https://amzn.to/3k2apxY)

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [Austin Neill](https://unsplash.com/@arstyy) on [Unsplash](https://unsplash.com/photos/OWbH9a8Yi2I)
    
* * *

> We know an object by what it does, by what services it can provide. That is to say, we know objects by their behaviors.

_David West_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
React & TypeScript: How to use Context API and useReducer hook by creating authentication basic app.
Tags: typescript, react, beginners, tutorial
Published: 2023-01-09 01:38:30

Here is an example of how you could use React Context and the useReducer hook with TypeScript to create an ecommerce authentication app:

First, you would need to create a context for the authentication state:

```react
import React, { createContext } from 'react';

export const AuthContext = createContext<{
  isAuthenticated: boolean;
  user: User | null;
  login: (username: string, password: string) => Promise<void>;
  logout: () => void;
}>({
  isAuthenticated: false,
  user: null,
  login: () => Promise.resolve(),
  logout: () => {},
});

```

Next, you would define the types for the state and actions:

```react
type User = {
  id: string;
  username: string;
  email: string;
};

type AuthAction =
  | { type: 'LOGIN'; user: User }
  | { type: 'LOGOUT' };
```
Then, you would define the reducer function to handle the login and logout actions:

```react
const authReducer: Reducer<{ isAuthenticated: boolean; user: User | null }, AuthAction> = (
  state,
  action
) => {
  switch (action.type) {
    case 'LOGIN':
      return { isAuthenticated: true, user: action.user };
    case 'LOGOUT':
      return { isAuthenticated: false, user: null };
    default:
      return state;
  }
};

```
Finally, you would create a provider component to wrap your app and manage the authentication state:

```react
import { db } from './firebase';

const AuthProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  // A function to handle login requests
  const login = async (
  ...
```
This is just to show you how to use React and Typescript with Context API and useReducer hook not a complete authentication app. 

I hope this helps! Let me know if you have any questions or need further assistance.