teleren/devto huggingface dataset:
Generate suggestions for email input
Tags: html, react, css, javascript
Published: 2023-08-23 12:23:40

Providing input suggestions to the user can imporve your apps user expirence 2x more!

Also, providing suggestions makes sure that the user have the ability to easily choose the options without much hussle. 

Recently while i was building an app i stumbled upon a similar use case where i needed to show some email suggestion when user is trying to register his/her account for the first time.

I went through couple of UI designs that fits the most for my app.

Let's see how we can easily create a suggestible email input just using html -

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

As you can see from the above code, i have created an input wrapper which contains a label and an input field

`<input type="email" size="40" list="defaultSuggestions" placeholder="johndoe@test.com"/>`

Here we are setting the attribute `type` as email, `size` is basically the width of the input field, `list` is required in order to show the suggestion based on the key that we have given to the list attribute, `placeholder` attribute enables you to provide a hint text about the values that need to be entered in an input field.

I have also added my own styles to the input fields, feel free to add your own.

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

Next let's see how we can bring in the suggestion for our email input field. 

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

The `datalist` attribute that you can see the above code is what makes the email input field to show the recommended options  that's available to choose from the dropdown.

The `datalist` contains an `id` attribute which should be same as the name given to the email input attribute `list`. In this example the `id` is `"defaultSuggestions"`.

`datalist` also contains child elements that's required to show the suggestions. `option` tag lets you create different options or it can represent menu items in popups or dropdowns. `option` tag takes `value`as its attribute, the `value` shows the suggestible values that will be used inside the email input.

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

And that's it, you have just created your email input suggestions.

Click on the email input and you will see the magic!

Cheers!👋

Let's connect - https://twitter.com/reachsujith
postgres create csv from select command
Published: 2023-08-23 12:17:52

```
BEGIN; -- Start a transaction


\COPY (SELECT * FROM addresses) TO '/var/www/html/backups/addresses.csv' WITH CSV HEADER;

\COPY (SELECT * FROM carts) TO '/var/www/html/backups/carts.csv' WITH CSV HEADER;

\COPY (SELECT * FROM categories) TO '/var/www/html/backups/categories.csv' WITH CSV HEADER;

\COPY (SELECT * FROM failed_jobs) TO '/var/www/html/backups/failed_jobs.csv' WITH CSV HEADER;

\COPY (SELECT * FROM orders) TO '/var/www/html/backups/orders.csv' WITH CSV HEADER;

\COPY (SELECT * FROM products) TO '/var/www/html/backups/products.csv' WITH CSV HEADER;

\COPY (SELECT * FROM profiles) TO '/var/www/html/backups/profiles.csv' WITH CSV HEADER;

\COPY (SELECT * FROM storage_files) TO '/var/www/html/backups/storage_files.csv' WITH CSV HEADER;

\COPY (SELECT * FROM users) TO '/var/www/html/backups/users.csv' WITH CSV HEADER;

\COPY (SELECT * FROM wishlists) TO '/var/www/html/backups/wishlists.csv' WITH CSV HEADER;


COMMIT; -- End the transaction
```
Python libraries and Framework
Tags: python, beginners, programming, discuss
Published: 2023-08-23 12:12:22

##<u>Web Development</u>

1. Django
2. Flask
3. FastAPI
4. Pyramid
5. Tornado
6. Bottle
7. CherryPy

##<u> Machine Learning </u>

1. TensorFlow
2. PyTorch
3. Scikit-learn
4. Keras
5. XGBoost
6. LightGBM
7. CatBoost
8. Pandas
9. NumPy
10. SciPy

##<u> Automation testing</u>

1. Selenium
2. Appium
3. Cypress
4. TestNG
5. JUnit
6. PyTest
7. Cucumber
8. Robot Framework
9. Watir
10. Protractor
"Unlocking Value: The Power of Bundling Various Service Solutions"
Published: 2023-08-23 12:06:25

Over the past several years, we've witnessed the emergence of various "X-as-a-Service" models, such as Software as a Service (#SaaS), Platform as a Service (#PaaS), Infrastructure as a Service (#IaaS), Function as a Service (#FaaS), Database as a Service (#DBaaS), Security as a Service (#SECaaS), Storage as a Service (#STaaS), Communication as a Service (#CaaS), Analytics as a Service (#AaaS), and Blockchain as a Service (#BaaS). These services have become critical across multiple sectors, addressing diverse use cases by combining them in innovative ways.

More details on the post visit :https://www.linkedin.com/feed/update/urn:li:activity:7099980381977800704/
Startups with crazy Hiring Processes: please don't.
Tags: discuss, career, watercooler
Published: 2023-08-23 12:05:59

Somewhat of a venting post, though I will try to maintain a constructive tone.

Today I was contacted by a young company, a Startup that has survived the early years and now seeks to expand their team. 

So far, so good. 

The recruiter was exquisite explaining both the current situation and what are they specifically looking for.

Then she explained their hiring process:

***

- [✅] initial HR call
- Cultural fit: 1h conversation 
- First Tech Interview: 1h tech conversation
- 30 min call with the CTO
- Code assignment: between 3 and 8 hours - take - home assigment (up to the candidate)
- 1h Code Review with the Teach lead discussing the solution.
- Final interview with the team. (30m ~ 1h)

***

Look, I get it. Finding the right team fit is crucial. But seriously, this marathon of a process feels like it could do more harm than good. 

I just didn't start this road. 

These kind of processes may work for those shiny FANG-level companies. In this case, this particular company wasn't offering a salary over-the-top.

***

Possible changes: remove the code assignment and its review. 

```diff
initial HR call
Cultural fit: 1h conversation 
First Tech Interview: 1h tech conversation
30 min call with the CTO
- Code assignment: between 3 and 8 hours - take - home assigment (up to the candidate)
- 1h Code Review with the Teach lead discussing the solution.
- Final interview with the team. (30m ~ 1h)
+ You're IN; just a friendly conversation with the team, not part of the process.
``` 

***

 Does this hiring process seem like the usual approach to you? 

-- 
Thanks for reading 💛.
Bienvenidos a Vuestro Nuevo Espacio AWS
Tags: community, developers
Published: 2023-08-23 11:08:50

Hola a tod@s!

Es un placer darles la bienvenida a este nuevo espacio comunitario, un rincón digital donde los entusiastas de la tecnología AWS podrán encontrar y compartir contenido técnico en español. 

**¿Por qué en español?** Porque creemos firmemente en la importancia de hacer que el conocimiento técnico sea accesible para la comunidad de habla hispana, que a menudo se encuentra subrepresentada en este ámbito.

**Nuestra misión** es simple: queremos ser el punto central donde personas como tú puedan compartir sus conocimientos, experiencias y aprendizajes en el mundo AWS. Desde tutoriales y artículos hasta entrevistas con expertos, aquí encontrarás una variedad de recursos que te ayudarán a crecer tanto profesional como personalmente.

Esta comunidad se basa en el principio de que la mejor forma de aprender es enseñar. Por lo tanto, te invitamos a que seas parte activa de este espacio. Comparte tus ideas, plantea preguntas y contribuye a crear un ecosistema enriquecedor para todos.

Únete a nosotros en esta nueva aventura para hacer del conocimiento técnico en español un motor de cambio.

¡Hasta pronto!
Push, Pop, Shift, Unshift : An Easy way to remember
Tags: javascript, beginners, webdev, programming
Published: 2023-08-23 11:22:23

JavaScript can be confusing in the beginning and this article will help you to easily remember & differentiate between the push(), pop(), shift() and unshift() methods.

## Push() and Unshift()-> 'u' is common
The trick is to observe that the letter **U** is used to spell push and unshift. Hence, they have similar use cases.
1. For **Adding one or more elements** in the array.
2. Returns the length of the new array.
3. Push() adds elements to the end.
4. Unshift() adds elements to the beginning.

_Now, you know an easier way to remember **push() and unshift() methods**._ The pop and shift can be easily associated with each other.

## Pop() and Shift() ->
The trick is to see that unlike push() and unshift() method (where the letter 'u' is common). Nothing is matching here. So, we can keep the pop and shift method in one group. Their use cases are similar as follows: 

1. **Both are used for removing.**
2. Returns the item that was removed.
3. Pop() removes from the end.
4. Shift() removes from the start of the array.

I hope this helps you to easily remember the methods and their uses.
Feel free to reach out for feedback (good or bad), or just to connect.
Parts of a Browser
Tags: webdev, programming, codenewbie, frontend
Published: 2023-08-23 11:01:46

Web browsers have become a very useful tool in our digital lives, enabling us to access and interact with the information available on the Internet. In this article, we will delve into the essential parts of a web browser and uncover how they collaborate to provide a seamless browsing experience.

• User Interface (UI)
The user interface is the graphical representation of the browser that users interact with. It includes components like the address bar, navigation buttons, bookmarks, and the settings menu. The UI is designed to be user-friendly, allowing users to navigate the web easily.

• Address Bar
The address bar, also known as the URL bar, is where users enter the web addresses of the websites they want to visit.

• Tabs and Windows
Tabs allow users to open multiple web pages within a single browser window. Tabs make multitasking more efficient, as users can switch between different websites without opening multiple browser windows.

• Rendering Engine
The rendering engine is the heart of a web browser, responsible for displaying the content of web pages. Different browsers use different rendering engines. The rendering engine renders HTML, CSS, and JavaScript to create the visual representation of a webpage. Some examples of rendering engines are Blink (Google Chrome and Microsoft Edge), Gecko (Firefox), WebKit (Safari) and Trident (Internet Explorer).

• Browser Engine
The browser engine, also known as the layout engine, coordinates with the rendering engine, user interface, and other components. It processes requests from the rendering engine to display web content in the browser window. For instance, the Safari browser uses the Webkit engine, Google uses blink and Firefox uses the Gecko engine.

• JavaScript Engine
JavaScript is a powerful scripting language used to create interactive and dynamic web content. The JavaScript engine interprets and executes JavaScript code present on web pages. This enables features like form validation, animations, and real-time updates. An example of a JavaScript engine is v8 which is capable of running JS scripts, it powers Chrome, NodeJS, Deno and many others.

• Extensions and Add-ons
Extensions and add-ons enhance a browser's functionality by adding features and customizations. Extensions are typically built using HTML, CSS, and JavaScript, allowing developers to tailor the browsing experience to their preferences. For example, an Ad Block extension on chrome blocks ads on websites to make the users experience better.

• Networking
Browsers communicate with web servers over the internet through Transmission Control Protocol/ Internet Protocol to fetch web content. The networking component handles tasks such as establishing connections, sending requests, and receiving responses. It plays a crucial role in loading web pages quickly and efficiently.

Web browsers are software that brings the internet to our fingertips. They involve the collaboration of various components, each serving a specific purpose that is to provide a seamless browsing experience.
Issuing wildcard certificates on Kubernetes Gateway API (Part 1/2)
Tags: kubernetes, cloudflare, devops, cloud
Published: 2023-08-23 10:42:39

What you will need to follow along:

1. A domain name and a cloudflare api token with the following permissions:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myupv8z7u11s8x3z977l.png)
2. Helm

### First install cert-manager
```bash
#Add the helm repo
helm repo add jetstack https://charts.jetstack.io

# You can remove the experimental support if you don't need it 
helm install cert-manager jetstack/cert-manager --version v1.12.3 \
    --namespace cert-manager \
    --set installCRDs=true \
    --create-namespace \
    --set "extraArgs={--feature-gates=ExperimentalGatewayAPISupport=true}"
```

Validating the deployment by executing ```kubectl get pods -n cert-manager``` should produce the following output

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

We need cluster issuer to be able to create certificates in our cluster

First we need to create scecret with the cloudflare token in the cert manager space
```yaml
apiVersion: v1
kind: Secret
metadata:
  name: cloudflare-api-token-secret
  namespace: cert-manager
type: Opaque
stringData:
   api-token: ${CLOUDFLARE_API_TOKEN}
```

Then we can create the cluster issuer:
```yaml
apiVersion: cert-manager.io/v1
kind: ClusterIssuer
metadata:
  name: cloudflare-domain-issuer
spec:
  acme:
    email: email-to-register-domain
    server: https://acme-v02.api.letsencrypt.org/directory
    privateKeySecretRef:
      name: letsencrypt-prod
    solvers:
    - dns01:
        cloudflare:
          email: cloudflare-email
          apiTokenSecretRef:
            name: cloudflare-api-token-secret
            key: api-token
```

`kubectl get cluster issuer`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k0y84ri3tlw4r4ui45m.png)

if the cluster issuer is ready then we can issue our wildcard certificate
secretName: fine-ops: Specifies the name of the Kubernetes Secret where the generated certificate and private key will be stored.

<div class="note">

**Note:** `secretName` specifies the name of the Kubernetes Secret where the generated certificate and private key will be stored.

</div>

```yaml
apiVersion: cert-manager.io/v1
kind: Certificate
metadata:
  name: certificate-fine-ops
  namespace: default
spec:
  dnsNames:
    - "*.fine-ops.com"
  secretName: fine-ops
  issuerRef:
    name: cloudflare-domain-issuer
    kind: ClusterIssuer
```
`kubectl get cr `

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


Here you have it :) 

Using the certificate in the kubernetes Gateway API
php root namespace functions list
Tags: php
Published: 2023-08-23 10:40:22

Below is a list of functions in php which benefit from being prefixed with a root namespace, for example `\in_array()`

```
array_slice
assert
boolval
call_user_func
call_user_func_array
chr
count
defined
doubleval
floatval
func_get_args
func_num_args
get_called_class
get_class
gettype
in_array
intval
is_array
is_bool
is_double
is_float
is_int
is_integer
is_long
is_null
is_object
is_real
is_resource
is_string
ord
strlen
strval
```


Source:
https://github.com/php/php-src/blob/f2db305fa4e9bd7d04d567822687ec714aedcdb5/Zend/zend_compile.c#L3872
Next.js Hangout Thread
Tags: nextjs, discuss, watercooler
Published: 2023-08-23 10:37:24

Hey, this is the 4th weekly hangout thread.

This is a post where you can discuss anything related to Next.js.

You can also share anything new you've worked on with Next.js or any new articles you've created which talk about Next.js.

Feel free to ask any questions as well!
Building a pseudo-infinite scroller
Tags: swift, ios
Published: 2023-08-23 10:36:11

So you were given the task of building an infinite table view or carousel, and they want it for yesterday. Now you're scratching your head wondering about the inner workings of a table view.

Fret not. There's a quick solution for this, or a temporary workaround while you don't build the real thing.

## What we'll do

We'll make a table view 10,000 cells long, point the viewing window to the middle of the collection, and cycle through the data source.

## Before we start

I won't build anything from scratch here. I'll consider you have a working table view (or collection view) that you want to convert into an infinite scroller.

I'll do this based on a table view, all changes are made on the table view controller / data source. It isn't much different for using a collection view.

## How to

First up, go to your `tableView(tableView:, cellForRowAt:)` method, and replace the instances of `indexPath.row`, with `indexPath.row % datasource.count`.

This will make sure you keep getting data when the table view asks for an element outside the datasource range.

Next, create the constant below:
```swift
let numberOfCells = 10_000
```

This will be the size of your table view. The user can obviously reach the end of the table view, but it will take them scrolling for a long time in one direction, which is an unlikely behaviour.

Then replace `tableView(tableView: numberOfRowsInSection:)` with:
```swift
override
func tableView(_ tableView: UITableView,
			   numberOfRowsInSection section: Int)
-> Int
{
	return numberOfCells
}
```

Next, add the following line to `viewDidLoad()` to avoid revealing our secret:
```swift
tableView.showsVerticalScrollIndicator = false
```

This will hide the scroll indicator, which would indicate to the user that they're not really seeing an infinite table view.

And to finish up, add the below to `viewDidAppear(:)`:
```swift
let indexPath = IndexPath(row: numberOfCells / 2, section: 0)
tableView.scrollToRow(at: indexPath, 
                      at: .top, animated: false)
```

This last part will point the scroll view to the middle of the table.

There you go, now you can run it and see it working yourself.

## Limitations
Again, this isn't a truly infinite table view. Even though it's hard to reach the ends of the table in any real-life scenario, this is still a possible scenario, especially if you need to programmatically manipulate the scroll position for some reason.

Also, you may think 10,000 is a small number and want some extra leeway. That's fine, but don't go too crazy, there is an increase in the memory footprint, and it may get slow quickly especially in old hardware.

Hope you find this useful.
How to save hours of debugging
Tags: debugging, tips, beginners, programming
Published: 2023-08-23 10:32:04

_tl;dr: In the beginning of debugging, deliberately narrow down the scope as much as possible._

Got some slimy bug the other day. Spent a couple of hours trying to track it down, but it still was slipping through my radar.

Tried to go through the code step by step.
Run it step by step.
Was tracking the variables and how they change.

Nasty bug still had a place to hide in the lands of code.


Then an idea came to my mind:
_maybe narrowing down the scope would remove unnecessary overhead?_

I was going through the code anew, answering questions such as:
-   where exactly does it fail?
-   what smallest change produces the bug?

By narrowing down the scope I avoided:
-   going through much of unnecessary code
-   having lots of changes, which could cause the bug
-   having to navigate among lots of files
-   switching constantly between high level and low level code while debugging
-   etc.

The bug got no more caves to hide in.
In minutes I spotted a trivial typo I made.
All tests finally passed.

This evolved into the technique I call a _deliberate bug localization_.


Another example I've applied it to involves tracking down the failing environment: does the code work locally? in a container? on the server? etc. 

Once the environment is identified, then I could check what's the actual difference between the environments (maybe some libs are missing, different versions of dependencies, etc.)

Less heuristics + more strategy = getting things done.


Hope that helps!

In case anyone has experience with this or other thoughts, I'm happy to hear them! :)


[Original post.](https://aidas.site/blog/how-to-save-hours-of-debugging/)
Digital Purple Hat for UX Designers & Developers
Tags: inspiration, dev, calltoinspiration
Published: 2023-08-23 10:29:42

## **Small details for very exacting ideas!**


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

Call for inspiration using the purple hat for when you have inspiration blocks or need fresh new ideas.

> Details make the difference, without them everything would be much more boring. Therefore every detail counts!

We are so saturated with information nowadays and there is always a lot of work to be done. Creating CallToInspiration has been a source of help that every designer can use. Imagine you want to design a platform, already from the login part to the profile section you will need new ideas.

Every great design is made up of unique and precious pieces. Every detail is wrapped in a wrapping that makes a design unforgettable. Call to Inspiration has that mission for every great designer.
Open Source ABCs: JavaScript
Tags: opensource, discuss, 100daysofoss
Published: 2023-08-23 10:29:00

---
title: Open Source ABCs: JavaScript
published: true
description: Join our #100DaysOfOSS blog series as we explore the world of Open Source Software (OSS) from A to Z! Every week, we'll discuss two new letters of the English alphabet. Share your thoughts, ideas, and favorite OSS projects for each letter. Let's celebrate the power of open source together! 
tags: opensource, discuss, 100DaysOfOSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxwg4ygmybnni1tpwdx3.png
# Use a ratio of 100:42 for best results.
published_at: 2023-08-23 10:29 +0000
series: 100DaysOfOSS
canonical_url: https://opensauced.pizza/docs/community-resources/open-source-abcs-javascript/
---

Welcome to our [#100DaysOfOSS series](https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k). Until October 31, we'll be doing  Open Source Software (OSS) terms from A to Z. We'll be diving into a different letter of the English alphabet, uncovering OSS concepts, and sharing our thoughts on them.

Today, we're covering the letter "J" for JavaScript. 

**JavaScript**: JavaScript is a widely used programming language in open-source, front-end web development. It allows developers to add behavior, interactivity, and functionality to web pages, making them more engaging and responsive.

Now, we want to hear from you! What other OSS terms can you think of that start with the letter "J"? 

Remember to use the hashtag #100DaysOfOSS if you share on social media, and don't forget to tag us [@saucedopen](https://twitter.com/saucedopen) so we can follow along.