teleren/devto huggingface dataset:
Frontend Notes
Tags: javascript, html, css
Published: 2022-09-15 07:14:18

# HTML
### Some interesting tags
- `<a>`: link to another web page

- `<label>`: link text to an input, so when clicked it was as if the input is clicked

- `<iframe>`: another html page within the current html page

- `<audio>`: plays music in your page

- `<code>`: monospace for letters

- `<pre>`: take tabs and spaces into accounts

- `<header>`, `<nav>`, `<footer>`, etc.: semantic tags rather than functional tags. But search engines like Google or web scrapers would grab info from tags like this and understand the web better.

- `<meta>`: describes the meta data of the web page. Like page description, image, favicon, etc.

1. `<meta name="viewport" content="width=device-width">` sets viewport size to the actual size of the device, rather than auto zooming out. (especially for mobile devices)
2. `<meta name="viewport" content="initial-scale=1.0, ...">` tells how much we can zoom in/out.

- `<noscript>`: defines what shows up when JS is disabled for the web.

- `<embed>`: embeds media (like a youtube video) into the web page. The main difference from an `<iframe>` is that `<iframe>` is used to embed an entire html page while this is for media components.

### Images
#### Raster image vs. Vector image
A raster images stores a 2D array of colours, gets blurry when magnified; while a vector image stores the geometry of the image instead.

#### JPG (raster)
- 24 bits per colour (more bits means more colour options)
- Lossy compression (JPG encoded when storing and decoded when displaying, but can lose original info after decoding)
- Suitable for high resolution photos

#### PNG (raster)
- 16 - 24 bits per colour
- Lossless compression
- Suitable mostly for non-photo use cases (when subtles details matter)

#### Base64 encoding
A binary-to-text encoding scheme to convert binary data to an ASCII string.
A common application is to represent image directly in the `<img src="..." />` tag, which stores the image's data as part of the html, reducing the request to further retrieve that image data from an URI. This is a common technique for loading small image files.

# CSS
### Combinators
`.B .C` all .C that are inside .B
`.B > .C` all .C that are direct child of .B
`.B + .C` sibing .C that follows immediately after .C
`.B ~ .C` all sibings .C that follows after .C

### Pseudo classes
`<selector>:<pseudo-class>`: select the elements with a special state.
e.g. `button:hover` `div:first-child`

### Pseudo elements
`<selector>::<pseudo-element>`: create content for the selected elements or style part of the elements.
e.g. `p::after { content: "."; color: red; }` appends a red "." after every `<p>` element

### Specificity
`!important` > inline style > id > class > type

### Inline vs. Block elements
Inline elements(like `<span>`) takes only the width of its content, while block elements(like `<div>`) takes up the whole line, resulting in a newline for every element.

### Grid layout
`{display: grid}`: Just another useful layout I don't use very often. Use it when necessary then!
Tiny Tips : git pull --rebase
Tags: git, productivity
Published: 2022-09-15 07:07:47

By default, `git pull` will merge changes into your branches. When your Pull Request will be merged, you will end up to this:

![git pull](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uby8mjtzgpdjd5i3ak0g.png)

Doing `git pull --rebase` will rebase your branch on top of upstream branch. When your Pull Request will be merged, you will end up to this:

![git pull --rebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe93zgobsbpggha0zpqj.png)



It makes history much more readable. You clearly see where start your branch and what is in feature branches. It makes also [interactive rebase](https://www.sitepoint.com/git-interactive-rebase-guide/) or [git bisect](https://www.git-tower.com/learn/git/faq/git-bisect/) much easier.
Okta Workflows Connector Builder
Tags: workflows, oktaworkflows, okta
Published: 2022-09-15 06:51:45

Okta’s Workflows Connector Builder is a no-code development tool for creating connectors on the Workflows platform. It leverages the same Workflows functionality used by Okta customers to turn their use cases into automated pre-canned flows. Flogrammers (Workflow Programmers) can use Connector Builder to package their flows with authentication and branding to be used by customers in their own tenants, or submitted to the Okta Integration Network for inclusion in the public catalog for use by all Okta customers on the Workflows platform. For additional information on Okta Workflows, see the documentation here and for additional information on Connector Builder, see the documentation here.

This tutorial provides a walk though of how to use the Okta Workflows Connector Builder.

## Sample Use Case
Okta provides a number of Workflow Connectors in the public facing catalogue. The list of available connectors can be found [here](https://help.okta.com/wf/en-us/Content/Topics/Workflows/connector-reference/connector-reference.htm). The [Slack](https://help.okta.com/wf/en-us/Content/Topics/Workflows/connector-reference/slack/slack.htm) connector provides a number of actions that can be used to interact with your Slack workspace. On occasions, you may need to interact with Slack in a more user interactive way via modals. Modals are the Slack app equivalent of alert boxes, pop-ups, or dialog boxes. They capture and maintain focus within Slack until the user submits or dismisses the modal. Because modals require a Slack app definition, they fall outside of what the current Workflow connector provides. In this tutorial, we will create a custom connector that can be used to interact with Slack modals. For further information on Slack modals and creating a Slack application, see the Slack documentation [here](https://api.slack.com/authentication/basics).

See the fill article here: [okta-workflow-connector-builder](https://iamse.blog/2022/07/04/okta-workflow-connector-builder/)
new
Tags: tesing
Published: 2022-09-15 06:49:41

[لورم ](https://www.youtube.com/watch?v=lb1Dw0elw0Q)ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
Use one Python terminal command to start a quick local HTTP server on your OS X machine 💻
Tags: http, server, osx, python
Published: 2022-09-15 06:46:03

I found myself wanting to dump some PDFs on my Kobo Forma ebook reader. But I didn't feel like digging out my USB-C to USB-A adapter so I could plug in the cable and use Calibre to transfer the books.

Hmm... well, the reader _does_ have a rudimentary browser... I wonder if I could just download the books via HTTP or FTP on my wireless LAN?

So I found a way to do it. 

First, fire up terminal and navigate to the directory that contains the files you want to serve.

Then run `python -m SimpleHTTPServer 8000` and Bob's your Uncle.

![terminal screenshot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1cjmng0o5vc8m1hffav.png)

(I found `sudo apachectl start` as well, which runs an apache server, but I like the python thing better.)

P.S. You can CMD-N to open a second terminal window, then use the command `ifconfig en0 inet` to get the IP of your server.

![terminal screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ndoey1x5ot8trg6wayb.png)
My First Post in Dev.to
Tags: javascript, webdev, linux
Published: 2022-09-15 06:40:15

## This is my header of the very first post in my blog

**Here goes bold text** and here and _Italic one_

- ds
- er
- br

1. 23232
2. 323
4. 4545

> Never do anything stupid in army.

Makalanyn body-sy.
Detect idle or active browser tabs with the Page Visibility API
Tags: webdev, tutorial
Published: 2022-09-15 06:35:17

In this tutorial we’ll be using the Page Visibility API to detect if a browser tab is idle (not currently being viewed) or active. To get an understanding of how the API works we’ll use it to pause a video when a tab becomes idle.

Let’s get started by setting up a HTML5 video player:

```html
<video id="video" width="300" controls>
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />
  <p>Your browser doesn't support HTML video playback!</p>
</video>
```

Now for the JavaScript functionality that’ll make use of the Page Visibility API. We first need to define an `EventListener` that calls a `toggleVideoPlayback` function when the Page Visibility `visibilitychange` event has been fired:

```javascript
document.addEventListener("visibilitychange", toggleVideoPlayback);
```

Now let’s create the `toggleVideoPlayback` function:

```javascript
const toggleVideoPlayback = () => {
  const video = document.getElementById("video");        
  return document.hidden ? video.pause() : video.play();           
};
```

This function checks the status of `document.hidden`. If this equals `true` the video will pause and if it equals `false` the video will resume playing. You can go ahead and test this code in browser now, note the timestamp when you navigate to another tab whilst the video is playing to confirm the video has been paused when you return.

That’s all for this tutorial. You should now have an understanding of how the Page Visibility API works. If you’re interested in learning about some of the other uses for the Page Visibility API the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) is worth checking out.
Find Original Array From Doubled Array
Tags: javascript, leetcode
Published: 2022-09-15 06:32:47

```js
var findOriginalArray = function (changed) {
  let sortedNumbes = [...changed].sort((a, b) => a - b);

  let map = new Map();
  let arraaaay = [];

  for (let i = 0; i < sortedNumbes.length; i++) {
    let half = sortedNumbes[i] / 2;
    if (map.has(half)) {
      arraaaay.push(half);
      map.set(half, map.get(half) - 1);
      if (map.get(half) === 0) {
        delete map.delete(sortedNumbes[i] / 2);
      }
    } else {
      map.set(sortedNumbes[i], map.get(sortedNumbes[i]) + 1 || 1);
    }
  }
return arraaaay;
};

console.log(findOriginalArray([1, 3, 4, 2, 6, 8]));

```
Top JavaScript Concepts to Know Before Learning React.
Tags: javascript, react, programming, webdev
Published: 2022-09-15 06:01:57

If you want to learn React, it helps to have a solid foundation in JavaScript first.

React is a JS library, after all - so you shouldn't skip the basics.

Here, Joel explains the top JavaScript concepts you should know before learning React.

[FreeCodeCamp](https://www.freecodecamp.org/news/top-javascript-concepts-to-know-before-learning-react/)
Why software development is more like an open-world RPG video game
Tags: coding, rpg, gaming
Published: 2022-09-15 06:00:00

I have recently completed The Ghost of Tsushima expansion (Iki Island) and I couldn't help but draw parallels between my work and the countless hours spent trying to get better at the game.

![Jin Sakai vs The Eagle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4en5ogk7z47jbu0df7o.png)

                   Jin Sakai vs The Eagle

Gamers will understand the immense pleasure one gets after beating a "boss" after the 1929th time. The open-world nature of some RPGs allows for building skills that better prepare you for the battles that are to come in the main story. Also known as side quests. Side quests are a great way for the player to get even more familiar with the video game.
How does this translate to Software development? Software development is another skill that requires you to put in time in order to get better at it. It relies on your ability to upskill, seek and try new technologies. There are many ways to achieve this but one method that has worked for me particularly well is trying to build outside projects with the particular technology I'm trying to learn.
In tackling this side p̶r̶o̶j̶e̶c̶t̶ quest you get to learn new techniques that could aid you well in your daily main j̶o̶b̶ mission. In my short career as a Software developer, it has been the work that I do in the side quests that has helped me land better roles and projects rather than my actual day job.
In conclusion, don't be afraid to work on that side quest because you never know how that could help you in your journey as a developer. The only difference is that programming creates new bosses for you to battle against every day and it's important to choose your battles wisely… why? that's an article for another day.

For similar articles like this please checkout our Engineering Blog available on:
- [Medium](https://medium.com/clickpesa-engineering-blog)
- [Devto](https://dev.to/clickpesa)
- [Hashnode](https://clickpesa.hashnode.dev/)
Write a Form (1): Understand its Functionality
Tags: react, form
Published: 2022-09-15 05:54:30

Basically, a Form consists of a `smart` container and its elements. 

```html
<form>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="password" name="password" minlength="8" required>
    <input type="submit" value="Submit" />
</form>
``` 

## Overview

Usually *form elements* handle input from users while *form container* do these things:

- Keep mutable states and handle updates from form elements.
- Render a friendly form-like UI.
- Handle Validation before Submitting.
- Handle Submit event.

In the following parts, these 4 jobs above will be discussed.

Here is a simple form component in React:

```tsx
function Form() {

    const [value1,setValue1] = useState("")
    const [value2,setValue2] = useState("")
    const [value3,setValue3] = useState("")

    const handleSubmit = (event) => {
        event.preventDefault();
        //do something mutating or uploading
    }
 
    return (
        <form onSubmit={handleSubmit}> 
            <InputElement1 value={value1} onChange={setValue1}/>
            <InputElement2 value={value2} onChange={setValue2}/>
            <InputElement3 value={value3} onChange={setValue3}/>
            <SubmitButton />
        </form>
    );
}
```

Benefiting from using `<form>`, this HTML tag provides us with some default behavior:

- Listen to *Submit Event* from its elements. `<input type="submit" />` or `<button type="submit" />` both could trigger this event so that you don't bother to define an extra event handler.
- Validate input data before `onSubmit` which is quite useful.
- Browse to a new page defined in the attribute of `action`, however, often we need do more things in `handleSubmit` so block it by `event.preventDefault()`.

Next part let's talk about how to optimize our Form using the intrinsic *controlled* feature.
Manage Short Term Users with Okta Workflows
Tags: workflows, oktaworkflows, okta
Published: 2022-09-15 05:38:48

Many organizations utilize short term as well as full time employees. Short term employees are sometimes known as contractors as they are usually contracted to perform a specific task over a specified time period. A contractor would usually have a contract expiry date. That is the date at which their current contract is due to expire. Certain people within the organization, like the contractors manager, will need to be notified ahead of the expiry date, so they can potentially renew the employees contract or plan for the employee to leave the organization. It also should be noted that often for legal reasons, an employee on a contract, can not be at the employers place of work, or perform any tasks for their employer, if they do not have a current active contract. I have seen situations in the past where an employees contract expired and they had to leave the worksite for a number of days until a new contract was put in place.

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

Okta Workflows is the perfect solution to this use case. In this tutorial we will use a pre-configured template to create a number of flows designed to demonstrate this use case.

See the fill article here: [manage-short-term-users-with-okta-workflows](https://iamse.blog/2022/07/08/manage-short-term-users-with-okta-workflows/)
Laravel 8 Left Join Query Example
Tags: laravel, laravel8, mysql, leftjoin
Published: 2022-09-15 05:20:16

In this article, we will see laravel 8 left join query example. laravel left join eloquent returns all rows from the left table, even if there are no matches in the right table. 

The result is NULL from the right side. We will also see a query of laravel left join with groupBy(). 

If you would like to perform a "left join" or "right join" instead of an "inner join", use the leftJoin or rightJoin methods. These methods have the same signature as the join method.

For laravel left join query example we need the first argument passed to the leftJoin method is the name of the table you need to join to, while the remaining arguments specify the column constraints for the join. Left join query use in laravel 6, laravel 7, laravel 8.

So, let's see an example of left join in laravel 8 or laravel 8 join two tables.
SWORD: the merge of Symfony and WordPress
Tags: symfony, wordpress, php, cms
Published: 2022-09-15 05:17:17

It could be a new beginning in the WordPress era. Imagine WordPress being WordPress, but also being Symfony. Not a subset of WordPress and a subset of Symfony. Both WordPress and Symfony at their full potential, at the same time, on the same application.

Sounds like a dream? It's now reality.

Meet **Sword**. The best of both worlds.

So, what Sword really is and what problems does it solve? If you've heard of [Bedrock](https://roots.io/bedrock/), it's similar but with Symfony.
Sword is Symfony running WordPress.

It allows you to:
- use a centralized composer for WordPress core and plugins as well as other libs
- extend a WordPress website well outside its bounds, into the modern framework territory
- give WordPress code standardized and modern style and patterns
- bring all the good things of Symfony into WordPress, be it dependency injection, translator, Symfony UX, etc...

There's no limit to what you can do.
You want Symfony routes bypassing WordPress? No problem, it's a Symfony app.
You need Symfony UX into your WordPress theme? Sure.
You need a specific page to be 100% Symfony with API calls to WordPress API? Yes you can.

**Full installation with Docker takes one command. Zero configuration. No Docker knowledge needed** (recommended for further usage though).
Your Sword app should be ready in one or two minutes.

Performance wise, it seems fast enough. Pure Symfony performance is not impacted, the WordPress side is maybe 90ms slower. No big deal given the superpowers you get in exchange.

Here's the link: [https://getsword.com](https://getsword.com)

If you like it please give a star on the Github repo and share it!

{% embed https://github.com/phpsword/sword-bundle %}


I previously posted on Reddit, it got some attention with interesting comments. Check it out eventually:

{% embed https://www.reddit.com/r/PHP/comments/xbcxy8/symfony_meets_wordpress_i_call_it_sword/ %}


{% user williarin %}
I Used JavaScript to Help My Students
Tags: javascript, programming, webdev
Published: 2022-09-15 05:15:18


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

So I just completed a webapp in order to help my students in reviewing our vocabulary lessons. 

I learned more by building project and building this vocabulary review app to help my students is both exciting and challenging. I love how they are able to use it and enjoy its features. As for me, my skills grow as a web developer while helping them. 

I'd ever thought that I would be able to create this simple app! 

**This webapp contains the following features:**
- It loads every new Greek Vocabulary.
- They get to choose which vocabulary lessons they need to review.
- The vocabulary review is challenging since it is randomized.
- They can also mark a vocabulary thay they missed in order to review it again at the end of the initial review.
- They can show and hide the vocabulary's meaning to check if the answer.

**In creating this, I learned and almost mastered:**
- Event handling
- Manipulating objects and arrays using different methods
- Improved in understanding the logic of JavaScript functions.
- Helper functions
- ES6 syntax
- Manipulating checkbox using Javascript

You want to see the code? I know it is a bit messy and I want to improve a lot. Please, check it [here:]( https://github.com/jeffchavez-dev/Biblical-Greek-Review). Here's the [link to the webapp](https://lovegreek.vercel.app/).

I am determined to improved more and get better at programming so I would want to add more features to this in the future. Feel free to recommend, please!

As a Christian, I also write blogs about the goodnews. If you are interested, please read here: [The Glorious Gospel](https://theologycheck.wordpress.com/2021/03/04/the-glorious-gospel/)

To God be the glory!