teleren/devto huggingface dataset:
Completed 4 PR's for Hacktoberfest 2k20
Tags: hacktoberfest, opensource, flutter
Published: 2020-10-08 04:39:10

This is my first time when I heard about Hacktoberfest event, I was such fascinated that I spent complete 2 days to learn about Hacktoberfest and Opem Source. 
 And now I have submitted 10 PR's ( All merged successfully ) and I am just loving my contributions. 😄
React How do use a single layout webpage for different personal information 
Tags: react, javascript
Published: 2020-10-08 04:28:48

Hi there, Currently, I am trying to understand how react.js is working with help with react-router-dom. I have to face issues that I wanted to use the same layout for the personal detail form. but I want it to display different data for two different people. let say I click on "phua" and then it will use the layout and get the data from Data.js and provide the information, if I click on "foong" then the system will use the same layout but uses the data from foong in data.js
App.js

``` js
import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';

import Info from './components/pages/Info/Info';


function App(){
  return(
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home}/>
        <Route path='/service' exact component={Service}/>
        <Route path='/Information' component={Info/phua}/>
        <Route path='/Information' component={Info/foong}/>

      </Switch>
      <Footer />
    </Router>
  );
}
 

export default App;
```
Information.js
``` js
import React from 'react'
import "./Information.css"
function Information({img, alt, name, age, gender}) {
    return (
        <>
        <div className="container">
            <div className="row_details">
                <div className="col-personal-logo"> 
                    <img src={img} alt={alt} className="personal-image"/>
                    <h2>Name:{name}</h2>
                    <p>Age:{age}</p>
                    <p>Gender:{gender}</p>
                    <p></p>
                </div>  
                <div className="col-personal">

                </div>

            </div>
        </div>
            
        </>
    )
}

export default Information
```
data.js
```js
export const phua= {
    img:'images/dribbble-avatar.webp', 
    alt:'Phua',
    name:'Phua Yeong Tsann',
    age:'42', 
    gender:'Male',
}

export const foong= {
    img:'avatar_dribbble.webp', 
    alt:'Foong',
    name:'Foong',
    age:'32', 
    gender:'Female',
}

```
info.js
``` js
import React from 'react'
import Information from '../../Information'
import {phua} from './Data'

function Info() {
    return (
        <>
            <Information {...phua} />
            
        </>
    )
}

export default Info
```
Use global data as site's configuration in Eleventy
Tags: javascript, eleventy, node
Published: 2020-10-08 04:20:29

I have used Gridsome and Vuepress for my static sites. I liked them a lot. I want to try Eleventy for my CSS library document. It's simple and easy to use. But its configuration file is only for how the data and templates are processed. It doesn't provide configuration for the information about my site. This is cumbersome if you have many layouts. It is hard to manage information.

Luckily, Eleventy lets you define your data and access it from templates. In this tutorial, I will show you how to use global data to set your site's configuration

In your global data directory, you create a file named `siteConfig.json`. This file contains your site information like below

```json
{
  "title": "Phong Duong",
  "description": "Experiment new things and create programming tutorials",
  "keywords": "javascript, programming tutorials",
  "author": "Phong Duong"
}
```

In your template, you can access this information by specifying the property `siteConfig.*` in any template you need. Below is the example in Pug

```pug
doctype html

html
  head
    title= siteConfig.title
    meta(name="description" content=siteConfig.description)
    meta(name="keywords" content=siteConfig.keywords)
    meta(name="author" content=siteConfig.author)
```

If you want to use Javascript, you export an object

```javascript
module.exports = {
  "title": "Phong Duong",
  "description": "Experiment new things and create programming tutorials",
  "keywords": "javascript, programming tutorials",
  "author": "Phong Duong"
}
```

Eleventy allows you to export a variety of values in Javascript. You can read more in the document

[Global data files](https://www.11ty.dev/docs/data-global/)

[Javascript data files](https://www.11ty.dev/docs/data-js/)
To first time Contributors 😎
Published: 2020-10-08 04:17:08

As a part of [#Hacktoberfest](https://hacktoberfest.digitalocean.com/) 🎃 , I have created a repo [css-snippets](https://github.com/chilupa/css-snippets). Please feel free to contribute and post your questions if any. Hope this helps developers who are contributing to open source or participating in this event for the first time.

## What I Learned From Hacktoberfest

This is my first time contributing to something which I never had a thought of doing it in my 3 years of software engineering experience. At the beginning, I got intimidated seeing the title of the event 🙈 but when I went through [dev.to](https://dev.to/devteam/happy-hacktoberfest-here-s-how-to-show-up-for-open-source-this-month-4cee) posts and read about the [event](https://hacktoberfest.digitalocean.com/) thoroughly, felt it was a piece of cake. I made good progress so far. I have opened couple of Pull requests but many more to go. 

ALL EXCITED!! 😁
Batch Delete Option Buttons with One Click in Excel Office 365!!
Tags: batchdeleteoptionbut, kutoolsexceltutorial, kutools
Published: 2020-10-08 08:06:12

---
title: Batch Delete Option Buttons with One Click in Excel Office 365!!
published: true
date: 2020-10-08 04:02:28 UTC
tags: BatchDeleteOptionBut,KutoolsExcelTutorial,Kutools
canonical_url: https://geekexcel.com/batch-delete-option-buttons-with-one-click-in-excel-office-365/
---

In this article, we are going to see the steps to **Batch Delete Option Buttons with One Click in Excel Office 365** with an example. Let’s get into this article!! Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

**Note:** [kutools for Excel](https://geekexcel.com/get-kutools-for-ms-excel-2019-2016-2013-2010-2007-office-365/) has more than 180 features which are used to complete the difficult task with several clicks. If you want to use Kutools, you need to install it from Excel’s official website.
## Steps to Batch Delete Option Button:

If you want to delete option buttons from your spreadsheet, just follow the below steps.

- Let’s consider the below example, where you can see the option buttons in **Column B & C**. We are going to delete them with the help of the Kutools feature.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Example-11.png)<figcaption id="caption-attachment-15326">Example</figcaption>

- First, you need to **select the range** that you want to remove from the worksheet.
- On the **Kutools Tab, select** the **Delete** option, then **choose** the **Batch Delete Option Buttons** option drop the menu.

!["Choose](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Choose-the-Batch-Delete-Option-Buttons.png)

- Now, all the selected option buttons are removed as shown in the below image.

![Output](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Output-12.png)<figcaption id="caption-attachment-15328">Output</figcaption>

### Note:

- This feature supports the **UNDO** action. To undo the previous action, you need to press ( **CTRL + Z** ).
- If there are many option buttons in the selected range, it takes some progress time to delete them all.

## Closure:

In this article, you can clearly understand the steps to **Batch Delete Option Buttons with One Click in Excel Office 365** with an example. Leave your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!

### Keep Reading:

- [Find and Fill Missing Numbers in a Sequence in Excel](https://geekexcel.com/find-and-fill-missing-numbers-in-sequence-in-excel-office-365/)
- [Count the Occurrences of a Character in a String in Excel](https://geekexcel.com/count-the-occurrences-of-a-character-in-a-string-in-excel-office-365/)
Weekly Developer reading
Tags: developer, programming, productivity
Published: 2020-10-09 11:02:12

---
title: Weekly Developer reading
published: true
date: 2020-10-08 04:00:00 UTC
tags: developer,programming,productivity
canonical_url: https://denham.ie//2020/10/08/weekly-developer-reading.html
---

In a fast-changing dev landscape, it can be tough to keep up with the latest news. I gave up on constant refreshing of developer news sites/discussion forums a while ago in favor of reading a select few (weekly) digests by e-mail. It's important that they don't interrupt my daily tasks, but are there when it suits to do some reading.

- [Benedict's Newsletter](https://www.ben-evans.com/newsletter) - _"a weekly email newsletter about what's happening in tech that actually matters, and what it means. I pick out the news and ideas you don't want to miss in all the noise, and give them context and analysis. "_
- [Last Week in AWS](https://www.lastweekinaws.com/) - _"Posts about AWS come out over sixty times a day and the signal to noise ratio is abysmal. I filter through it all to find the hidden gems, the community contributions - the stuff worth reading!"_
- [JetBrains Blogs](https://blog.jetbrains.com/webstorm/) - Latest product features updates from JetBrains
- [Kent C Dodds Newsletter](https://kentcdodds.com/subscribe/) - Focused on Javascript/React/Testing and tooling
- [Node Weekly](https://nodeweekly.com/)
- [Database Weekly](https://dbweekly.com/)
- [React Status](https://react.statuscode.com/)
- [Best of JavaScript](https://weekly.bestofjs.org/) - not a curated newsletter, but something you can quickly scan for trending javascript libraries of the week

What are some newsletters/sources you use to keep up with developer news?
How to Highlight Cells with Hidden Formulas in Excel Office 365?
Tags: kutoolsexceltutorial, stepstohighlightcell, kutools
Published: 2020-10-08 08:05:29

---
title: How to Highlight Cells with Hidden Formulas in Excel Office 365?
published: true
date: 2020-10-08 03:48:33 UTC
tags: KutoolsExcelTutorial,StepstoHighlightCell,Kutools
canonical_url: https://geekexcel.com/how-to-highlight-cells-with-hidden-formulas-in-excel-office-365/
---

In this post, we are going to see how to **Highlight Cells with Hidden Formulas in Excel Office 365** using **Kutools.** Let’s jump into this article!! Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

**Note:** [kutools for Excel](https://geekexcel.com/get-kutools-for-ms-excel-2019-2016-2013-2010-2007-office-365/) has more than 180 features which are used to complete the difficult task with several clicks. If you want to use Kutools, you need to install it from Excel’s official website.
## Highlight Cells with Hidden Formula:

- First, you need to enable the **Design Tab. ** To do this, on the **Kutools Plus Tab, select** the **Worksheet Design** option.

![select the Worksheet Design option](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/EXCEL_cJkt0ALDpj.png)<figcaption id="caption-attachment-15195">select the Worksheet Design option</figcaption>

- Now, you can see the **Highlight Hidden** option in the **Protect** section.

![Highlight Hidden option](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Highlight-Hidden-option.png)<figcaption id="caption-attachment-15382">Highlight Hidden option</figcaption>

- Refer to the below example image, you can see the input range and the formula cells.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Example-13.png)<figcaption id="caption-attachment-15385">Example</figcaption>

- To **highlight the hidden formulas** in the whole workbook, you need to **click** the **Highlight Hidden** option under the **Design** Tab.

![Output](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Output-14.png)<figcaption id="caption-attachment-15384">Output</figcaption>

As you can see from the above screenshot, the hidden formulas have been highlighted using the **Highlight Hidden** option using **Kutools.**

## Verdict:

In the above article, you can easily understand the steps to **Highlight Cells with Hidden Formulas in Excel Office 365** using **Kutools.** Leave your **suggestions** in the below comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!

### Keep Reading:

- [Convert Between Roman Numerals and Numbers in Excel](https://geekexcel.com/convert-between-roman-numerals-and-numbers-in-excel-office-365/)
- [Reverse Order of Characters in a Cell with Functions in Excel](https://geekexcel.com/reverse-order-of-characters-in-a-cell-with-functions-in-excel-office-365/)
How to Freeze Panes Across Multiple Worksheets in Excel Office 365?
Tags: kutoolsexceltutorial, stepstofreezepanesac, kutools
Published: 2020-10-08 08:05:02

---
title: How to Freeze Panes Across Multiple Worksheets in Excel Office 365?
published: true
date: 2020-10-08 03:45:32 UTC
tags: KutoolsExcelTutorial,StepstoFreezePanesAc,Kutools
canonical_url: https://geekexcel.com/how-to-freeze-panes-across-multiple-worksheets-in-excel-office-365/
---

This article shows the steps to **Freeze Panes Across Multiple Worksheets in Excel Office 365** using **Kutools.** Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

**Note:** [kutools for Excel](https://geekexcel.com/get-kutools-for-ms-excel-2019-2016-2013-2010-2007-office-365/) has more than 180 features which are used to complete the difficult task with several clicks. If you want to use Kutools, you need to install it from Excel’s official website.
## Steps to Freeze Panes Across Multiple Worksheets:

If you want to freeze panes on multiple spreadsheets in the workbook, you need to follow the below steps.

- You need to enable the workbook in which you insert freeze panes.

![Example worksheets](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Example-worksheets.png)<figcaption id="caption-attachment-15391">Example worksheets</figcaption>

- Then, you need to select a cell that you want to freeze.
- Got to the **Kutools Plus Tab, select** the **Worksheet** option, **select Freeze panes multiple worksheets** option from the drop-down menu.

![Select Freeze panes multiple worksheets option](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Select-Freeze-panes-multiple-worksheets-option.png)<figcaption id="caption-attachment-15392">Select Freeze panes multiple worksheets option</figcaption>

- Now, you can see all the worksheets with frozen panes at the same cell location.

![Output](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/10/Freeze-Pane.png)<figcaption id="caption-attachment-15393">Output</figcaption>

### Note:

- If you want to unfreeze panes, you can click on the **Kutools Plus** Tab, **select** the **Worksheet** option, **choose** the **Unfreeze panes multiple worksheets.**

## Conclusion:

In this article, you can clearly learn the steps to **Freeze Panes Across Multiple Worksheets in Excel Office 365** using **Kutools.** Give your **suggestions** in the below comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!

### Keep Reading:

- [Extract Numbers From Mixed Text String in Excel](https://geekexcel.com/extract-numbers-from-mixed-text-string-with-function-in-excel-365/)
- [Highlight or Color All Unlocked Cells in Excel](https://geekexcel.com/highlight-color-all-unlocked-cells-with-one-click-in-excel-office-365/)
Finally, my first ever portfolio website!
Tags: devgrad2020, webdev
Published: 2020-10-08 03:37:39

Link to my dev portfolio: https://www.yewkangwei.com

On 28 Sep 2020, I challenged myself to build a developer portfolio website. I've been learning and making small projects, but never seriously craft something great.

As usual, I coded up to 11 hours per day. But this time, I went all-in for my portfolio. Within a week, I built 2 projects from scratch to showcase them on my site.

In a total of 10 days, my mission is finally accomplished. I covered everything, from design to documentation. I'm satisfied, but it's not the end.

My next goal is to get a remote job, ideally from Europe or NA. I will step out of my comfort zone and give it all. Wish me good luck!

See you in the next post. Have a wonderful day!
YouTube Video | Modern ES6 - Chapter 10 - Array Helper Methods - 2
Tags: youtube, webdev, showdev, javascript
Published: 2020-10-08 03:28:22

In Chapter 10, we are going to learn about Array Helper Methods - find, every, some and reduce.

{% youtube VXnlS3RHBfM %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Modern ES6 - Chapter 9 - Array Helper Methods - 1
Tags: webdev, showdev, javascript, youtube
Published: 2020-10-08 03:26:55

In Chapter 9, we are going to learn about Array Helper Methods - forEach, map and filter.

{% youtube Pa6M9JKe1Qs %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Modern ES6 - Chapter 8 - Classes in ES6
Tags: youtube, webdev, showdev, javascript
Published: 2020-10-08 03:25:25

In Chapter 8, we are going to learn about Classes in ES6.

{% youtube rO1z3WLex_4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Modern ES6 - Chapter 7 - Array & Object Destructuring
Tags: youtube, webdev, showdev, javascript
Published: 2020-10-08 03:24:05

In Chapter 7, we are going to learn about Array & Object Destructuring.

{% youtube 2wyGmiUNnG4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Modern ES6 - Chapter 6 - Template Literals
Tags: webdev, showdev, youtube, javascript
Published: 2020-10-08 03:22:20

In Chapter 6, we are going to learn about Template Literals.

{% youtube UmClYiPEavs %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
1st Hacktoberfest
Tags: hacktoberfest, webdev
Published: 2020-10-08 02:58:46

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

## What I learned so far!

In January I joined the ranks of Lambdalorians, and started the Full Stack Web Development Track at Lambda School.  Best decision I have made in some time.  For a Part Time student like myself the school takes over 1 year to go through 4 intense Units of Web Development, 2 Units of Computer Science, and then a few Units of Career and other team building projects.  As of this post I am about halfway through the Computer Science portion.  

Man have I learned a lot.  Front End, Back End, and now Python.  But thats not all this school teaches.  Nope.  At the end of July I also gained the title of Team Lead (TL). A unique position in the school where I get to go back through the core units but not as a student, or not just as a student, but as a Mentor to 6-10 students.  

It was through fellow TL's that I learned about Hacktoberfest.  Where I quickly decided that this was something I not only wanted to participate in as a Web Developer but as a maintainer.  Well those same TL's wanted to gather some good projects for Dev's of all levels and present them to fellow students to help them delve into the world of Open source.  So having 2 big projects that I have been working on in my github organization BeeDev Services I offered up the 4 repositories.  2 Front End React apps and their corresponding Backends.

But just passing on those links wasn't enough I soon learned.  I also needed to have a solid README.md file.  Having seen tons of these files from repositories that the school has us work in I did know that mine had to be good.

Hopefully I did a good job.  Here is a list of the ones that I added and welcome extra help on.
Front End = https://github.com/beedev-services/new-help-guide
Back End = https://github.com/beedev-services/help-guide-database-api

Front End = https://github.com/beedev-services/web-dev-journey
Back End = https://github.com/beedev-services/blog-api

I can't wait to see what others can contribute to these and what else I can contribute to others.  
Melissa
Showcase: Brand new GitHub Profile Stats
Tags: github, javascript, webdev
Published: 2020-10-08 02:39:52

Today, I have just completed a goal I've had since a month ago; reflect a GitHub Profile on a portfolio website while being customizable and reflective of everything you do.

![](https://cdn.discordapp.com/attachments/671781268299710469/763589665054785536/unknown.png)

This can get a graph of your contribution history, your last 7 actions, rankings and most used languages. As a bonus, it also automatically adjusts its sizing for mobile, making your profile presentable on the go.

Feel free to check it out here, over at https://nightyoshi370.github.io

Credits to myself, Samplasion, Evie11 and the devs over at Github-Calendar and GitHub Profile Stats.
Command Pattern
Tags: designpatterns, java, pattern, behavioral
Published: 2020-10-08 02:37:55

Encapsulate a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undoable operations.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6mq5v9p0x4378svuybmy.gif)

#Participants
* Command: declares an interface for executing an operation
* ConcreteCommand: defines a binding between a Receiver object and an action. Implements Execute by invoking the corresponding operation(s) on Receiver
* Client: creates a ConcreteCommand object and sets its receiver
* Invoker: asks the command to carry out the request
* Receiver: knows how to perform the operations associated with carrying out the request.

#Code#
```java
public class Main {

	public static void main(String[] args) {
		Receiver receiver = new Receiver();
		Command command = new ConcreteCommand(receiver);
		Invoker invoker = new Invoker();
		invoker.setCommand(command);
		invoker.executeCommand();
	}
}

public abstract class Command {

	protected Receiver receiver;

	public Command(Receiver receiver) {
		this.receiver = receiver;
	}

	public abstract void execute();
}

public class ConcreteCommand extends Command {

	public ConcreteCommand(Receiver receiver) {
		super(receiver);
	}

	@Override
	public void execute() {
		receiver.action();
	}
}

public class Receiver {

	public void action() {
		System.out.println("Called Receiver.action()");
	}
}

public class Invoker {

	private Command command;

	public void setCommand(Command command) {
		this.command = command;
	}

	public void executeCommand() {
		command.execute();
	}
}
```

#Output#
```
Called Receiver.action()
```

{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}