teleren/devto huggingface dataset:
I wrote a fully-functioning File Explorer, using TypeScript.
Tags: typescript, showdev, node, xplorer
Published: 2021-09-25 13:23:10

I am very happy to introduce [Xplorer](https://xplorer.vercel.app) to help you organize your files and/or folders.
![Xplorer win](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecv6gk12ld5lij18gmeu.png)

## Features
### Designed Out Of The Box
Xplorer is not written on traditional language like C, C++ or C#. It is written on TypeScript, HTML and SCSS, using the Electron framework, this makes Xplorer looks much more modern, and it will support theme customization in the future release. There are four available default themes for now.

### Cross Platform
As I mentioned, Xplorer is powered by the web because it's written with the Electron framework, this makes it possible to run Xplorer from any platform.

| Windows | Garuda Linux | macOS Catalina |
| ---- | ---- | ---- |
| ![Xplorer win](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecv6gk12ld5lij18gmeu.png) | ![Xplorer linux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtr9o9gk7qfkc2j3trg1.png) | ![Xplorer mac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g18nvk0d62zglblxcqgi.png) |

### File Preview
![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xogjs2c7y4ll6pnw656.png)
 
I know it's quite annoying to open a file and close to search for the correct file users are searching for. Hence, I've implemented this native file preview feature, see available file types to preview [here](https://xplorer.vercel.app/docs/guides/operation/#preview-file)

### Supports Multiple Tabs
![support-tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8md5rb848ii9g3u9o4n2.png)
 
Xplorer helps you organize your files easier by supporting multiple tabs :)

and many others more


## Installation
You can reach the installer on [GitHub release section](https://xplorer.vercel.app)

## About
Xplorer is a File Explorer built on TypeScript, focused on modernization and customization. It will support extension just like VSCode does. (thought by the time I write this documentation, the feature to user to auto generate their theme is not done yet, but it will be ASAP).

Contributors in need. 

### Links
GitHub link: https://github.com/kimlimjustin/xplorer
Documentation site: https://xplorer.vercel.app

### Why it was built using TypeScript?
* Typed Secured
* TypeScript/JavaScript has became the most used language.
* TypeScript has a very strong community.
* Can be run in various OSes.
* You can easily write plugin using TypeScript/JavaScript
* Modern layouts can be built using the HTML and CSS via Electron.
* I'm bad at C/C++ xD

Any comments will be appreciated :) Thanks

## Happy coding! 🎉
Primitive Types
Tags: java, beginners
Published: 2021-09-25 13:05:00

What are primitive types? This is my first study into java course. Let's figure it out.

--------

![primitive types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lcy7bq0wdkxeg4honly.png)
*This image is from https://getkt.com/blog/reintroduction-to-java-data-types/, visit the site to get complete content.*
 

---------



{% embed https://replit.com/@thiagocolen/Java-Programming-Masterclass-1-Primitive-Types %}
TIL: How to set security headers for Gatsby Develop
Tags: gatsby, javascript, react, security
Published: 2021-09-25 12:28:25

---
title: 'TIL: How to set security headers for Gatsby Develop'
published: true
description: If, for any reason, you need to run gatsby develop and set security headers. Using advanced proxying is the way to go.
tags: #gatsby #javascript #react #security
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htnpo2hen36g5zmyvbhf.jpg
canonical_url: https://khendrikse.netlify.app/blog/set-your-gatsby-develop-security-headers
---

Photo by [Henry & Co](https://unsplash.com/@hngstrm) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

There might come a time that you want to run your [Gatsby](https://www.gatsbyjs.com/) app with security headers in development. To do this, you can utilize advanced proxying. Gatsby has a way to expose the [Express.js](https://expressjs.com/) development server it uses to run the app whenever you use `gatsby develop`. This way you can add Express middleware.

## TL;DR

If you just want to get your solution, feel free to use this setup inside your `gatsby-config.js` to set any security header you want. This example shows how you could set the `X-Frame-Options` HTTP response header to DENY.

```js
// gatsby-config.js

module.exports = {
  developMiddleware: app => {
     app.use((req, res, next) => {
      res.set('X-Frame-Options', 'DENY');
      next();
    });
  },
}
```

## Let's break it down

First we make sure we actually have a `gatsby-config.js` file. This file should be in the root of your Gatsby project and it can contain a bunch of different information. If you want to know more about this file, check out [Gatsby's own docs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/).

```js
// gatsby-config.js

module.exports = {
  // an empty config file!
}
```

### Using developMiddleware

To expose Express.js we use the configuration key called `developMiddleware`. We pass it a function that takes a parameter called `app`. We can use that to [add middleware](https://expressjs.com/en/guide/using-middleware.html) to Express.js.

We use `app.use()` and pass it a function that takes `req, res, next` parameters. Inside the function we set our security header on the `res` (response) object. After this, we call the next function that we got as a parameter.

```js
// gatsby-config.js

module.exports = {
  developMiddleware: app => {
     app.use((req, res, next) => {
      res.set('X-Frame-Options', 'DENY');
      next();
    });
  },
}
```

Done! You should now be able to run `gatsby develop` and see the proper security headers on the documents that it serves you. Make sure to restart your server if you already had it running though, otherwise the changes won't come through.

Originally posted [on my website](https://khendrikse.github.io/post/2021-09-25-set-your-gatsby-develop-security-headers)
[2022] Use Window & Mac OS in one PC
Tags: webdev, javascript, beginners, swift
Published: 2021-09-25 12:06:55

[Parallels](https://prf.hn/l/7aNZEYa) is a global leader in cross-platform solutions that make it simple for businesses and individuals to use and access the applications and files they need on any device or operating system.

[Parallels](https://prf.hn/l/7aNZEYa) helps customers leverage the best technology out there, whether it’s Windows, Mac, iOS, Android or the cloud. 

[Parallels](https://prf.hn/l/7aNZEYa) solves complex engineering and user-experience problems by making it simple and cost-effective for businesses and individual customers to use applications anywhere, anytime. 

[Parallels](https://prf.hn/l/7aNZEYa), a business unit of Corel, has offices in North America, Europe, Australia and Asia. Visit parallels.com/about for more information.

#Grab the offers👉- [Dev Offers](https://prf.hn/l/7aNZEYa)
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2021-09-25 12:00:10

---
title: "A Nice Developer Joke For Today"
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/5e1258e619778.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:___ A SQL query goes into a bar, walks up to two tables and asks:

___A:___ Can I JOIN you?
 -->
Array of Objects-Part 1
Tags: javascript
Published: 2021-09-25 11:50:00

Very much like a normal array, but it’s like inception **[ {object inside object(array) } ]**

####You may wonder , what is an array?####
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8nh427twbi2utcg5fpp.jpeg)

An array is a data structure which can store multiple items and that item can be accessed by using the index number!

Let’s start with creating an array!


 Now that we know the syntax of creating a new array , let’s try creating a javascript object ,which is also called JSON.

Javascript Object notation is used to represent the data in a structured format based on Javascript object syntax.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07v6497totozye2aqe75.jpeg)


Now that we know how to create JSON and access its data, Next step would be to implement this idea where we combine arrays and json together!

Let’s modify the array and re-write it with  json objects inside it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n65bxbqt5o1skkyp9fam.jpeg)
Here there are 5 objects inside the array. If we want to access the object containing Java, we use the index number 1 as we use in an array. Next we have stored the whole object inside a variable object. Moving on, to access the value from the key “ Java” , the syntax is given on line 9. To access the key of an object, we can use the inbuilt method as shown in line 13.
Ruby chip cookie: Loading and Requiring
Tags: ruby
Published: 2021-09-25 11:15:33

I was reading about namespaces in Ruby the other day and came across an interesting point where it compared `require` and `load` . 

Since I started writing Ruby, I did not though about the secrets behind the usage of `require` when other languages use `load`.

Let's suppose we have a file called `weather_forecast.rb` , that just has some functionality in it for returning weather forecasting information.
In order to execute it in our code, we could do something like `load('weather_forecast.rb')`. 

Everything looks good up to this point. We load the code, use it in our program, and move on with our lives. 

However, the constants that the file defined, are not removed once the file has loaded, and can pollute our program. 

To solve this problem, we could load the file as such `load('weather_forecast.rb', true)`. The `true` argument, loads the file wrapping it around an anonymous namespace containing all constants that will be destroyed after the code is loaded.

On the other hand, we find `require`. It also loads code, but rather than loading it for execution, as `load` does, it imports the library avoiding those leftover class names. 

As an additional fact, `require` tries only once to load the file, while `load` does it every time the file is executed.
Journey to Code - JavaScript
Tags: javascript, beginners, programming
Published: 2021-09-25 10:45:23

Hello and Welcome to **Journey to Code - JavaScript** 😊!

##🔎 What's JTC and what it is for?
**J**TC or Journey to Code - JTC is a series of articles about JavaScript-related topics that will help you learn JavaScript from beginner level to intermediate.

**T**he reason I started Journey to Code was that I wanted to learn and engage with the community and people while learning something specific. 

## 🤔 How learning together benefits you?
[Statistics](https://digest.bps.org.uk/2018/05/04/learning-by-teaching-others-is-extremely-effective-a-new-study-tested-a-key-reason-why/) show that “learning-by-teaching” is extremely effective, the “learning-by-teaching” technique has been demonstrated in [many studies](https://www.sciencedirect.com/science/article/pii/S0361476X13000209). 

Students who spend time teaching what they’ve learned go on to show better understanding and knowledge retention than students who simply spend that time re-studying.

**T**o keep it short, learning something often increases the chances that you will remember what you've learned and overall boosts your motivation to learn more and improve yourself!

## 🤗 Information about Journey to Code

**I**n this section, I will tell you more about what to expect from JTC and give you more information about what it is. Journey to Code is intended for anyone, from absolute beginners who are new to JavaScript to Experts that's been in this field for a long time. 

**The Schedule**
**E**very **Monday** I will post an article about JavaScript and it will cover from basic ones to incredibly advanced ones. Stay tuned!

**How will this work?**
**W**e will learn by reading through the article and in the end practicing what we've learned with some resources I will provide 😉.
**I**f you want to engage further into JTC, you can join our upcoming community server and engage with other aspiring developers like yourself 😀!

##Thanks for reading and I wish you have a good day and enjoy the rest of the weekend!
Responsive Restaurant Design with HTML, CSS, JavaScript 👨‍💻
Tags: webdev, tutorial, webdesign, css
Published: 2021-09-25 10:42:45

{% youtube mUBW8i2kht0 %}

Responsive Restaurant Design with HTML, CSS, JavaScript 

Complete Responsive and mobile friendly 📲 Navbar and Hero section Design with HTML and CSS

In this video you will learn to make a responsive restaurant header Using HTML and CSS step by Step. We will learn about media query CSS to make a responsive web design.
How to make responsive website design Using HTML and CSS Step By Step

⌛️ | **Are you interested in a certain section? Use Timestamps**
  →  0:00 Demo
  →  0:57 File structure
  →  1:08 Header section
  →  18:40 Hero section
  →  26:50 Completed demo

📥 | **Get all images that i used**
  →  https://bit.ly/3kD0FId (.zip)

🅰️ | **Get the font I used**
  →  PT Sans Narrow : https://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,700
  →  Open Sans : https://fonts.googleapis.com/cssfamily=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic

❤️ | **Interested in seeing more videos? <mark>SUBSCRIBE NOW</mark>**
  →  https://bit.ly/3m4UgF5

🎵 | **Music**
  →  FLK [Instrumental] by KC5 is licensed under a Creative Commons License.
        https://creativecommons.org/licenses/...
        Support by RFM - NCM: https://bit.ly/2xGHypM

👤 | **Like - Follow & Subscribe Me**
  →  Twitter : https://twitter.com/codewithsadee
  →  Github : https://github.com/codewithsadee
  →  YouTube : https://bit.ly/3m4UgF5
  →  Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Sample PHP Application deploy using AWS CodePipeline, Elastic Beanstalk & Github
Tags: aws, github, php
Published: 2021-09-25 09:21:00

First of all, we want to create sample PHP Application and push this application to Github. If you want you can use following sample repository.
https://github.com/sanju2/cicd_app

After that go to AWS Management Console and Search Elastic Beanstalk and Create PHP Application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw5z6umob6a26s6cl3pz.PNG)

Give the Application name and Add Application tags. After that select platform as PHP and platform version. Finally, the Application Code selects as a Sample Application. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ot8xvxx3a7bg4clmto.PNG)

After that, you can see Elastic Beanstalk environment status is OK.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ma3q75esoseynepboaw.PNG)

Go to URL and view the sample application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d539thzu2z9e3x5ki1qs.PNG)

Go to AWS management console and search CodePipeline and create pipeline.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc48eb38vtxxtrae7hvi.PNG)

Adding details for following fields and click Next.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ditn0m4ft0x2mbkcipkr.PNG)

Next to adding the source stage as Github and connect to Github. After that select your repository and Branch.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg2thc1l6o3hgexfkvem.PNG)

Next, go to the deploy stage and select Elastic Beanstalk as a deploy provider, and select Application Name and Environment Name.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0w4fy1kcu2mf6zbhqsf.PNG)

After that, you can see the source and deploy succeeded.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qblgocqcdsdz2khnim35.PNG)

Go to Elastic Beanstalk and click URL. After that, you can see your application deployed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3t3hoinehu8dvasswve.PNG)

Change code as V1 and push to Github. After that, you can see your code pipeline triggers the changes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vl3ohiv1mntnev3455a.PNG)

After that refresh, the previous URL and you can see the latest changes appear here.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbjutcghi5exr8qnians.PNG)

Thanks for reading the Article.
Have you tried functional programming?
Tags: watercooler, programming, haskell, rust
Published: 2021-09-25 08:12:04

---
title: Have you tried functional programming?
published: true
description: 
tags: watercooler, programming, haskell, rust
cover_image: https://www.qulix.com/wp-content/uploads/2020/01/post36-Recovered-04.png
---

[Functional programming](https://en.wikipedia.org/wiki/Functional_programming) is a programming paradigm where programs are constructed by applying and composing functions.

Some of the most popular programming languages include [Haskell](https://www.haskell.org/), [Clojure](https://clojure.org/), [Scala](https://www.scala-lang.org/), [Erlang](https://www.erlang.org/), [F#](https://fsharp.org/), [Rust](https://www.rust-lang.org/), etc.

Have you ever tried Functional programming?
Do you prefer it over Procedural or OOP paradigms?
What are some practical examples you have built with it?
ODD-EVEN Number using Recursion in JS 🚀
Tags: webdev, javascript, beginners
Published: 2021-09-25 05:54:10

 Hello Guys, Today is this article we are taking about Recursion. 
 We are solving and understanding a problem by using Recursion in JavaScript.
 
👉 Problem :- Find odd-even number using Recursion ? 

  Let's start today's article... 

• What is recursion? 
=> Recursion mean calling itself till condition not true. A function call itself that's function called Recursive function. 

• How to find odd even number in JavaScript? 
=> We are finding odd-even number by dividing 2. When the reminder is 0 it's mean the number is even or reminder is 1, it is odd number. Right... 

 We are using same logic in today's solving problem using recursion but different. 

👉 Let's start solving problems

• First we create a function and pass one parameter. As following 👇

![img1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmci707lxv50i6tn23n8.jpg)

• We are using same logic as we use always to find odd even number but in this problem we are consider if the parameter's value is 0 it is even or if it's value is 1 it means number is odd. 

• See following code to better understand, we are using if-else condition. 👇
![img2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir7tmt0r97la5xcfq0d7.jpg)

• Now time to use recursion function but before using recursion we simply decrease parameter 'num' value by 2.
Because odd and even number difference is 2 for example 1 and 3 difference is 2 and also 2 and 4 difference is 2. See below 👇
![img3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33q7fenkp7afg02f32mh.jpg)

• In the above code, in a line number 14 we are calling a function that's mean it will call itself till when given condition not true. 

• Let's check the output 👇
![img4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thaycqa2egdrbxi8qezm.jpg)


🙏 Thanks for reading...
👉 Stay with us for more....
What calendar app do you use?
Tags: watercooler, productivity, calendar
Published: 2021-09-25 07:37:29

---
title: What calendar app do you use?
published: true
description: 
tags: watercooler, productivity, calendar
cover_image: https://mk0timetackleqyw86oi.kinstacdn.com/wp-content/uploads/2020/10/Settings.png
---
During our busy dev schedules a well-configured calendar app is essential tool as it helps you to organize your daily workflow, set reminders on approaching events and so on.

I've been using [Google Calendar](https://calendar.google.com/) for a long time and recently added the [Checker Plus](https://chrome.google.com/webstore/detail/checker-plus-for-google-c/hkhggnncdpfibdhinjiegagmopldibha) extension so I have access to it from my browser bar.

What calendar app do you use and what are your favorite features about it? Any productivity tips you would recommend?
Implicit Explicit and....?
Tags: javascript, webdev, node, typescript
Published: 2021-09-25 07:26:28

Hello, today i was reading about this, you ask what I say this is a keyword in JavaScript which refers to ......? 

Well `this` is a question we will try to answer today.

### Code 1 - Implicit binding 

```js

this.name = 'Global Name';

const person = {
  name: 'James Bond',
  profession: 'Agent',
  id: '007'
  hi: function() { 
    return this.name   
  } 
} 

person.hi() // 'James Bond'

```

Well, clearly this refers to its immediate object.

Now lets change this a little bit

```js

this.name = 'Global Name';

const person = {
  name: 'James Bond',
  profession: 'Agent',
  id: '007'
  hi: () => { 
    return this.name   
  } 
} 

person.hi() // 'Global Name'

```
If you see clearly I have changed `hi` key's value to an arrow function and arrow functions changes the reference `this` to global object. But why ? can you answer in comments ?

### Code 2 - Explicit binding 

```js

this.name = 'Global Name';

const person = {
  name: 'James Bond',
  profession: 'Agent',
  id: '007'
  hi: function() { 
    return this.name   
  }.bind(window) 
} 

person.hi() // 'Global Name'

```
In here `this` will refer to global object since we have bind it to window object which is the global object. 

Thank you
PascalCase
Tags: programming
Published: 2021-09-25 07:12:02

### PascalCase

**PascalCase** is a *naming convention* in which the first letter of each word in a compound word is *capitalized*. Software Developer often use PascalCase when writing source code to name functions, classes, etc...

**PascalCase** is similar to **camelCase**, except the first letter in PascalCase is always capitalized. Below are some examples.

PascalCase:

```
NewObject;
NewFunction();
```

CamelCase:
```
newObject;
newFunction();
```