teleren/devto huggingface dataset:
Stage 3: Temporal
Tags: webdev, javascript, node, programming
Published: 2021-10-17 14:57:58

Provides new standard objects and functions for working with dates and times, solving all previous issues with `Date`.

`Date` has been a long-standing pain point in ECMAScript. `Temporal`, is  a global `Object` that acts as a top-level namespace (like `Math`), that brings a modern date/time API to the ECMAScript language. 
For a detailed look at some of the problems with `Date`, and the motivations for Temporal, see: [Fixing JavaScript Date](https://maggiepint.com/2017/04/09/fixing-javascript-date-getting-started/).


Temporal fixes these problems by:

-   Providing easy-to-use APIs for date and time computations
-   First-class support for all time zones, including DST-safe arithmetic
-   Dealing only with objects representing fixed dates and times
-   Parsing a strictly specified string format
-   Supporting non-Gregorian calendars


**Object Relationship**
![Object Relationship Of Temporal](https://i.ibb.co/tbmxWZc/Screenshot-2021-10-18-194110.png)



**Code examples**

**Temporal.Now**

`Temporal.Now.instant()` - get the exact time since [Unix epoch](https://en.wikipedia.org/wiki/Unix_time)
`Temporal.Now.timeZone()` - get the current system time zone

 **Temporal.Instant**
    
    const instant = Temporal.Instant.from('1969-07-20T20:17Z');
    instant.toString();  // => '1969-07-20T20:17:00Z'
    instant.epochMilliseconds;  // => -14182980000

**Temporal.PlainDate**

    const date = Temporal.PlainDate.from({ year:  2006, month:  8, day:  24  });  // => 2006-08-24 
    date.year;  // => 2006 
    date.inLeapYear;  // => false 
    date.toString();  // => '2006-08-24'


**Cookbook**
https://tc39.es/proposal-temporal/docs/cookbook.html

**Polyfills**
https://www.npmjs.com/package/@js-temporal/polyfill
#100DaysOfSwift : Project 12 
Tags: ios, beginners, swift
Published: 2021-10-17 14:54:08

In this project I learned about UserDefaults, NSCoding and reviewed the Codable protocol. UserDefaults lets you store program settings, user settings and runs as soon as the app loads. 


Key Takeaways:

1. When using the nil coalescing operator you want to see if the code on the left side of the operator "??" has a value and if not then use the value on the right side of the operator. Example, 

let array = defaults.object(forkey: "SavedArray") as? [String] ?? [String]()

If there is a value for the key SavedArray then set it as the value for the constant array, if not then set it to be a new string array. 

2. NSKeyedArchiver.archivedData(withRootOgbject:, requiringSecureCoding:) encodes(writes) an object graph with the given root object into a data representation, optionally requiring secure coding. An object graph is your object, plus other objects it refers to and so on. 

3. NSKeyedUnarchiver.unarchivTopLevelObjectWithData() decodes(reads) archived object graph and returns the object root. 

4.Using "if let" and "try?" helps to save data only when converting into to a Data object was successful.
Function call call call ...
Tags: javascript, webdev, programming, tutorial
Published: 2021-10-17 14:41:41

We usually call a function by using a set on parenthesis after its name eg. `fun()`
but what if our function returned a function? In that case you would be able to call it again
```js
function hello(){
    console.log("Hello");
    return () => console.log(" world");
}
hello()();
```

It looks a lot normal if we use a variable in between
```js
function hello(){
    console.log("Hello");
    return () => console.log(" world");
}
let func = hello(); //receiving the function returned from hello
func();
```

but in we try to call the function third time it will give us error.
![function call error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyrckun0klp3rypqz6vv.png)

but what if your function returned itself? in that case when ever we call it we are again getting a function returned so can can keep calling it infinitely
```js
function hello(){
    console.log("Hello");
    return hello;
}
hello()()()()()()()()()()()();
```

Hope you enjoyed the article, for now ***cya()()()()()()***
Why is this code valid
Tags: javascript, programming, webdev
Published: 2021-10-17 14:25:06

![Weird code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjuf8h97xhzvcjm9g70j.png)
Although this code looks really weird but its 100% valid and works perfectly.
That is because if you use semicolon that just indicates end of a statement and a statement can be empty as well
so **;;** just means two empty statement. Likewise you can have as many semicolon as you want and it wont effect you output.
3 Ways to Add JS to HTML
Tags: html, javascript, webdev
Published: 2021-10-17 14:22:03

## 1. Internal
The 1st one is by placing the **`<script>`** tag in the `<head>` or in the `<body>`.
> if you placed in the body make sure it's before the closing **`<body>`** tag, so your scripts will run for all the elements in the body.

![Internal JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdldvyhhhxj1nzcly4jx.png)
 
>> This way is not for daily use or for big projects, because the html file will be complicated more and more.

## 2. External
The 2nd is by creating a **JS** file and link it inside your **HTML** .

In this example we created a Javascript file named `script.js` and linked it using the `script` tag. put the path to your JS file in the `src`.

![External JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx0risiy158x8zrtd9ts.png)
 
 


## 3. Inline
The last way is the inline way. by adding an event listener inside any HTML element you want to run your scripts on.

![Inline Js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ozoscmo7369g8tunoob.png)
 
SO the above code runs when the user clicks on the body
 


> The common used way for daily programming is the **External way**
Release 1.57 of perl-workflow, a bug fix release
Tags: perl, opensource, release
Published: 2021-10-17 14:11:38

---
title: Release 1.57 of perl-workflow, a bug fix release
published: true
description: a bug fix release of perl-workflow
tags: perl, opensource, release
//cover_image: https://direct_url_to_image.jpg
---
Due to extreme workload at my job, we have not made as much progress as we would like. 

My tireless collaborator Erik Huelsmann have fixed a few bugs and they have made into release 1.57 released today.

We hope to pick up on the forthcoming 2.0 release as soon as things settle at a somewhat normal level again.

- The [2.0 milestone is documented here](https://github.com/jonasbn/perl-workflow/milestone/14), as in a list of PRs and issues
- And the [2.0 projected road map is documented here](https://github.com/jonasbn/perl-workflow/projects/1) as a set of notes and issues.

Here follows the change log of release 1.57.

## Change Log

The original is [available on GitHub](https://github.com/jonasbn/perl-workflow/releases/tag/1.57)

## 1.57 2021-10-17 Bug fix release, update recommended

- PR [#170](https://github.com/jonasbn/perl-workflow/pull/170) by @ehuelsmann addresses an issue where Workflow tries to log during the execution of `use` statements, at which time it's highly unlikely that the logger has already been initialized, resulting in warnings being printed on the console

- PR [#171](https://github.com/jonasbn/perl-workflow/pull/171) by @ehuelsmann adds initialization of context parameters passed at instantiation; currently, parameters need to be added explicitly and individually after instantiation

- PR [#173](https://github.com/jonasbn/perl-workflow/pull/173) by @ehuelsmann addresses issue [#172](https://github.com/jonasbn/perl-workflow/pull/172), fixing failure to automatically run actions from the `INITIAL` state
Mobile icon navigation with micro interaction
Tags: css, ui, beginners, codepen
Published: 2021-10-17 14:02:25

<p>Simple and nice looking mobile navigation with micro interactions</p>

## Required tools

- [Codepen](https://codepen.io/)
- [Fontawesome](https://fontawesome.com/)

## Let's brake down the micro interaction part
<p>For a noice effect we can do an annimation where we scale up and down the icon while user is clicking on it</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kq162hp8lmieq8v6n3q.gif)

```CSS
.menu ul li a:focus:not(.home) i {
  animation-name: pop;
  animation-duration: .5s;
}

@keyframes pop {
  0%   {transform: scale(.8);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}
```

## The actual nav
<p>The menu itself is just a quick nav tag with an unordered list of icons</p>
```HTML
<nav class="menu">
    <ul>
      <li>
        <a href="#"><i class="fas fa-comment-alt-lines"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-bell"></i></a>  
      </li>
      <li>
        <a href="#" class="home"><i class="fas fa-store"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-shopping-bag"></i></a>  
      </li>
      <li>
        <a href="#"><i class="fas fa-user"></i></a>  
      </li>
    </ul>
  </nav>
```

```CSS
.menu {
  width: 300px;
  background-color: #fff;
  box-shadow: 0px -2px 15px -3px #ffa8ba;
  padding: 0px 20px;
  border-radius: 25px;
}

.menu ul {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  padding: 0;
  margin: 0;
}

.menu ul li {
  text-align: center;
  box-sizing: border-box;
}

.menu ul li a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-top: 2px solid;
  border-color: transparent;
  color: #888;
}

.menu ul li a:hover:not(.home) {
  border-top: 2px solid #fc466b;
  color: #999;
}

.menu ul li a:focus:not(.home) {
  border-top: 2px solid #fc466b;
  color: #fc466b;
}

.menu ul li a:focus:not(.home) i {
  animation-name: pop;
  animation-duration: .5s;
}

@keyframes pop {
  0%   {transform: scale(.8);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}

.menu ul li a.home {
  color: #fff;
  background: #fc466b;
  border-radius: 20px;
}
```

## Final result on codepen
{% codepen https://codepen.io/FlorinCornea/pen/qBXbeQz %}
Install tailwind CSS properly in React JS
Tags: javascript, beginners, tailwindcss, css
Published: 2021-10-17 13:56:04

Hi everyone i hope you are doing well ok let get into the point 
here i will show you how to install tailwind css in react js , you can say it is already available in tailwind documentation but i will show another way to install tailwind

if you need official tailwind css documentation go to this link 
<a href='https://tailwindcss.com/docs/guides/create-react-app'>
Tailwind css installation </a>

here we can see how to install this from step by step

first install all the neccesary things 
here you need
<ul>
           <li> postcss </li>
           <li>  auto prefixer </li>
           <li> postcss </li>
</ul>
```javascript
npm install tailwindcss postcss-cli autoprefixer@9.8.6 -D
```

```javascript
npm i postcss@latest
```

after install everything from above you need to generate tailwind config file using below command
```javascript
npx tailwind init tailwind.js --full
```
and you need to create a assets folder inside src. create two new files tailwind.css and main.css 

copy the below text and paste it inside the tailwind.css file and leave main.css empty. The main.css will hold the styles that are generated as a result of what we have in the tailwind.css file

```javascript
@tailwind base;

@tailwind components;

@tailwind utilities;

```
create postcss.config.js inside myapp(your project name)
```javascript
postcss.config.js
```

paste the below text
```javascript
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
```


inside package.json add this  

```javascript
"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run watch:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
}
```
ok we are coming to final step 

import main.css inside index.js file 

```javascript
import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
```
that's all folks
Creating of LinkedList
Tags: java, linkedlist
Published: 2021-10-17 13:37:28

The LinkedList class of the Java collections framework provides the functionality of the linked list data structure (doubly linkedlist).

*Each element in a linked list is known as a node. It consists of 3 fields:*
**Prev -** stores an address of the previous element in the list. It is null for the first element
**Next -** stores an address of the next element in the list. It is null for the last element
**Data -** stores the actual data

* **Syntax for creating a LinkedList:** 

```java
LinkedList<Type> linkedList = new LinkedList<>(); 
```
Here, Type indicates the type of a linked list. For example,
```java
// create Integer type linked list

LinkedList<Integer> linkedList = new LinkedList<>();

// create String type linked list

LinkedList<String> linkedList = new LinkedList<>(); 
```
* **Example Program to create LinkedList:**
```java
import java.util.LinkedList;

class Main {
  public static void main(String[] args){

    // create linkedlist
    LinkedList<String> animals = new LinkedList<>();

    // Add elements to LinkedList
    animals.add("Dog");
    animals.add("Cat");
    animals.add("Parrot");
    System.out.println("LinkedList: " + animals);
  }
}
```
**OUTPUT:**
``` 
LinkedList: [Dog, Cat, Parrot]
```
Browser level image lazy loading
Published: 2021-10-17 12:55:30

Images play a very important role in web performance. Many a times we don't give much importance to simple attributes of html elements and we try different ways to optimize the performance of the webpage.

Lets see how setting width and height attribute to the image can improve the web performance and also lets understand the new attribute called 'loading="lazy"' can help us in fetching images based on the DOM visibility in the viewport.

First let us understand why setting width and height to image is important. Browser engine parses HTML and converts HTML to DOM and CSS to CSSOM. Once the image is downloaded there will be a layout shift since during the first stage of HTML parsing the image width and height is unknown. This results in repaint.
Layout shifting is not a good user experience. If there are too many images then it leads to performance issue.

Its important that we set width and height to image.

Another important attribute which is supported in all chrome browsers with version above 76 is 'loading="lazy"'.

When we have multiple images in the page, then we can use loading="lazy" attributes which downloads the images only for the DOM visible in the viewport. 
When we scroll based on the DOM visibility in the viewport images will be downloaded. This is very useful attribute as there is no need for us to have a listener on scroll to check whether DOM is visible in the viewport or not.

Hope this helps :-)

For more details please refer:
https://web.dev/browser-level-image-lazy-loading/
Multi Dimensional Array in Tables
Published: 2021-10-17 12:40:50

Recently at work i was tasked to add styling to a table , but what was special was that because i needed to make the borders of my table rounded , i had to target the four corners of the table. 

That's where multi dimensional arrays come in , Tables are always multi dimensional , from row first followed by columns. So this requires a nested for loop and conditional statement to accurately pint point the exact element in the loop i want to style. And with arrays come indexes which makes it so much easier.

We start by looping through the top level array to display the table's TR:

```javascript

pages.map((row , rowIndex) => {
  return (
    <Tr>

    </Tr>
 )
}

```

Now that we have looped and displayed out <Tr/> its time to loop through our content and display it within our <Tr/> , in a <Td/>. 

```javascript

pages.map((row , rowIndex) => {
  return (
    <Tr>
      {row.cell.map((cell , cellIndex) => {
         return (
            <Td></Td>
           )
     })
    </Tr>
 )
}

```

Now keep in mind that besides looping , we also need to pinpoint the <Td/> that are at the four corner of the table , so how do we do that , simply with array indexes.

In pseudo code:

Top left corner of table: row[0][0] 
This finds the first row , and the first column element for that row

Top right corner of table row[0][cell.length -1]
This finds the first row and the last column element of that row

*For example purposes i will only show the 2 corners of the table

so placing this in a conditional as part of our loop:

```javascript

pages.map((row , rowIndex) => {
  return (
    <Tr>
      {row.cell.map((cell , cellIndex) => {
       
       if(rowIndex === 0 && cellIndex === 0){
              return (
            <Td backgroudColor="red"></Td>
         )
     }else if (
       rowIndex === 0 && 
       cellIndex === row.cell.length -1 ){

        return (
            <Td backgroudColor="yellow"></Td>
         )
    } else {
         return (
            <Td backgroudColor="white"></Td>
         )
   }
     })
    </Tr>
 )
}

```

By setting a conditional to check if the index matches the index of the row and column element that we want , in this case the corners of the table, we will be able to manipulate the data and even styling in the table freely.

This is my first step into learning how to manipulate tables and as a front-end developer this is very important, please do share with me if you do it differently. 

And today's also my birthday so just want to give a shout out to my mentor Ian for his patience and guidance in teaching me. Thanks Ian!
Very Simple PHP Redirect
Tags: php, devops
Published: 2021-10-17 11:53:21

If you've moved (are planning to move) to new domain & you don't want to simply redirect to new domain.
You want to tell your site visitors that your domain has changed.

This simple PHP script shows very simple message that domain has changed for set amount of seconds, then redirected to the new domain.

It is also render 301 status code. So Google will know your page was moved, too.

It will fetch the current request URL, and redirect to the new domain with exact same URI.

By the way, it has Japanese text, too :)

https://github.com/katzueno/simple-php-redirect

This post was copied from Readme. If there is a newer version and newer description at GitHub readme, refer to GitHub's readme.

## Requirement

- For Apache server, mod_rewrite module should be enabled, and allowing to use .htaccess
    - You could set it in Apache config.
- For Nginx server
    - PHP-FPM
    - Ability to set nginx config

## How to install

1. Change the config values such as new domain to index.php to your desired state.
2. Place (or upload) index.php script to your old domain's webroot and clear all other files
3. Edit your apache config, .htaccess or Nginx config so that all request will go through this index.php
4. Enjoy the rest

## Where to set

`$newDomain`: Enter the new domain name. Starts with `https://`

`$siteNameEn`: Site name in English.

`$siteNameJa`: Site name in Japanese.

`$sec`: Seconds to wait and redirect

## Apache's .htaccess example

Create .htaccess file (if your server is allowing it), and enter the following.
If you want to place it under some directory, make sure to change `RewriteBase`.

```apacheconf
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase / # if it's lives under subdirectory, add the directory accordingly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}/index.html !-f
RewriteCond %{REQUEST_FILENAME}/index.php !-f
RewriteRule . index.php [L]
</IfModule>

```

## Nginx config example

I assume you know about Nginx server and its config.
Add the following config in your nginx config.
I assume you've set `~ \.php($|/)` location to send it to php-fpm.
Change location to sub-directory if you want just to place underneath, and `absolute_redirect` must be turned off.


```
location / {
    index index.php index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^ /index.php last;
    }
}
```

Enjoy.
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2021-10-17 12:00:29

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259b02befe.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q___: Why did the functional programmer finally move out of their house?

___A___: For(e) closure
 -->
Day 9 of 100 Days of Code & Scrum: Planning the Second Week!
Published: 2021-10-17 11:58:38

Cover Image by <a href="https://pixabay.com/users/mohamed_hassan-5229782/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3229690">mohamed Hassan</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3229690">Pixabay</a>

Good Sunday, everyone!

I took a healthy break for the day, while still meeting the requirements of the challenge.

## Yesterday

I did my Weekly Sprint Review and Retrospective, in which I went over what I've managed to do well, what my shortcomings were, and what I could do better in the future.

## Today

Since it's the start of a new week, I planned out what I should be doing and established my new `Sprint Goals`. My focus for this week will be **Scrum**, to prepare for the upcoming [Chingu](https://chingu.io/) voyage.

## Weekly Sprint Goals

- focus on learning **Scrum** principles
- study for Professional Scrum Master I (PSM I) certification
- write some guides about Scrum
- continue learning GraphQL
- continue networking
- no interviews for now

### Resources/Recommended Readings

- [The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)
- [Apollo Docs](https://www.apollographql.com/docs/)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)
- [A Short Introduction to the Scrum Framework by Jim Medlock](https://medium.com/chingu/a-short-introduction-to-the-scrum-methodology-7a23431b9f17) - A well-written introduction to the Scrum framework.

I hope everyone's doing well in their weekend!

### DISCLAIMER

This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>