teleren/devto huggingface dataset:
Pure HTML Accordion
Tags: html
Published: 2020-08-25 10:32:25

---
title: Pure HTML Accordion
published: true
description: How to build an accordion component with just HTML.
tags: #html
//cover_image: https://direct_url_to_image.jpg
---

# Accordions

In the past when building accordion components, I'll usually reach for Bootstrap's accordion implementation. Most of the projects I work on use Bootstrap so it's always seemed like the obvious choice. It's a wee bit complicated though.

```
<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Click me please!
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div>
    Ooh, you clicked!
  </div>
</div>
```

You need a lot of attributes to make it work, and it's easy to forget them or mismatch the `id` and the `href`. The type of problem that's sitting right in front of you but for some reason takes you absolutely ages to see.

# Details Element

We've now been saved from having to use tons of attributes and ids/hrefs to make our accordions work, thanks to the `<detail>` element!

![](https://media2.giphy.com/media/3gM1liq7Eetk4/200.gif)

I'm not sure how long it's been around, but a colleague has just shown it to me and it's magical. It works like this.

```
<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>
```

It starts with a `<detail>` element, which has a `<summary>` element nested within it, as well as whatever content you want to show/hide. Whatever is inside the `<summary>` element shows as the accordion title, and anything else is shown/hidden when the title is clicked. You'll probably want to do some styling, but the opening/closing is all handled for you. 

#### Events

Another cool feature of this element is that is supports the `toggle` event whenever the element is opened or closed. Perhaps you'd like to show a cool animation? The world is your oyster!

#### Example

I've put together a very basic example [here](https://codepen.io/mmcgrorty1/pen/QWNpEYx). 

![](https://i.imgur.com/6FKazYA.gif)

# Support

The Detail element currently has around 95% browser support, with only IE11 being the only major browser not supporting it. More detailed information on the level of support can be found [here](https://caniuse.com/#feat=details). 

# Further Reading

You can read about the Detail element further at MDN.

[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
Some useful resources for GitHub readme
Tags: github, icon, markdown, readme
Published: 2020-08-25 10:19:56

This is a curated list of resources that will help you to make your GitHub more beautiful or professional looking. 

## Icons
Using icons in your readme makes it more visually appealing for your viewer. Finding icons can be hard, Simple-icons provide more than a thousand SVG icons. 

Like this dev.to icon <img height="40" width="40" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/dev-dot-to.svg" />


{% github simple-icons/simple-icons %}

##Badges

shields.io provides an easy way to create and customize badges. They have a lot of different types of badges ready to use. 

Like this one: ![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fdev.to%2Farnabdeypolimi)

{% github badges/shields %}

##GitHub profile readme generator 

Recently GitHub introduced a new feature call profile readme. You can use the GitHub profile readme to introduce yourself to your viewers. Rahul Jain made a tool that will help you to generate readme in seconds. 

{% github rahuldkjain/github-profile-readme-generator%}

## Collection of awesome GitHub readme

Check out the repo below for a list of awesome GitHub readme.

{%github abhisheknaiidu/awesome-github-profile-readme%}


Enjoy coding! 
Don't forget to check out my GitHub for more 
{%github arnabdeypolimi/arnabdeypolimi%}
Why do I get an error when i put spaces between the three double-quotes in Python ?
Tags: python, ddsry, computerscience, codenewbie
Published: 2020-08-25 10:18:32

Why do we get an error when we put spaces between the three double-quotes in Python ?

▪ You have to type them like """ and not " " ", meaning with no space between each quotes.


■ Follow me on Twitter ⬇

https://twitter.com/DDSRY21/status/1297167260692316163?s=19
Java: Recursion Basics. 🔁
Tags: java, tutorial
Published: 2020-08-25 10:16:15

# What is recursion?

Recursion is a way to write a program where the function calls itself. A function is called recursive if it calls itself directly or indirectly. 

When a function calls itself directly:
```java
void function1(){
    .
    . 
    function1();
}
```
When a function calls itself indirectly:

```java
void function1(){
    .
    .
    function2();
}

void function2(){
    .
    .
    function1();
}
```
# Applications of recursion:

🎯 Dynamic programming
🎯 Backtracking
🎯 Searching algorithms like Binary search
🎯 Sorting algorithms like merge sort and quick sort
🎯 Tree traversals ... etc.

# Is recursion better than iteration?

Even though recursion might look like its better than iteration since the length of the code is less, it is the iteration that is always efficient when it comes to the time complexity of the code. This is because, when recursive code is being compiled, the number of arguments in the function call stack increases and this increases the time complexity of the code.

# Printing 1 to N using Recursion
```java
class Test{
  static void print1toN(int n)
  {
    if(n==0)
      return;
    print1toN(n-1);
    System.out.print(n+" ");
}

public static void main(String[] args)
{
  int n=10;
  print1toN(n);
}
}
```
# Printing N to 1 using Recursion
```java
class test{
  static void printNto1(int n)
  {
    if(n==0)
      return;
    
    System.out.print(n+" ");
    printNto1(n-1);
  }
}

public static void main(String args[])
{
  int n=10;
  PrintNto1(n);
}
```
# Some Recursive problems to explore:
# Basic Problems:
1. Fibonacci series using recursion
2. Sum of natural numbers using recursion
3. Palindrome check using recursion
4. Sum of digits using recursion

# Advanced Problems:
1. Tower of Hanoi
2. Rod cutting problem
3. Josephus problem

To get good at recursion, practice is the key. After a significant amount of practice, you'll easily recognize the questions that you can solve using recursion! 

To start off, you can practice the above-listed problems on [GeeksforGeeks](https://www.geeksforgeeks.org/) or [Leetcode](https://leetcode.com/). 👩🏻‍💻

... to be continued 🎉

keep learning, keep coding! 🌸
Want to learn but working to hard
Tags: jokes, stories
Published: 2020-08-25 10:07:06

So this is my first post. Wont say to much but need advice on good work environments. I love deving and learning new things, testing in so much detail. This is something i love. However my current job i am in doesn't give me chance to improve myself as i am working 16+ hours just to fix old developers codes and projects. I am learning more when debugging but its not healthy code environment as i am mentally drained, and losing motivation. I would like to work in other countries and meet people like minded. 

Where do we draw the line? Where can i meet new people which works on them self with deving? 

Looking for to Code Jams next year!
Singleton Design Pattern - Javascript
Tags: designpatterns, javascript, singletondesignpattern, creationaldesignpattern
Published: 2020-08-25 09:59:00

## Singleton Design Pattern

- Singleton design pattern is one of the creational design patterns.
- Singleton design pattern describes how the object should be created.
- It ensures that the class has only one instance and provides a global access point to that instance.
- Singleton design pattern is discovered because of bugs due to multiple instances where only one instance should be present.

### When to use Singleton Design Pattern

- We need to ensure only one instance of the class is present.
- We need to provide a global access point to a class instance.

### Code example

- A logger is one of the real-world use cases in which we want to have a single instance globally. 

```javascript
let instance = null;

class Logger {
    constructor(logger_name) {
        if (!instance) {
            this.name = logger_name;
            instance = this;
        } else {
            return instance;
        }
    }
}

const logger_1 = new Logger('Logger1');
const logger_2 = new Logger('Logger2');

console.log(logger_1); // Logger {name: 'Logger1'}
console.log(logger_2); // Logger {name: 'Logger1'}

``` 

- In this example, you can see that even if we try to create 2 different instances of the Logger class there will be only one instance of the Logger class.
- You can find the code in the  [GitHub repository](https://github.com/07101994/design-patterns/blob/master/singleton.js) .

## One Last Thing...

- If you'd like to stay in the loop of Software Development then please subscribe to my newsletter. I will try my best to keep you informed about the latest trends and best practices for Software Development.

- Please like and follow the blog post. Connect with me on  [Twitter](https://twitter.com/tushar_koshti)  and  [LinkedIn](https://www.linkedin.com/in/tushar-koshti-683b1bb0/).

#### Let me know in the comments what you will like to learn next... Thanks for visiting the blog...
Why do we have to put quotes around "strings" but not around True or False in Python ?
Tags: python, beginners, ddsry, codenewbie
Published: 2020-08-25 09:58:36

Why do you put quotes around "strings" but not around True or False in Python Programming Language ?


▪ That's because Python recognizes True and False as keywords.


▪ Representing
the concept of True and False.


▪ If you put quotes around them, then they are turned into strings and won't work.
Mconnect Angular Product Infinite Scroll Extension for Magento 2
Published: 2020-08-25 09:56:59

Do you need to improve the user experience of your Magento 2 store for your visitors? When visitors land on your store, they want to quickly find a product they want to buy. But old school and boring page and product navigation make them tire of finding the right product. As per Baymard’s research, 50% of eCommerce stores have implemented poor or improper navigation due to which users are unable to find products they came looking for. You need to do better in terms of making the job easy for your visitors. Implement a solution that improves your navigation and eliminates the extra page load time simultaneously. 

Mconnect Angular Product Infinite Scroll Extension for Magento 2 will replace the old school pagination method with the latest angular infinite scroll. This angular scroll extension makes the process of finding and navigating through products rapid and effortless on category and search result pages. Visitors now don’t need to wait for the next page of the product to load. Because this angular infinite scroll extension will load the next-in-line products automatically when visitors scroll through their mouse or click on the view more button without any waiting for a page to load. 

Features of Mconnect Angular Product Infinite Scroll Extension for Magento 2:

- The admin can control the number of products to show while 
  visitors scroll down.
- Option to set a loading image while products load after 
  scrolling.
- Showcase the customized loader text along with the image.
- When visitors scroll down, the loader effect will take place on 
  the product listing pages.
- The extension also has the option to show load more button 
  instead of mouse scrolling.
- The products will load automatically once the user scrolls down 
  or click on view more button.
- Improves the user experience for your visitors.
- Eliminates the pagination with angular JS infinite scroller.
- Also, it improves the page load time, thus enhances SEO of 
  product listing pages.
For more such Magento 2 Extensions visit https://www.Mconnectmedia.com
Download now: https://www.mconnectmedia.com/angular-scroll-magento-2.html
Get started with VS Code for Node.js development
Tags: node, javascript, vscode, productivity
Published: 2020-08-25 09:53:09

##  [Code editor](https://code.visualstudio.com) 

As developers, there's one tool we all use much that is a code editor. So we always want a smart code editor that can help and make our work as a developer as easy as possible.

I personally use the VS Code for Node.js development purposes. I will share some tools and thoughts which I use to make Node.js development easier.

## Node.js Extensions for VS Code

###  [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

- ESLint is a popular extension for VS Code.
- It's a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
- It will detect problems in real-time like unused variables and incorrect variable names like errors easily.

### [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

- Debugger for Chrome allows developers to debug javascript code with developer tools available in Chrome.
- Features are breakpoints, variables values, etc can be used with this extension.

### [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

- Prettier code formatter helps us to auto-format the Javascript code when we save the javascript files or using a shortcut(Ctrl + K, F - Windows, Cmd + K, F - Mac).
- Prettier is a configurable code formatter. Helps us to make the code formatting consistent all over the project.

###  [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 

- Visual Studio IntellliCode provides AI-assisted code completion features for Javascript/Typescript, Python and other languages.
- This tool also improves the productivity of the developer as it provides great code completion assistance to developers.

###  [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

- Code Spell Checker is also a great tool that prevents silly mistakes like spelling mistakes and helps the developers to use proper names across your project.

## One Last Thing...

- If you'd like to stay in the loop of Software Development then please subscribe to my newsletter. I will try my best to keep you informed about the latest trends and best practices for Software Development.
- Please like and follow the blog post. Connect with me on  [Twitter](https://twitter.com/tushar_koshti)  and  [LinkedIn](https://www.linkedin.com/in/tushar-koshti-683b1bb0/).

#### Let me know in the comments what you will like to learn next... Thanks for visiting the blog...
Interplanetary File System (IPFS) Explained
Tags: ipfs, blockchain, tutorial
Published: 2020-08-25 09:46:54

Hey everyone, in this explainer video we talk about what IPFS is and why it's useful to you.

In this video we discuss:
- What is IPFS (or the Interplanetary File System)
- How it works
- How you can store data on it

I was able to produce the content of this video thanks to Fleek.co. Fleek allows you to store your files and host your websites on the IPFS for free.

Please check them out here: https://bit.ly/fleek-co

Other useful links:
Twitter: https://twitter.com/ania_kubow
Youtube: https://youtube.com/aniakubow
Instagram: https://instagram.com/aniakubow


{% youtube djES6W3yzwQ %}
Kỹ Thuật Manual Testing Là Gì ? Và Học Gì Để Trở Thành Một Manual Test Chuyên Nghiệp?
Published: 2020-08-25 09:46:41

Manual Testing (MT) là gì? Điểm khác nhau cơ bản nào giữa Manual Testing và Automation Testing. Ưu và nhược điểm của kỹ thuật này. Các công việc chính và những kiến thức cần phải có của MT là gì? Và điểm cuối cùng chúng tôi muốn phân tích với các bạn đó chính là học gì để trở thành một MT chuyên nghiệp. Hãy cùng nhau tìm hiểu những vấn đề trên các bạn nhé!
Các kỹ thuật test dù có hiện đại hay truyền thống đến đâu, đều tồn tại những mặc ưu và khuyết điểm, hãy cùng điểm qua những ưu và nhược điểm của kỹ thuật này nhé
Ưu điểm
Tiết kiệm nhiều chi phí hơn, do không phải mua những tool tự động từ bên ngoài
Các tester sẽ dễ dàng hơn trong việc test các giao diện, từ đó có những phản hồi nhanh chóng và trực quan nhất về giao diện ứng dụng của phần mềm
Khi chương trình có thay đổi nhỏ, thì Manual Testing không bị mất quá nhiều thời gian để kiểm tra các trường hợp kiểm thử
Các tester có nhiều cơ hội để kiểm thử khám phá hơn, từ đó tìm hiểu thêm các lỗi phát sinh chưa phát hiện ra, cũng như nâng cao tay nghề tester của mình.
Can i make a variable like this: 4 = 'number' in Python 3.8 ?
Tags: python, ddsry, coding, codenewbie
Published: 2020-08-25 09:37:15

▪ No, the 4 is not a valid variable name.


▪ They need to start with a character (letter, word) or underscore _.


▪ so a4, _A4 and a_four would work, but 1 will not.
🤦‍♂️ Weekly fail (35/2020)
Tags: fail, lessonslearned, css, responsive
Published: 2020-08-25 09:35:02

While working on the styles of my site, I decided to hide a background video for mobile devices (bandwidth reasons). The video was placed in a wrapper to ensure it always occupies the whole available space.

The problem was that later I could not get the video element to be displayed at all. I spent half an hour debugging in multiple browsers and still could not get the element to show up. I was on the edge of calling someone for help when I noticed this:

![CSS hiding the wrapper element with display:none](https://dev-to-uploads.s3.amazonaws.com/i/s15ovj1jxqbb4rmt9bu9.png)

*Lesson learned:* **Always pay attention to the most basic styles (often without any media query restriction) that are applied to parent elements and are hiding on the top of your stylesheet files.**
How does the Internet work?
Tags: codenewbie, internet
Published: 2020-08-25 09:29:56

The Internet makes our lives much easier. We all use the Internet for almost everything like Accessing any information, communicating, learning, online shopping, etc. It is difficult to imagine a day without the Internet.

So, **What the Internet exactly is?** 
It is a network that connects millions of computers worldwide. Internet is a wire actually buried in the ground. It might be fiber-optic cables, satellites, or radio transmissions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vua5vi8ggv0x82wo5v6b.jpg)
 
When two people want to communicate with each other, the first thing, they both will need a computer that is connected to a network with the help of the internet. Once the connection is established, they open the required browser, log in to the account, and send the file or message. yay! It's done.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ya7x4ea2eb6sn1rceat6.jpg)

It looked so easy at first glance but it has a complex system working behind it... Yes, the messages or data are enormous in size and it is difficult to carry such massive packets to its destination. To make it easier, this huge packet is divided into smaller packets and then they are moved further to the resource with the help of the router.

**What is a Router?**
It transfers the data from the sender to the receiver. But how?  It does with the help of the protocol or **IP Address** which helps the computer to find each other.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j8xj1pw0fm0jkw5kz5p7.png)

Every server has its own unique address called the IP Address that allows the system to recognize by the other system via internet protocol. Once the data or packet arrives at a router, router identifies the packet destination and reads the IP address and then sends it to the correct destination by following certain rules and regulations called **TCP (Transmission Control Protocol)**.

TCP is a set of protocols developed for the internet to get data from one network device to another. By following these protocols, the data gets delivered in the best possible way to its destination without any issues. When these packets finally arrive at the receiver's router, they are put together according to the instructor and that's how the computer receives the information.

And that's it! Thank you for Reading :smile: :heart:
OpenShift (DO180) training in kochi
Tags: bestopenshifttraininginkochi
Published: 2020-08-25 09:26:38

STEPS, Offers Best OpenShift (DO180) training in Kochi in association with Spectrum IT Park. Get trained to become a Master in Linux Administration. Call 0484 4082111. To Know more, Visit : [StepsKochi-Best OpenShift training institute in kochi](https://www.stepskochi.com/openshift-administration-do180)
Upcoming Webinar: The Fastest Way to Your Next Test – TestCafe + TestCafe Studio
Tags: javascript, typescript, testing, e2e
Published: 2020-08-25 09:26:00

In this webinar, our Technical Evangelist Paul Usher will demonstrate the difference between TestCafe and TestCafe Studio. Paul will show you how to write code-based tests more quickly and he'll explore the power of TestCafe Studio's integrated visual test recorder (for those who don't want to manually write test code).

Paul's topics will include:

* How to create and debug tests in TestCafe Studio without writing any code.
* How to create stable selectors for your tests.
* The advantages of TestCafe's Smart Assertion mechanism.
* How to leverage both TestCafe and TestCafe Studio within your organization.

## End-to-End web testing made easy

TestCafe Open Source and TestCafe Studio are driver free and do not require you to manage complex plug-ins. If you're ready to test your web apps and want to deliver more reliable solutions to your end-users, be sure to click the link below and register your interest in this live webinar.

**Webinar Date:** Tuesday, September 8, 2020

**Start Time:** 10AM Pacific Time

**[Register](https://dxpr.es/34jU51F)**
Business Analyst Là Gì? Lộ Trình Để Trở Thành Một BA Chuyên Nghiệp
Published: 2020-08-25 09:18:51

Business Analyst hay được viết tắt là “BA”, có nghĩa là một “Chuyên viên phân tích nghiệp vụ”.
Một BA là cầu nối giữa khách hàng và đội ngũ kinh doanh, kỹ thuật của doanh nghiệp. Hiện nay BA được chia thành 3 nhóm nghiệp vụ chính như sau:
Nhóm phân tích chiến lược: nhiệm vụ chủ yếu là phân tích các điểm mạnh, điểm yếu, cơ hội, thách thức của một mảng kinh doanh hoặc của cả doanh nghiệp. Nhóm này thường sẽ là các nhà lãnh đạo, được biết đến với những title như: chuyên gia tư vấn chiến lược, chuyên viên phân tích kinh doanh, chuyên viên phân tích tài chính,…
Nhóm phân tích quy trình kinh doanh, quy trình nghiệp vụ: Công việc của nhóm này là tập trung vào tối ưu hóa, tích hợp quy trình nghiệp vụ để đáp ứng mục tiêu kinh doanh. Các chức danh tiêu biểu gồm: chuyên viên phân tích nghiệp vụ, Business Architect, Business Systems Analyst, Data Analyst,…
Nhóm phân tích yêu cầu sản phẩm hoặc giải pháp: Nhóm này tập trung vào việc mô hình hóa các chức năng, yêu cầu nghiệp vụ, chất lượng của sản phẩm hoặc giải pháp. Một số chức danh tiêu biểu cho nhóm này như: Giám đốc sản phẩm – Product Manager, chủ sản phẩm – Product Owner, chuyên viên phân tích hệ thống – System Analyst, kỹ sư hệ thống – Requirement Engineer,…
Ansible training in kochi
Tags: automationwithansibleinkochi, bestrhcetraininginkochi, rhcetraininginstituteinkochi
Published: 2020-08-25 09:15:05

A Red Hat Certified Training partner for RHCE Red Hat Ansible training in Kochi. Get trained to become an Expert in Ansible Automation. Call STEPS 0484 4082111 for RHCE Training.

To know more, Visit : [*STEPS KOCHI*](https://www.stepskochi.com/automation-with-ansible)