teleren/devto huggingface dataset:
How to use Details and Summary tags
Tags: html, beginners, tutorial
Published: 2020-12-04 15:46:11

---
title: How to use Details and Summary tags
published: true
date: 2020-11-21 20:49:00 UTC
tags: html, beginner, tutorial
canonical_url: https://web-crunch.com/posts/how-to-use-details-and-summary-tags
---

{% youtube 7KCypwasOu4 %}

If you've ever wanted an accordion-like user interface without all the fuss of custom JavaScript, CSS, and HTML look no further than the `<detail>` and `<summary>` tags in HTML5.

The **HTML Details Element** (`<details>`) creates a container element that is only visible when toggled into an "open" state. A summary can be optionally provided using the `<summary>` element.

When combined the `<details>` and `<summary>` elements give you a primitive toggle list of content with HTML alone. I like using this pattern for frequently asked questions, support documentation, or other documentation alone. It's very handy and fast to get started with.

For this tutorial, [I made a custom CodePen to demonstrate how it works](https://codepen.io/webcrunchblog/pen/vYKzvgJ).

The typical markup looks like the following:

```html
<details>
  <summary><strong>summary</strong> text</summary>
  Lorem ipsum dolor sit amet consectetur, adipisici......
</details>
```

The `<details>` tags surround both the content and the `<summary>` tags by design. The content within the `<details>` tags remains hidden minus the `<summary>` tags contents which acts as a toggle/control for expanding the hidden content.

#### Showing a `<details>` block by default

You can open a `<details>` element by default by passing `open` as an attribute.

```html
<details open>
  <summary><strong>summary</strong> text</summary>
  Lorem ipsum dolor sit amet consectetur, adipisici......
</details>
```

### Leveraging JavaScript with details and summary

On top of the built-in toggling effect, you can add additional styles using a "toggle" event listener built into the browser.

Here's a quick example of what you could achieve

```javascript
const detailsElements = document.querySelectorAll('details')

detailsElements.forEach((detail) => {
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      detail.style.borderColor = "red";
    } else {
      detail.style.borderColor = "#777777";
    }
  })
})
```

The code above scans the entire page for `<details>` elements. For every element that gets "toggled" we listen for that change and toggle the styles directly. In this case, I change the border color.

[Be sure to check the final CodePen for a better example!](https://codepen.io/webcrunchblog/pen/vYKzvgJ) 


### Shameless plug!

![Hello HTML & CSS](https://dev-to-uploads.s3.amazonaws.com/i/x4igv9lgvwkdv4rcv2f9.jpg)

I have a new free course coming out soon called [Hello HTML & CSS](https://hellohtmlcss.com). It's a course designed to help you learn HTML & CSS from scratch.

[Subscribe to get notified when it launches >> ](https://hellohtmlcss.com)
Transport Protocols: TCP and UDP
Tags: webdev, systemdesign, backend, programming
Published: 2020-11-21 20:39:35

---
title: Transport Protocols: TCP and UDP
published: true
description: What is TCP and UDP, differences and the usecases for each.
tags: webdev,systemdesign,backend,programming
---

In this video, we briefly look at the Transport Layer of the TCP/IP model and then discuss the different transport protocols. After watching this video, you will be able to answer what is TCP, what is UDP, the differences between TCP and UDP Protocols and when should you use TCP or UDP.

I also have a [YouTube channel](https://youtube.com/theroadmap) where I post new video every week. Feel free to check that out.
The Free Currency Exchange API with 150+ Currencies
Published: 2020-11-21 20:38:25

Hi Developers,

Here I bring for you a Free Currency Exchange API and some of its features are:

- Free & Blazing Fast response
- No Rate limits
- 150+ Currencies, Including Common Cryptocurrencies
- Rates Daily Updated

The API is user friendly, to get the currency list with EUR as base currency use this URL:
https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/eur.json 

More info on this free API is available at:
https://github.com/fawazahmed0/currency-api
How to change last commit message
Tags: git, beginners
Published: 2020-11-21 20:36:56

---
title: How to change last commit message
published: true
description: Often I have to change commit messages from my last commit, this is how I do it.
tags: git, beginners
//cover_image: https://direct_url_to_image.jpg
---

Often when making changes to code, I commit them and then have to change to commit I just made, either because I think the commit message could be better or I had to make a last-minute change to the code I wish to include in the commit.

### Change last commit message

So consider I committed changes with the following command (`-m` to write one line commit message):
```
git commit -m "fix: big feature X"
```

Here’s how I fix the commit, using the `--amend` option.
```
git commit --amend -m "fix: small feature X"
```
In case I want to add additional code to the commit, I run `git add <file>` before running `git commit --amend`.

### Verify new commit message

To check that it worked and I fixed the right commit I check the latest commit with:
```
git log --oneline
```

I use `--oneline` because I just want to see the commit messages, instead of also seeing the name and email of the author of the commit. You’ll an output similar to this, where you can see the last commit has the correct message:

```
1792519 (HEAD -> master, origin/master, origin/HEAD) fix: small feature X
701aa33  docs: add instructions to README
(END)
```
In my environment, this will open vim, which I close by typing `:q`.

### Fix pushed commit

In case I already pushed to the remote repository the commit I want to fix, I force the push to remote to update the commit. Preferably, you are working on a feature specific branch, which does not affect the main one (in case this messes the git history for some reason). So this is what I would run, where `<branch>` is the branch you are working on (e.g.: `master`).
```
git push -f origin <branch>
```

----

Hope this helps you fix the last commit message.
How to unpack .wpress archive files created by the All-in-one-Wp-Migration Wordpress plugin
Tags: wordpress, tutorial
Published: 2020-11-21 20:35:47

Recently I needed to download some files from a Wordpress installation where the client only gave me access to the admin dashboard. Fortunately the [All-in-One WP Migration](https://wordpress.org/plugins/all-in-one-wp-migration/) plugin was already installed, so I could take a quick backup of the whole site by downloading the installed plugins, theme and database.

To my surprise downloading the backup from the All-in-One WP Migration plugin only gave me a single compressed `migration.wpress` file that any unpack tool refused to extract. A little web search brought me to a five year old tool called [Wpress-Extractor](https://github.com/fifthsegment/Wpress-Extractor) but the provided binaries for MacOS refused to work because the package was already too old.

So I decided to rewrite this little helpful tool in Node.js to make it cross-platform compatible for Windows, MacOS and Linux.

---

Ok here it is: A simple 2-step tutorial how to extract a file with the `.wpress` extension on your computer:

### **1. Step**

Make sure that you have [Node.js](https://nodejs.org/) installed in your computer:

```sh
node --version
# => v14.12.0
```

### **2. Step**

In your terminal navigate to the location where the `.wpress` file is downloaded (e.g. `~/Downloads`) and run the following command:

```sh
npx wpress-extract migration.wpress
```

It then creates a new folder `migration/` where the content is extracted into.

---

That's it for today. If you would like to take a deeper look at this tool, the source code is open source, so feel free to visit the GitHub repository:

{% github ofhouse/wpress-extract no-readme %}
Angular: Avoiding Circular Dependencies
Published: 2020-11-21 20:32:21

**Circular Dependency Errors**
<sub> Are certain to happen, but figuring them out can take a long time.  I'm not sure if they are generated from WebPack or Angular, but I suspect WebPack because almost all of their error messages require a Master Degree in Error Message Interpretation.

Part of the issue is that Angular has it's own NGModule system which runs differently than the ES6 module system. Here's a few tips I've learned along the way.

- In ES6 modules (in our functions that need references to Angular components), this style fails.
```typescript
import {
 component1, 
 component2 } 
from "@name/components";
```
Where @name is pseudonym for a file location where the component folder is located. This type of import implies an index.ts file listing all the components in that folder. To fix this problem:
**<sub> Specify Explicit file paths instead**
```typescript
 import {component1} from 
  "@name/components/component1";
 import {component2} from 
  "@name/components/component2";
```
- Improper ES6 import references

Assuming the statement below is in an ES6 module, with an index.ts file, this appears to cause the error.
```typescript
import {something} from "."
//do this instead
import {something} from "./moduleName"
```
The more explicit form indicates that we directly want to grab something from moduleName.

Finally keep the imports segregated:

```typescript
import { a, b, c} from "AModule";
import { d, e, f} from "BModule"
import { g, h, i} from "CModule"

//rather than 
import {a,b,c,d,e,g,h,1} from "@name/functions";
//where functions folder contains an index file.
```
It's a bit more work but worth bypassing the dreaded circular dependency error.
Adding Docker image to Docker Hub private repository
Tags: docker
Published: 2020-11-21 20:22:40

I've learned something as straightforward as adding a Docker image to a repository can be somewhat frustrating. When I say private repository I mean a private repository hosted on Docker Hub. 

Here are the steps I had to take to successfully push a Docker image:

1. If you recently created a private repo, log out of Docker and then login back in by running `docker logout` and `docker login` commands. The reason behind this is to make sure Docker is aware that the private repo exists. 
2. This is very important. The Docker image has to be named exactly the same as the private repo. If it is not named the same, you will get a `requested access to the resource is denied` error. To change the Docker image name, run 'docker tag [current image name] [dockerhub username/private repo name:tag]. You can add whatever you want for the tag, I added '1.0'.
3. Now with the Docker image having the correct name, you can add it to the private repository. Run `docker push [username/private repo name:tag]`. For example `docker push johnsmith/demorepo:1.0`. 

You're done.
S2E2 Learn JMeter Series - Random Variable
Tags: performance, webperf, testing, tutorial
Published: 2020-11-21 20:19:47

Welcome to Learn JMeter Series!

In this season two, episode two, you will learn following:

* Random Variable

{% youtube rriLK0wpbC0 %}

☑ Buy me a tea 🍵 : https://www.buymeacoffee.com/qainsights
☑ [My Blog](https://qainsights.com)
☑ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
out-run / outdoor fitness tracker
Tags: ios, swift, opensource
Published: 2020-11-21 19:37:34

Today, A dear friend of mine shared this amazing app. It is free, opensource and have an elegant design. On top of all that, It stores data on device i.e. no sign ups and no data leaks.

Here you can learn more about it:
 
1. https://apps.apple.com/us/app/OutRun/id1477511092
2. https://github.com/timfraedrich/OutRun
3. https://outrun.tadris.de/
👨‍💻 Queries in Django ( Part 7 ) - Django For Beginners
Tags: python, django, webdev, beginners
Published: 2020-11-21 18:51:19


This is part of the series [Django For Beginners](https://bit.ly/django-for-beginners) we are going to see about apps in app and we will see about models in django in this part.

In this post we are going to learn a lot queries in django. I recommend you to read last post  so as it will be easy to understand context of this post , now let's get started.

These are the `models` which we are going to use for most part in this post,

```python
from django.db import models
from django.utils import timezone
from djnago.contrib.auth.models import User

class Post(models.Model)
	title = models.CharField(max_length=250)
	created_at = models.DateTimeField(default=timezone.now)
	author = models.ForeignKey('Author', on_delete=models.CASCADE, related_name="author")
	likes =  models.ManyToManyField(User, blank=True, related_name="likes")
	dislikes =  models.ManyToManyField(User, blank=True, related_name="dislikes")
	likes_count = models.PositiveIntegerField(default=0)
	dislikes_count = models.PositiveIntegerField(default=0)
	rating = models.DecimalField(max_digits=4, decimal_places=2)


class Author(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
	liked_posts = models.ManyToManyField(Post, blank=True, related_name="liked_posts")
	disliked_posts = models.ManyToManyField(Post, blank=True, related_name="disliked_posts")


```


#### Get All

To get all data of the model we use this query, it is not used most often as it costs a lot of resources if data is large and it is always a good practice to limit the query results which we will see how to do after this,

```python
all_posts = Post.objects.all()
```

syntax = ` ModelName.objects.all()`



#### Limit Query Results

To limit results of any query we add `[ start_count : end_count ]`  to get results from `start_count` and `end_count` you can also use `[ : end_count ]` to get results from `0`  to `end_count`. Let's see an example,

```python
only_five_posts = Post.objects.all()[:4]
```

The above query will give `5` results only as index start from `0` and till `4`  it would be five results.



#### Get Query

There is situation many times when we want to retrieve only one result from the query with exact match of fields for such situations we use get query, let me show you an example,

```python
one_post = Post.objects.get(id=1)
```

syntax = ` ModelName.objects.get( pass_keyword_arguments )`


Sorry to interrupt you but I want to tell you one thing that I have started a small blog you may continue reading it [here](https://www.ketaniralepatil.com/python/django/queries-in-django/) it will help me a lot.
Instructions vs Expressions
Tags: scala, javascript
Published: 2020-11-21 18:45:23

- Instructions (statements) are *executed*
- Expressions (values) are *evaluated*

Here is one of my favorite ways to illustrate it:

In JavaScript if we nest `console.log`
```javascript
console.log(console.log(console.log("AnAmazingValue")))
```
we get
```
AnAmazingValue
undefined
undefined
```

And in Scala
```scala
println(println(println("AnAmazingValue")))
```
returns
```
AnAmazingValue
()
()
```


To conclude, JavaScript instruction `console.log` does not return a value (hence the `undefined`), while Scalas `println` expression returns the value `()` of type `Unit`.
Unity Multiplayer Tutorial - Login To Server
Tags: multiplayer, client, login, server
Published: 2020-11-21 18:39:24

In this video I'll show you how to make basic server that will accept client that will login to the server
we will use TCP connection for that
this is the first video in a series of multiplayer tutorials
enjoy :)

{% youtube B-eKP2qiiEg %}

> Like this post? 
> Consider Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Or Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
> You can also follow me on [Twitter](https://twitter.com/elbaz_eran)
> Watch my latest video [here](https://www.tubebuddy.com/quicknav/latest/UCVUNeBGM5wZJKcOx0QwAaTA)
Singleton logger that works only in development mode
Tags: javascript, beginners, singleton, ifee
Published: 2020-11-21 18:38:05

I want to be able to send logs to the console, but only in development mode.
One can easily obtain this result using a combination of singleton pattern and IFEE.

#####utils/env.js
```js
class Env {
	active;
	instance;

	constructor() {
		this.active = process.env.NODE_ENV === 'development';
	}

	static getInstance() {
		if (!Env.instance) Env.instance = new Env();
		return this.instance;
	}

	log(message) {
		if (!this.active) return;
		console.log(message);
	}
}
```
The `getInstance` method is *static*. Therefore it will be possible to use it directly on the class (rather than on the instance generated on the basis of it).
What this does is check if the class has already been instantiated. If not, it initializes the class itself in the `instance` property. In both cases, it returns that instance. On which it will be possible to use other methods (in this case only `log`).
This is what we call a **Singleton**. Something that, once instantiated, always returns the *same instance*.

> The purpose of this class is to perform an action (console.log), only if under development. There is no need to instantiate a new object every time. *Indeed, the use of the Singleton solution leads to a better performance and optimization of the memory space.*
```js
constructor() {
		this.active = process.env.NODE_ENV === 'development';
	}
```

The constructor is in charge of activating the class or not. The activation depends, in fact, on `process.env.NODE_ENV`. The `active` property, which contains the value `true` in the case of *development environment*, is discriminating in the **guard** placed at the beginning of each method.
```js
log(message) {
		if (!this.active) return;
		console.log(message);
	}
```

***

Thus, it is possible to export the class. When imported into another file just use the getInstance method.
```js
import Env from 'path/to/singleton';
const env = Env.getInstance();
env.log('I should work only in dev env');
```

However, using an **IFEE** can lead to slightly cleaner code. Instead of exporting the class, the IFEE is exported - or rather, the result of it.
#####utils/env.js
```js
class Env {
   ...
}

export default (function () {
	return Env.getInstance();
})();
```

Consequently, in any other file:
#####src/anyFile.js
```js
import env from '../../utils/logger';
env.log('fresh & clean!');
```

This, of course, will be visible only when using `npm start`. Serving the result of `npm run build` will not output the log in console.

***

Useful resources:
* [Singleton](https://refactoring.guru/design-patterns/singleton)
* [IFEE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)

***

Contacts:
* [Twitter](https://twitter.com/did0f)
* [Linkedin](https://www.linkedin.com/in/francesco-di-donato-2a9836183/)
GitHub: where to see all my issues?
Tags: github, programming, help
Published: 2020-11-21 18:32:30

---
title: GitHub: where to see all my issues?
published: true
description: 
tags: github, programming, help
//cover_image: https://direct_url_to_image.jpg
---

Although I have been using GitHub for ages I am probably not a very knowledgable user.

For example I have not idea how to see all the issues in all of my projects? Both project in my account and project in the various organizations I belong to.

Another thing that I would like to see is all the pull-requests waiting for me in all these projects.

How can I get this information? Does GitHub provide it? Is there some third-party solution?
[Video] How To Use Vue 3 Composition API for State Management
Tags: ionic, vue, javascript, tutorial
Published: 2020-11-21 18:23:15

[Vue 3 Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) for State Management with [Ionic Framework](https://ionicframework.com/docs/vue/overview)... because it is awesome!!

This is a simple presentation showing how to manage state in the application with the composition API as an alternative to [Vuex](https://next.vuex.vuejs.org/).
> See Vuex Post Here: https://dev.to/aaronksaunders/using-vuex4-with-vue3-and-ionic-framework-nca

In this application, we initialize a list of data in the state when the app launches and then allow the user to manipulate the list in a separate view. Each view updating based on the changes in state in a reactive manner.
{% youtube npAdAd3Xb1g %}

### More VueJS & Ionic Videos
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xw2w8i9ccngje6h77m8s.png)](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg)
How to use PNPM with Laravel
Tags: pnpm, laravel
Published: 2020-11-21 18:20:18

---
title: How to use PNPM with Laravel
published: true
description: Run these few commands to start using pnpm with Laravel
tags: pnpm, laravel 
//cover_image: https://direct_url_to_image.jpg
---

[PNPM](https://pnpm.io/) is a *"Fast, disk space-efficient package manager"*.

Here is a simple script to start using pnpm in Laravel:

```bash
echo "shamefully-hoist=true" > .npmrc
```

Now you run build scripts as usual:

```
pnpm run watch
# or
pnpm run dev
```
Take a day off
Tags: wellbeing
Published: 2020-11-21 18:12:52

---
title: Take a day off
published: true
description: Sometimes taking a day off is the best thing you can do - for yourself, for your colleagues, and for your work. 
tags: Wellbeing
//cover_image: https://direct_url_to_image.jpg
---

I'm usually pretty good at knowing what I do and what I do not give a fuck about, but recently the lines have been a little blurred. Far too much of my energy has been spent on things that would ordinarily be in my "don't give a fuck" list.

Why have I found myself with a lack of patience?

Why have I found myself unable to sleep most nights? 

Why have I found myself losing motivation?

Maybe the answer to these questions wasn't really important. But having taken a single day off last week to do things I genuinely love doing, I can at least tell you that a little perspective has made all the difference. 

Perhaps you are in need of a day off too? My advice to you is: take it.
Symlink() No such file or directory. 
Tags: laravel, php, linux
Published: 2020-11-21 18:01:44

A couple of months ago, I was working on a website developed using laravel. It was working perfectly on my computer. When I push it on a live environment and executed the terminal command to link the storage, what I see was an error. There was no clear solution found on Google except for 
php artisan storage:link
The above command. Thanks to my knowledge I know that this command creates the shortcut between the storage and the public directory. So I decided to create the li manually using the Linux command. 

Read the full article over here. 

https://rishabhgupta.co.in/blog/symlink-no-such-file-or-directory-laravel
if statements by a n00b
Tags: javascript, codenewbie, startup, programming
Published: 2020-11-21 17:38:59

#####Alright everyone I consider myself a noob due that I have started coding not too long ago, here is my simple explanation for if statements.#####

So when someone tells us about an IF statement what do we think about? A condition right...? Just as we communicate this is the same thing.

If certain to scenario/condition happens then I will do this...

This is what it looks like in code:

*if (condition) {
   your code
}*

Pretty simple right? So if the condition that we want is met, then it will execute the code your write in there, if NOT then it will just skip it. Let's look at something a bit more descriptive.

*if (today === Friday) {
   Party!
}*

I bet you understood that one huh. Alright now, there are a bit more tricks to this like I'll show below.

**ELSE:**
This basically is a code of block that executes after the if statement IF the initial condition is not met. 

*if (today === Friday) {
   Party!
} else {
   How many more days til Friday?
}*

**ELSE IF:**
This one would be like adding another condition to check after the first one is false. As we can see below, if today is not Friday or Thursday then we want to know how many more days until Friday.
The final else only executes if the 2 first conditions are not met.

*if (today === Friday) {
   Party!
} else if (today === Thursday) {
   Ok, keep pushing, just one more day
} else {
   How many more days til Friday?
}*

I hope this helps out whoever needs it.

Thank you for reading.