teleren/devto huggingface dataset:
Headless Testing In Selenium | Selenium WebDriver With JavaScript Tutorial | Part VIII
Published: 2022-04-05 15:24:00

Learn what is Headless testing and how to perform automated tests on the Headless browsers.
[Start FREE Testing](https://accounts.lambdatest.com/register?utm_source=devto&utm_medium=organic&utm_campaign=apr05_sb&utm_term=sb&utm_content=tutorial_video)

This video is part VIII of the Selenium WebDriver JavaScript Tutorial series. In this video, Ryan Howard (@ryantestsstuff) explains how to set up automated tests to run them in headless mode on the LambdaTest platform. You’ll also learn to add the headless capability to run UI tests on a headless browser. It also covers the advantages of headless browser testing.

By the end of this video, you will get the answer to the following questions 🎫 -:
◼What are Headless browsers?
◼What is Headless testing?
◼What is Headless testing in Selenium?
◼How do you run Headless in Selenium?
Tips & Tricks for Python
Tags: beginners, python, tutorial, 100daysofcode
Published: 2022-04-05 15:20:17

**1. Memory**

The method **getsizeof** can be used to retrieve the size of any object.
Here is an example

```
import sys
number = 100
print(sys.getsizeof(number))


# Output: 28
```


**2. Swapping**

This is the easiest way to swap values without using any third variable.

```
a,b = 5,10
a,b = b,a
print(a)
print(b)


# Output:
# 10
# 5
```


**3.  Anagrams **

An anagram is a play on words created by rearranging the letters of the original word to make a new phrase or word.

We can sort the string values using sorted method, which does not modify the original string.

```
def anagram(first, second):
    return sorted(first)=
sorted(second)
res - anagram( 'heart', 'earth')
print(res) #True
```


**4. Shuffle**

Shuttle method from random module, in order to shuffle the elements of a list.

```
from random import shuffle
my_list = [7, 23, 9, 35]
shuffle(my list)
print(my_list) #[35, 7, 9, 23]
```

**5. Palindrome**

A palindrome is a word, number, phrase or other sequences of characters that reads the same backward as forward.

```
from random import shuffle
my_list = [7, 23, 9, 35]
shuffle(my list)
print(my_list) #[35, 7, 9, 23]
```

6. Running Time 

**time** module can be used to calculate the actual running time amongst other methods. 

```
import time
start time = time.time()
num1 = 12
num2 = 15
num3 = num1 * num2
print(num3) #180
end time = time.time()
total time = end_time -
start time
print(*Time: ", total_time)
# (Time: 0.0005068778991699219)
```
2nd time being Sheriff
Tags: opensource
Published: 2022-04-05 14:01:55

## Sheriff duties:
Last week, my sheriff duties were a bit different than usual. Aside from going over issues/PRs, assigning issues to people, I worked with [Hung](https://github.com/nguyenhung15913) to group issues into different areas that we wanted to focus on for 3.0 alpha [in the wiki](https://github.com/Seneca-CDOT/telescope/wiki/Triage-Meeting-March-29,-2022-Preparing-for-Release-3.0-alpha). Moreover, with the help of other colleagues in the Thursday triage meeting, we went over the list of issues again and decided which one to go or stay in the project's milestone. I saw my growth in that session, I didn't know much about Telescope just 3 months ago and last week I knew which part of the project to be prioritize, shifted even to lower level in some parts I didn't work on, I gained the knowledge from doing reviews.


## My contribution: 
I didn't do much in terms putting more code into the repo but I helped people move their code by doing reviews. One of the highlights last week was 
- We finally deployed Supabase to production, hiding it behind an auth wall. This required changes to `docker` and `nginx` which were mostly done by [David](https://github.com/Seneca-CDOT/telescope/pull/3384) and [Kevan](https://github.com/Seneca-CDOT/telescope/pull/3098). I need to read up on Kevan's work to understand `nginx` implementation. 
- We added a `secret.env` file to live in staging and production 
- Seeding feeds script to supabase 
- We had some hiccups with the oAuth configs but they were [resolved quickly](https://github.com/Seneca-CDOT/telescope/pull/3379)
Network Automation is here to stay
Tags: python, ansible, devops, opensource
Published: 2022-04-05 14:43:37

I have been working with [Network Automation](https://www.rogerperkin.co.uk/network-automation/) for many years now, starting with Ansible and now using Python, Terraform and other open source tools. 
A few years ago it was seen as a very niche subject only for the netdevops guys, but today in 2022 Network Automation is becoming a standard skill, with most job descriptions for network engineers requiring at least an understanding of Ansible & Python if not operational knowledge. 

I have been in networks for over 20 years and would recommend to anyone who is looking for their first job or looking to move on and improve their career to learn some network automation. 

Take a look at my website for many free tutorials on [Ansible](https://www.rogerperkin.co.uk/network-automation/ansible/), Python, Terraform and you can also follow my journey to CCIE Devnet Expert! 
[www.rogerperkin.co.uk](https://www.rogerperkin.co.uk/)

When not automating networks, I also work as a [London Magician](https://www.rogerlapin.co.uk/locations/magician-london/)!
How to get a particular word from a long string in Javascript
Tags: javascript
Published: 2022-04-05 14:21:44

![slice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6s3g8qenys1yc0gy8d07.png)
 

I was working with this API recently that returns *Africa/Lagos* as the timezone data. I needed just the city after the "/". Keep in mind that in this case that city is "Lagos" but it could be any city at all. The API could return Casablanca, New York or just any city depending on the IP address (I was working with IP address).

I needed just the city (not the continent) for me to pass to the map parameter in order to display a location on the map.

## How did I do this

I needed to write just a few lines of code to get this done. Yeah, just a few lines.


Let me work you through it.

Let's kind of declare the data in a binding in this example (since we are not using an API here)

```
const city = "Africa/Lagos"

```
Now let's extract the city after the "/". Remember it could be any city at all.

To get this city, we first have to find the position of "/" in the string.

```
const city = "Africa/Lagos"

const cityIndex = city.indexOf("/");

```

If you log `cityIndex` to the console, it returns **6** which is the position of "/". This is dynamic, it will always get the correct position of "/" regardless of how long or short the string could be (from the API response).

So, how do we extract the city after "/" now that we have gotten the index.

```
const city = "Africa/Lagos"

const cityIndex = city.indexOf("/");

const newCity = city.slice(cityIndex + 1);

```

If you log `newCity` to the console, you will get **Lagos** as the value.

`slice()` was employed here to help us get the word whose first letter starts from position 7.

You can read more on [slice()](https://www.w3schools.com/jsref/jsref_slice_array.asp).
Paracetamol.js💊| #93: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-04-05 14:19:38

## **<center>Explica este código JavaScript</center>**

```js
const a = [1, 2, 3];
let b = [4, 5, 6];
console.log(a + b); //?
```

A. `[1, 2, 3, 4, 5, 6]`
B. `[1, 2, 3, [4, 5, 6]]`
C. `"1, 2, 3, 4, 5, 6"`
D. `"1, 2, 34, 5, 6"`

{% details ➡ Respuesta ⬅%} 

D. `"1, 2, 34, 5, 6"`

Los operadores de javascript, como por ejemplo el operador suma (+), están diseñados para tipos de datos primitivos, especialmente para cadenas de caracteres y números.

Cuando intentamos usar dichos operadores para tipos no primitivos, javascript hará su mayor esfuerzo para devolver un resultado lógico, pero la mayoría de las veces obtendremos salidas no esperadas o ambiguas.

Lo primero que tratará de hacer el interprete de javascript es tratar de convertir los arreglos a cadenas, aunque no lo veamos hará algo como esto:

```js
const a = [1, 2, 3];
let b = [4, 5, 6];
console.log(a.toString() + b.toString()); //"1, 2, 3" + "4, 5, 6"
```

La operación de "suma de arreglos" al final se convierte en una concatenación de cadenas. Esto explica el loco resultado que nos muestra por consola. 

{% enddetails %}
Practice Spelling Bees with Spelling Hero
Tags: showcase, hackathon, javascript, creativecoding
Published: 2022-04-05 14:14:17

---
title: Practice Spelling Bees with Spelling Hero
published: true
description: We speak to the developers behind Spelling Hero - a spelling bee simulator complete with contextual usage and multi-difficulty. Learn more here.
tags: showcase, hackathon, javascript, creativecoding
canonical_url: https://developers.deepgram.com/blog/2022/04/practice-spelling-bees-hero/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frx4vhm2sijplwnj2b5x.jpg
--- 

The Scripps National Spelling Bee is America's longest-running educational competition - its primary goal being to help young people increase the size of their vocabulary through practice and a friendly competitive atmosphere. The team behind Spelling Hero wanted to simulate this great educational experience in the browser. I sat down with [Judah Daniels](https://www.linkedin.com/in/judah-daniels/), [Leon Zhang](https://www.linkedin.com/in/leon-bz/), [Saksham Shah](https://www.linkedin.com/in/saksham-shah-9803581b9/), and [Saomiyan Mathetharan](https://linkedin.com/in/saomiyan-mathetharan) to ask them about their project.

Spelling Hero is a spelling bee simulator to emulate the experience of participating in a spelling bee competition. Users select a difficulty level, and the browser speaks a word aloud. Players then have to spell out the word to complete the level.

![Easy mode. Word 1 of 5 with a score of 1. The word 'answer' is in green and displayed as correct. Several buttons read start spelling, repeat word, definition, language of origin, type of word, and example of sentence.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uekg3ht9xiq9fzqo756v.png) 

Spelling Hero's data was manually curated in this first version, and each word also includes a definition, origin, type, and a sample sentence - all options given to spelling bee participants.

The team used the Deepgram Speech Recognition API to understand a user's voice input, basing their code on our [Browser Live Transcription](https://developers.deepgram.com/blog/2021/11/live-transcription-mic-browser/) tutorial. The user interface was built with P5.js ([see our P5.js tutorial here](https://developers.deepgram.com/blog/2022/03/p5js-getting-started/)), and you can check out the [code on GitHub](https://github.com/saksham-shah/deepgram-game).
Tip: Watch out for mutable default arguments in Python
Tags: python, beginners, programming
Published: 2022-04-05 14:07:56

Default arguments in Python are evaluated only once. The evaluation happens when the function is defined, instead of every time the function is called. This can inadvertently create hidden shared state, if you use a mutable default argument and mutate it at some point. This means that the mutated argument is now the default for all future calls to the function as well.

Take the following code as an example. Every call to the function shares the same list. So, the second time it's called, the function doesn't start out with an empty list. Instead, the default argument is the list containing the value from the previous call.

```py
def append(n, l = []):
  l.append(n)
  return l

append(0) # [0]
append(1) # [0, 1]
```

If you absolutely need to use a mutable object as the default value in a function, you can set the default value of the argument to `None` instead. Then, checking in the function body if it is `None`, you can set it to the mutable value you want without side effects.

```py
def append(n, l = None):
  if l is None:
    l = []
  l.append(n)
  return l

append(0) # [0]
append(1) # [1]
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻
On Communication.
Published: 2022-04-05 13:58:35

“Ineffective communication is the primary contributor to project failure **one third of the time** and had a negative impact on project success more than **half the time**.” - *PMI, Project Management Institute*. 

Communication in a projects happens in different ways (sync: phone calls, meetings or async: email, chat (I think chat is async but that's debatable (not technically, but hypothetically - wow, that's the 3rd nested bracket))). But I believe communication is more than just participating in a conversation over a medium. Imagine a continuous deployment flow where committed source codes are deployed to QA servers every 30 minutes. If a simple Slack integration generates a notification with commit messages every time a deployment is successfully completed, then a QA engineer knows exactly when and what to test at any given time. Now remove the QA engineer and imagine an automated test suite receiving a similar message and immediately starting test execution. This makes me think that a well-established communication framework creates an information network and bridges the gap between stakeholders. Note that the nodes (or endpoints) in such a communication network can be humans and/or machines.
Quickly scaffolding an Electron project in 1 min
Tags: electron, vite, vue, webdev
Published: 2022-04-05 13:52:26

## create-electron

> An easy way to start an Electron project

The link - [https://github.com/.../create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron)

---

## Usage

> **Compatibility Note:**
> Some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

With npm:

```bash
$ npm create @quick-start/electron
```

With Yarn:

```bash
$ yarn create @quick-start/electron
```

With pnpm:

```bash
$ pnpm create @quick-start/electron
```

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold an Electrn + Vue project, run:

```bash
# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app -- --template vue
```

Currently supported template presets include:

- `sample`
- `sample-ts`
- `vue`
- `vue-ts`
- `react`
- `react-ts`
- `svelte`
- `svelte-ts`

## Features

- Use `ESLint + Prettier` to better lint and style your code, help you to write high-quality code.
- Use [electron-vite](https://github.com/alex8088/electron-vite) compiler, a fast javascript builder integrated with [Vite](https://vitejs.dev), and you don't need to care about configuration.
- Use [electron-toolkit](https://github.com/alex8088/electron-toolkit) that make you easy to develop. For example: TSconfigs extends, expose common Electron APIs to renderer process in preload scripts and effective utils for main process.
- Use [electron-builder](https://www.electron.build) and preset common configuration, allows you to easily pack Electron app.
- Use [electron-updater](https://www.electron.build) for auto-update, based on electron-builder.

The link - [https://github.com/.../create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron)
'Uncaught ReferenceError: y is not defined': how to solve this production Mapbox error
Tags: javascript, mapbox, netlify
Published: 2022-04-05 13:47:35

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rgrj07cu9pu3g58h2td.png)

Earlier today I was building an app and I needed to integrate with [Ipinfo](https://ipinfo.io) and [Mapbox-gl](https://www.npmjs.com/package/mapbox-gl/v/1.13.0).

Mapbox worked just fine inside the development environment but when I deployed to production, gboooooa! An error pop up in the console slapping my face and the map did not display.

## What is the error?

`Uncaught ReferenceError: y is not defined`

Initially, I thought this was a Netlify thing (I deployed to Netlify by the way) until I discovered it wasn't. The error was from the current version of Mapbox - version 2.0.x


## What's the fix?

There is no permanent fix for this yet. It's still been worked upon. However there is a work around.

## What's the work around?'

Downgrade `mapbox-gl`. Yes, that's the work around. You have to downgrade `mapbox-gl` to version @1.13.0 for it to work. The error is with version 2.0.x

## How to downgrade

First uninstall version 2.0.x in your project
run `npm uninstall mapbox-gl"

then run `npm install mapbox-gl@1.13.0`


Yeah. You're good to go now.

Happy hacking!
PHP - Installation on Linux Based Operating System
Tags: php, linux, webdev, shriekdj
Published: 2022-04-05 13:44:45

So I Will Try to Make Series About the PHP.

PHP is an Scripting language Majorly Used for Back-end Web Development and also more than 50 % websites on internet use PHP as back-end.

## Development Environment on Linux

One of the most common server configuration for linux is LAMP stack (Linux, Apache, MYSQL, PHP).

For Linux we will try to install apache, MySQL separately and try not to install third party applications.

You can still install XAMPP if you prefer, but remember in production you should not try third party applications.

---

## Check System updates of Linux

```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist -upgrade
```

- Here `sudo` is for superuser ( as a linux user you may already know it ).
- Here all packages and whole operating system is being updated and upgraded.

---

## Installing Apache Server On Linux

```bash
sudo apt-get install Apache2
```

- We Use apache server for running our site under localhost

---

## Installing MySQL on Linux Based Operating System

```bash
sudo apt-get install mysql-server

sudo my_sql_secure_installation.
```

- It will ask to create database password so Create an Secure Password.

---

## Start an Apache Server On Linux

```bash
sudo service apache2 start
```

You will get the below image on screen.


![apache2-ubuntu-default-page.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqsi9it4bvz8bhxtkthu.png)

---

## Start MySQL through another terminal simultaneously

```bash
sudo mysql -u root
```

Image Given Below



![MySql Starting Command In Ubuntu Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcxeo7by9v5t7wm3sgsg.jpg)

---

## Now Actually Installing PHP on Linux Lol 😂

```bash
sudo apt-get install PHP
```

This command will install PHP with it's default settings, so you will need to locate the PHP.ini file which can be located at `/etc/PHP/8.1/apache2` and also in `etc/PHP/8.1/cli`.

---

## Installing and Configuring phpmyadmin in Ubuntu / Linux

if you want PhpMyAdmin for setting up and making or altering your database in much more flexible way, you can use following commands.

```bash
sudo apt-get install PHPmyadmin
```

You Will also need to Configure apache to include phpmyadmin with following command.

```bash
sudo echo -e "\include etc/PHPmyadmin/apache.conf" >>/etc/apache2/apache2.conf
```

This is how you are ready to execute and run PHP programs on Linux.

***

## Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

[![Buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-yellow.png)](https://www.buymeacoffee.com/shriekdj)

Thanks for reading give your thoughts in the comments.

Bye 👋.
Review my web app
Tags: discuss, review, webdev, help
Published: 2022-04-05 13:43:43

Few months back i created a mini single page webapp for `time-zone conversion` it is PWA built on next-js. Recently i added `live-clock` for that. My plan is to add Alarm, Countdown timer in future. Can you review the site and suggest me any changes or feature to improve my web app so that i can make it more useful for an user.

Github: https://github.com/saketh-kowtha/time-zone-converter
App URL: https://timefull.app/

You can also post in github issues: https://github.com/saketh-kowtha/time-zone-converter/issues.

Cheers!
Happy coding.
Day 1: Bootstrap Basics
Tags: 100daysofcode, beginners, webdev, css
Published: 2022-04-05 13:39:52

*The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## Styling with Bootstrap!

**Bootstrap** is a CSS Framework to help people write CSS (duh!).

To get started, we need to import the necessary stylesheet for it to do its magic ✨.
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
```
After that, anything that we want to be affected by Bootstrap responsive design need to be nested into a div with container-fluid class:
```html
<div class="container-fluid">
 <!-- Put the affected elements here! -->
</div>
```
Done? Then you're set!
## How to style elements

To style an element, put a specific class on the element. For example, to center a text:
```html
<p class="text-center">LOL</p>
```
That's it! No additional stylesheets, just classes 🎉! These classes are pre-determined, so you can search this on the internet.

These classes can be combined, like this:
```html
<button class="btn btn-default">
 I am a button
</button>
```
(We're gonna talk about buttons soon 👀)

There are numerous other classes, like img-responsive that makes your image responsive to the screen size.
## Buttons

Buttons need a specific class `btn` to be considered as... buttons. They also have a default style (see the example above)

Other than that, they also have `btn-block` that makes them behave like a block element.
```html
<button class="btn btn-default btn-block">
 I'm blocked
</button>
```
They stretch horizontally, while forcing other elements after it to go below the button.

They also have other styles besides default; `btn-primary`, `btn-info`, `btn-danger`, etc.
## Color management in Bootstrap

In buttons, we have the primary, info, danger color, etc.
However, this is not limited to buttons. Text also have this color specification, as well as links.

IMO, this avoid the problem of too rainbow-y styles, where developers keep shoving colors, forming a ~~unicorn~~ fugly site. Definitely gonna help me next time I'm building a site.
## Grid systems 🔥

By default, Bootstrap apply an invisible grid inside the container. Its a 12-columns grid, with flexible rows.

Putting elements into the same row looks like this:
```html
<div class="row">
  <!-- 1st element -->
  <!-- 2nd element -->
</div>
```
To specify the width of elements with columns, use this syntax:
```html
<div class="col-x-y">
  !<-- Element to be resized -->
</div>
```
Where `x` is the screen size (md, xs, etc.), while `y` is the number of columns.
## Afterwords

That's how far I've got today. It felt like writing this post is harder than the actual learning 🤣. Anyway, see you guys tomorrow!

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!