teleren/devto huggingface dataset:
Creating a Word Wheel in CSS
Tags: css, javascript, showdev, webdev
Published: 2022-08-03 19:24:00

Summer Holidays are meant to be relaxing, so I typically read **a lot** of books. This year, one of the titles I read, was [Making and breaking the grid](https://www.goodreads.com/book/show/32498655-making-and-breaking-the-grid) by Timothy Samara. A great and super-inspiring book.

In fact, a bit **too** inspiring! The book is filled with gems. So ... when I see something like this:

![Word Wheel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2dohw7pjxoxcaq51m0v.jpg)

— I can't help myself. I just **have** to code it!

---

It's not super-complex. You take an array of words:

```js
const arr = 'word word word etc'.split(' ')
```

Then you output it as whatever tag you want, in my case `<strong>`. For each entry, set a custom property with the current `index`:

```js
arr.map((txt, index) => `
<strong style="--d:${index};">
  ${txt}
</strong>`).join('')
```

On the parent-element, set a custom property with the length of the array:

```js
app.style.setProperty('--ln', arr.length);
```

> NOTE: You don't **need** JavaScript for the word-wheel. It's perfecty fine to manually write a bunch of tags (see Codepen-example later).

---

In CSS, set the parent-element to `position:relative`, and all the children to: 

```css
strong {
  inline-size: var(--c);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  padding-inline-start: var(--c);
  position: absolute;
  translate: -50% -50%;
}
```

`--c` is the size of the circle.

We'll use `rotate` ([now available as an individual transform](https://web.dev/css-individual-transform-properties/) in **all** browsers!) and our custom properties:

```
calc(var(--d) * 1deg * (360 / var(--ln)));
```

> **UPDATE:** Since some people have issues with individual transforms, I've changed them to a "classic" combined value: `transform: translate(-50%, -50%) rotate(calc(var(--d) * 1deg * (360 / var(--ln, 1))));`

And that's it. I expanded the example with a dynamic **hue**, `font-size` and more. Play around with the controls in this Codepen (best viewed in full screen):

{% codepen https://codepen.io/stoumann/pen/NWYYRdB %}
Aprendiendo programación orientada a SEO
Published: 2022-08-03 19:20:28

Me encanta la programación desde hace mucho tiempo. El SEO también y cuando vi el curso de [Nacho Mascort](https://twitter.com/nachomascort) de programación practica para me lo compré en el verano de 2021, pero lo empecé y no me enteraba demasiado. No sabia casi nada de Python y me aburrí un poco. En septiembre hice el curso de Desarrollo Backend con Python y el framework Django.
Si quieres ver mas sobre esta historia [aquí tiene mas](https://misterdigital.gumroad.com/?_ga=2.7575794.13997869.1659551938-1183135765.1659551938&_gl=1*hdpc9e*_ga*MTE4MzEzNTc2NS4xNjU5NTUxOTM4*_ga_6LJN6D94N6*MTY1OTU1MTkzOC4xLjEuMTY1OTU1MzYzOC4w).
How to run Cypress tests in parallel with code example
Tags: cypress, testing, webdev, javascript
Published: 2022-08-03 19:14:00

Hi

Lately we have been adding multiple cypress tests and the tests run have been taking more and more time on ci and local environments as the cypress spec files are run or executed sequentially. 

Luckily we have organised our tests in different folders.
I wrote a small script which would spawn cypress run for different folders.

Here is the script 

```
// run_test_in_parallel.js
const { exec } = require("child_process");
const util = require("util");
const execPromisified = util.promisify(exec);

const baseCommand = "npx cypress run --env coverage=false --spec ";

const specs = [
  "cypress/e2e/folder1/*.cy.*",
  "cypress/e2e/folder2/*.cy.*",
];

const runCypressSpec = async (command) => {
  try {
    const { stdout, stderr } = await execPromisified(command);
    console.log("stdout:", stdout);
    console.log("stderr:", stderr);
    return Promise.resolve();
  } catch (e) {
    console.error(e);
    return Promise.reject(e);
  }
};

const runAllTests = async () => {
  const promises = specs.map((spec) => {
    const specRunCommand = baseCommand + spec;
    return runCypressSpec(specRunCommand);
  });
  console.log("all spec runs started");
  try {
    console.time("all tests");
    // using Promise.all waiting for 
    // all successful execution of test cases 
    await Promise.all(promises);
    console.timeEnd("all tests");
    // Continuous Integration expects 0 for success case
    return 0;
  } catch (e) {
    console.error(e);
    // Continuous Integration expects non-zero for failure case
    return 255;
  }
};

runAllTests();
```

I have added a package.json script to run the above command

```
"scripts": {
  "test:e2e_run_parallel": "node ./location/of/run_test_in_parallel.js"
}
```

Hope this helps any one having the same issues.
OSINT Aircraft Tracking API
Tags: osint, api
Published: 2022-08-03 18:48:19

Looking for an #OSINT #REST #API?

Absolutely free API with #aircraft positioning/details and temporary #email detection:



https://api.facha.dev/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwr8he5i47r6ldxggwwt.png)
Aug 03rd, 2022
Tags: useeffect, reacthook
Published: 2022-08-03 18:46:45

reacthook helps function component to use lifecycle and state.

useEffect and useCallback are two examples of reacthook.

**

## useEffect
**

useEffect must be practiced after a page rendering.
useEffect must be practiced after the linked state is updated.

There are some ways to use this useEffect


`useEffect(() => {})`

`useEffect(() => {}, [])`

`const [name, setName] = useState('hyun')
useEffect(()=>, [name])`


The first one is the most basic. 
but because there is no dependency (the second parameter in other ways), this useEffect will be practiced any time.

The second one is practiced only once after the page rendering.

The third one is practiced after the page rendering and when the state, that is, dependency(name) is updated.


**clean-up**

`useEffect(() =>{
   console.log('mount')
   return () => {
      console.log('unmount')}
}, [])`

return ~ ('unmount')} returns function for clean-up

when mounting, 
sending props to local state, request API, using library, setInterval, setTimeout....

when unmounting,
clearing the registered work(clearInterval, clearTimeout)...
Tyk API Gateway — A walkthrough
Tags: tyk, api, gateway, kubernetes
Published: 2022-08-03 17:36:00

I have been writing & sharing my thoughts around APIs & API Gateways for quite sometime now.

Please do check out the following links on those -

- 
https://medium.com/@sanjimoh/list/api-product-management-f6bd761506bd

- https://medium.com/@sanjimoh/list/api-gateways-0e3d6d6d3dab

Few months ago, I captured the current landscape of API Gateways in the industry. Link to it is here - https://sanjimoh.medium.com/api-gateway-landscape-347b91639f0b

Post that I started evaluating many of those API Gateways indicated over the above landscape.

I plan to release a series of videos & in each of these episodes, I will pick up one API Gateway and take you all through its capabilities, provisioning along with a demo & in the end share my parting thoughts.

My focus would be mostly around Kubernetes platform and how these API Gateways perform on it.

In the first episode of Learning API Gateway series, I’ll take you through — Tyk Open Source API Gateway.

You can find the video of this episode right below. Hope you all find this useful!

{% youtube Z-yFbjbaXdo %}
Can You Guess the Word? (Python Edition)
Tags: python, datascience, discuss, codedex
Published: 2022-08-03 17:33:00

Happy Wednesday! Here are three Rebus Puzzles for all the Pythonistas out there! 🐍

Can you guess the message in each of the three images?

{% twitter 1554874945947279361 %}

Tag a Python friend, but don’t share the answers! 🧠
💚CapsCode Anniversary💜
Tags: javascript, webdev, news, help
Published: 2022-08-03 17:32:00

Hi All,

Let's celebrate CapsCode anniversary together.

On this auspicious day, 2 years back we have started a very small community CapsCode,
with a vision to teach and help students in their journey to become a successful Software Developer & a good Human Being.
Also, we have a primary goal to teach rural area students for free and teach them some programming and coding stuffs.

In this past 2 year we have achieved a lot more than what we have expected for and also, we haven't achieved a lot what we have expected for.

We would like to share some of our achievements which means a lot to us.
1. We guided and helped more than 1000+ students/ job seekers to achieve their goal and dream of becoming a software developer.
2. As a freelancer we have completed 100+ client projects.
3. Written 25+ blog post and 

	🔸 Got 44k+ views on DEV.to Community with 1.2K followers

	🔸 Got 5.2K+ view on Hashnode and earned 6 badges.

	🔸 Got featured in daily.dev

4. Google search console details

	🔸 4.4k+ clicks

	🔸 177k impressions

	🔸 Some of our blogs rank 1st in google search
	


Thats all about our success and our small achievements.


Coming to the goals which we were not able to achieve.
As our primary goal was to teach more and more rural areas students for free and teach them some programming and coding stuffs but due to COVID we were not able to reach out to the rural areas as per our expectations and we literally failed in doing so.
But we have planned and this year we are going to do something very amazing for the Rural Areas and will try our best to build some good coders from there.


Lots of people message us that they want to join our community and want to contribute towards it,
Sometimes we were able to answer and sometimes not,
So below are some of the key points that will guide you all that how you can contribute to our community.


🔸 You can write technical blogs for us, and we will post it in our website and other blogging platforms by giving you the credits.

🔸 You can work with us for our freelancing client's projects (if you meet the technical knowledge & requirements).

🔸 You can provide us a project/ client and earn.

NOTE: we are using most of the earnings from CapsCode or client project in making the coders community grow and this year we will use this to teach Rural Areas Students and providing them some technical stuffs like old laptops, Wi-Fi connectivity, keyboards, mouse, some paid software's etc.


You can also contribute to us through donation which we will use to build software developers/coders from RURAL AREAS OF INDIA.
please send us an email and our team will revert to you with all the details.

You can also become our sponsor us by clicking here https://github.com/sponsors/capscode


We are looking forward for your contributions.



Thats all from our side.

Have a wonderful day...🧸



Thanks,

Team CapsCode 💖
Photography Portfolio with CSS Only
Tags: html, css, tutorial, beginners
Published: 2022-08-03 17:12:00

You can create a beautiful photography portfolio website with just a HTML and CSS. And yes, you can achieve that zoom photos effect without javascript. 

{% codepen https://codepen.io/koselige/pen/bGvLJOZ %}

**Important CSS to apply**

```css
img {
width: 30%;
border-radius: 10px;
margin: calc(10%/6);
transition: all 0.5s ease;
}
```

The `transition` property makes sure when the zoom takes effect, it'll happen smoothly.

```css
img:hover {
box-shadow: #f9fbe7 0px 13px 27px -5px, #fff59d 0px 8px 16px -8px;
margin: calc(10%/6);
cursor: pointer;
z-index: 9999;
transform: scale(1.5);
}
```

Now, Using the `transform` property, I define the `scale()` method, where the image width will increase on hover by 1.5 but of course it can be bigger than that, depends on your liking. The `z-index` is there so as to ensure when zoomed in, it will always be stacked on top of everything else.

Lastly, here's where it gets interesting. I want to make sure all images on the most left and right side of the screen to NOT overflow when they are zoomed in. To do this, I need to make sure the images on the most left and right move slightly to the center of the screen when on hover. So, there are two problems I need to solve:

1. How to move the images on the most right side to the left and images on the most left to the right?
2. How do I make CSS choose only those images positioned on the most left and right side of the screen?

I achieve the first objective by using the `transform: translateX();` method applied on the `img:hover`. So images will move horizontally along the X axis.

```css
/* for images on the most left, use a positive value */
transform: translateX(40%);

/* for images on the most right, use a negative value as it moves to the opposite direction */
transform: translateX(-40%);
```

Now, the second question can be answered using the `nth:child()` property. Basically, to select every pic on the most left of the screen, I need to select the 1st, 4th, and 7th children. In other words, increase the number by 3.

To achieve that, I use `img:nth-child(3n+1):hover` as this ensures the style will ONLY be applied to the first child and every subsequent 3rd child of the siblings. Meanwhile, to select every pic on the most right of the screen, I use the following formula: `img:nth-child(3n+3):hover`. Because it starts from the 3rd child and also selects every subsequent 3rd child after it.

```css
/* ensures all images on the most left moves slightly to the right so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+1):hover {
  transform: translateX(40%) scale(1.5);
}

/* ensures all images on the most right moves slightly to the left so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+3):hover {
  transform: translateX(-40%) scale(1.5);
}
```
Day 30 - Polymorphism
Tags: 100daysofcode, solidity, web3, blockchain
Published: 2022-08-03 16:53:11

{% embed https://github.com/Envoy-VC/30-Days-of-Solidity noreadme %}

This is Day `30` of `30` in Solidity Series
Today I Learned About Polymorphism in Solidity.

Polymorphism is an ability to process data in more than one form. Like any other programming language Solidity also supports polymorphism. Solidity supports two types of polymorphism, Function Polymorphism, and Contract Polymorphism.

## Function Polymorphism

Function Polymorphism is also known as method overloading. In function polymorphism, multiple functions are declared having the same name within the same contract or inheriting contract. Functions differ on the basis of the number of parameters or parameter datatypes. Declaration of function cannot be overload by functions that differ only in return type.

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

// Contract definition
contract methodOverloading {

    // Function to get value of the string variable
    function getValue(string memory _strin) public pure returns(string memory) {
        return _strin;
    }

    // function to get value of the unsigned integer variable
    function getValue(uint _num) public pure returns(uint) {
        return _num;
    }
}
```

---

## Contract Polymorphism

Contract polymorphism means using multiple contract instances interchangeably when they are related to each other by using inheritance. This helps in calling the child contract functions using the instance of the parent contract.

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract parent{

    // Internal state variable
    uint internal sum;

    // Function to set the value of internal state variable sum
    function setValue(uint _num1, uint _num2) public {
        sum = _num1 + _num2;
    }

    // Function to return a value 10
    function getValue() virtual public view returns(uint) {
        return 10;
    }
}

// Defining child contract
contract child is parent{

    // Function getValue overloaded to return internal state
    // variable sum defined in the parent contract
    function getValue() override public view returns(uint) {
        return sum;
    }
}

// Defining calling contract
contract ContractPolymorphism {

    // Creating object
    parent pc = new child();

    // Function to set values of 2 unsigned integers
    function getInput(uint _num1, uint _num2) public {
        pc.setValue(_num1, _num2);
    }

    // Function to get value of internal state variable sum
    function getSum() public view returns(uint) {
        return pc.getValue();
    }
}
```

When we deploy `ContractPolymorphism` contract and call function `getInput` with values `52` and `78` and then call the `getSum` method we get

```solidity
0:
uint256: 130
```

---
I can't flash my board using DFU or STLink
Tags: opensource, microservices, embedded, luos
Published: 2022-08-03 16:04:37

When you try to update a board using DFU or STLink, an error message appears on PlatformiO.

⏩ Find the resolution of this symptom here: https://www.luos.io/faq/dfu

Otherwise, if you have encountered a problem with Luos, feel free to contact our maintainers via Discord (link in comment).
Natively parse command line args with Nodejs
Tags: node, javascript
Published: 2022-08-03 16:25:00

The 𝗽𝗿𝗼𝗰𝗲𝘀𝘀.𝗮𝗿𝗴𝘃 method lets you natively parse command line arguments, without the need for any additional libraries.

It returns an array of strings containing all the args that were passed when launching the 𝗡𝗼𝗱𝗲𝗷𝘀 process.

The first and second args are reserved, here's what they mean:

First: Is the 𝗽𝗿𝗼𝗰𝗲𝘀𝘀.𝗲𝘅𝗲𝗰𝗣𝗮𝘁𝗵 which is the absolute path of the executable that started the 𝗡𝗼𝗱𝗲𝗷𝘀 process.

Second: Absolute path for the file currently being executed.


Did you learn something new today?

Like and share this post, and follow me for more!

![process.argv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9rco37wijrrdn7gwzkj.png)
Supply chain security - prevent, not avoid
Published: 2022-08-03 16:12:00

Semver range specifiers `~^` are not only used in a top-level package.json. They're also used by dependencies. It's not feasible to get everyone to stop using them and it wouldn't be good for the ecosystem and even security. If a dependency 5 levels deep gets a security fix, how do you update all along the way? It's a problem already, even though ^ is fairly popular.

Lockfiles solve the issue of a nested dependency getting updated accidentally. package-lock.json or yarn.lock, if used right, eliminate the probability of unexpected nested package updates in CI etc.

"Vendoring" - pushing node_modules into the repository - is not practical and doesn't offer benefits compared to fully leveraging lockfiles.

Even if "vendored", updating is a must and at any significant size of the dependency tree reviewing every single package coming down is not humanely possible. 

Now finding a package and taking it over is one threat, but what about a maintainer of a useful package who intentionally publishes a malicious version to get rich quicker than otherwise just making opensource?
What about a prototype pollution in one package leading to a compromise of another package? What about the most popular way of delivering attacks - a postinstall script? The script would run before you get the chance to review the contents of the package. (That can be mitigated by socket.dev decently)

That's why instead of attempting the impossibility of reviewing all packages in your dependency tree I'd suggest preventing the outcomes of a malicious package eventually reaching your dependencies.

Enter: LavaMoat.
https://github.com/LavaMoat/LavaMoat

LavaMoat has tools for preventing unexpected postinstall scripts from running. (allow-scripts)

LavaMoat has tools to put each package in its own compartment and only allow it to access globals, builtins and other packages based on a policy. At runtime! 

If a package attempts to `require('fs')` or call `fetch()` in a new version, it's not going to work if it wasn't there previously.

Enough reading?

Here's a conversation about supply chain and install scripts
https://www.youtube.com/watch?v=STC_ubJNiMs

Here's an intro to lavamoat
https://www.youtube.com/watch?v=iaqe6F4S2tA
JavaScript can speak! Using the Speech Synthesis API
Tags: javascript, webdev
Published: 2022-08-03 16:01:05

A very underutilized feature in browsers is text-to-speech. With the Speech Synthesis API, **you can use JavaScript to "make the browser talk".** Here's an example:
```javascript
const message = new SpeechSynthesisUtterance(
    "Hi! This is an example of the Speech Synthesis API"
);
message.lang = "en-US";

const voices = speechSynthesis
    .getVoices()
    .filter(voice => voice.lang === "en-US");
message.voice = voices[0];

speechSynthesis.speak(message);
```
View example live: https://jsfiddle.net/holanicozerpa/4h2sf9gL/6/

As you can see in the example, one of the key parts of the Speech Synthesis API is the `SpeechSynthesisUtterance` class. An object of this class represents the text that the browser will later read aloud.

The other key part is the `speechSynthesis` object. It's a global object that serves as the controller. This object, among other things, has a list of available voices. It also has the crucial `speak` method.

When you create the `SpeechSynthesisUtterance`, you can set the text in two ways. The first one is to put the text in the constructor (like in the example), and the second one is to use the `text` property.

While it's not required, you should also set the language. This is to prevent international users listen to the text in the wrong language and incorrect pronunciation.

In Firefox and Chrome, setting the text and the language is enough. If you use the `speechSynthesis.speak` method, sending the utterance as a parameter, you will hear the text. But that probably won't work on Safari. You should also set which voice to use. 

Fortunately, you can use the `speechSynthesis.getVoices()` method to get the list of available voices. It returns an array of `SpeechSynthesisVoice` objects. Each of this object has a `lang` property, and you should pick a voice with the same language as the utterance object.

Lastly, you can associate the voice to the utterance object using the `voice` property. Once you do that, speech synthesis will also work in Safari.

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter