teleren/devto huggingface dataset:
How to run JavaScript in Visual Studio Code
Tags: javascript, vscode, devops, webdev
Published: 2021-09-25 07:06:34

VS code is a text editor made by Microsoft and it is an open-source project. It has extensions and other features for debugging your javascript, which we will talk about in this post.

Installing vs code is easy, just visit vs code's website and get the installer here: https://code.visualstudio.com/download

After you install vs code, you can create a new file (ctrl+n), name it something like "test". For this example we use test.js. You can also click on the folder icon and add the javascript there:

Are you Using VS code on your [laptop or pc?] (https://laptopsea.com)

Comment Below !

 ```javascript
var s = "html > < body > <!-- // --><!-- Placeholder for VS Code generated HTML / --> < script src = "app/app.js" ></ script > </ body > </ html>
";
alert(s);
```
 
After that's done, put "console.log('hello world')" in your javascript file! The console will pop up automatically when you click on the vs code's running tab. In the vs code window, you'll see something that says "Attach". Once you click on attach, a new vs code window will pop up and it will run your javascript file!

VS code also has extensions so you can debug your javascript better. Such as debugging multiple browsers at once or have a debugger tell vs code what to do when an exception is thrown. 

[To view, a list of some vs code extensions visit:](https://marketplace.visualstudio.com/items?itemName=ms-vscode.javascript)

## Creating a Web Server in VS Code

Now that's over with let's get into how to create a web server with vs code! You're going to want to drag and drop 2 files into vs code they are index.html and app.js. Open vs code's "settings" by right-clicking on the file name.

[Desktops](https://laptopsok.com/) :

Click on settings, then go to "ignored files" and add ".git":

Then you want to click on "open vs editor window here", so vs code knows how to run your program:

Now you can edit your index.html file! You can also see that vs code has already added some stuff for us since it opens automatically:(but we're not going to use this yet)


VS code will try to help you out with minimal errors by telling you that vs code has attached itself to your app.js file, it also tells you that vs code's [debugger is running](https://laptopsea.com) on port 9229.

To run vs code, click on the vs code running tab and click "F5" or hit "F5". To debug HTML files, go under [Tools](https://letsrideabike.com/)/HTML sub vs sub ctrl+p sub debug or hit F5 :

You can edit index.html, app.js, and any other files in there! Also if you want vs code to automatically open this folder after closing it just do:

Check out the [download facebook
](https://inflact.com/downloader/facebook/)

Right Click-> Open Folder Here [Laptops](https://laptopsok.com/)

The end! Enjoy javascript debugging with vs code!
I Design, You Build! - Frontend Challenge #1
Tags: webdev, beginners, javascript, idesignyoubuild
Published: 2021-09-25 07:03:59

## Challenge

Awesome **Gradient, 3D** Space design with different kind of *Design Flavor*. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:
- 🎯 Target : User can see the similar design
- 🎯 Target : Responsive design
- 🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation

Extra:
- 🌟 Extra : Background blur  `tips: backdrop-filter: blur();`
- 🌟 Extra : Animation, hover animation

Resources:
- 📃 Icon : https://icones.js.org/collection/all
- 📃 Hosting: https://vercel.com/ 

> ⚠ It will defeat the purpose of learning if you just copy and paste someone else's answer 😭!


***

## Start Coding! 

If you are ready to take on the challenge, then

0. Love 💖 this design on [Dribbble](https://dribbble.com/shots/15698554-Space-Landing-Page-Web-Design) and follow me!
1. Bookmark this post so that you can submit it easier.
2. **Right-click** [here](https://www.figma.com/file/hDcipE9zMuiDsYAkjcQuKw/Space?node-id=0%3A1) and open **Open link in a New Tab** to see the Figma Design.
3. Enjoy coding! 🤩
4. Come back to submit!

> All the **images** and **assets** are free to use, and can be exported from the Figma Design.

[![Zernonia Space Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akqho6affec7298p6hu7.png)](https://www.figma.com/file/hDcipE9zMuiDsYAkjcQuKw/Space?node-id=0%3A1)



***

## Submission

Once you've completed, come back to this post, and submit your solution using the following `template` in the comment section. You are encouraged to **comment** and **upvotes** other's answer!

Thank you!💘

```
Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

```

***

## Why?

I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (*ahem) to get their **Figma Design**🎨 file. 

You are free to use the Design you've created in your portfolio. No copyright claims or anything.

But if you are loving my work, you are most welcomed to follow me on `Dev.to` and [Twitter](https://twitter.com/zernonia) 😄

{% twitter 1441770639606439940 %}

### Thank you for your time and attention!
How To Set a Static IP Address in macOS Using Command Line
Published: 2021-09-25 07:02:05

---
title: How To Set a Static IP Address in macOS Using Command Line
published: true
description: Learn to set a static IP address to any network interface with the command line. 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Imagine you have an Apple device like a Macmini, MacBook, or an iMac in a remote location. You only have access to it via SSH and no Desktop GUI interaction is allowed.

What if you wanted to change the IP address of the device? For example, how do you assign a static IP address instead of DHCP?

Command line is your option in that case.

Let's see how to get it done...

##Make sure you are in the sudoers list

To make changes like network interface configurations, you need to be a user with super user privileges.

##Follow the below commands

First, get a list of all your network services.

```bash
networksetup -listallnetworkservices
```

That command will result in an output like below.

```bash
>networksetup -listallnetworkservices
An asterisk (*) denotes that a network service is disabled.
Apple USB Ethernet Adapter
USB 10/100/1000 LAN
Wi-Fi
Bluetooth PAN
Thunderbolt Bridge
```

Then use the desired service name in the following command:

```bash
networksetup -setmanual SERVICE IP SUBNET ROUTER
```

For example, to change the IP address of my Wi-Fi interface, I would use a command like this:

```bash
networksetup -setmanual Wi-Fi 192.168.1.2 255.255.255.0 192.168.1.1
```

In the above example, `192.168.1.2` is my new IP address. `192.168.1.1` is the address of the default gateway, which is the router most of the time.

###Setting it back to DHCP
To set it back to DHCP, use the following command:

```bash
networksetup -setdhcp SERVICE
```

###Keep DHCP with a manual IP

To keep DHCP services but only use a manually designated IP address, then use the following command:

```bash
networksetup -setmanualwithdhcprouter SERVICE IP
```

##Confirm settings are permanent
Restart the device `sudo shutdown -r now` and see if the new address persists.

If everything goes well, it should persist.
ES6 JS : Module in JavaScript
Tags: javascript, beginners, module
Published: 2021-09-25 06:51:56

<b>Part 3 : ES6 Modern JavaScript :  Module in JavaScript | Export Import Module in JavaScript </b>

Explained about
* what is module
* How to create Module
* How to Export function constructor  and functions 
* How to Import  function constructor  and functions 

{% youtube LVjqGv9yK5Q %}
The long and winding road
Tags: meadow, microcontroller, csharp, dotnet
Published: 2021-09-25 06:48:35

*Hi everyone, this is Bertha.*

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

*Bertha, meet everyone.*

She'd beep at you, but now I think about it, I haven't added any speakers or sound capability yet.
Bertha is a side-side-side project of mine.  You see, I have a dream of building autonomous sailing boats en-masse to do ocean research and protection.

## Say, what?

There is a significant amount in there to unravel. I first dreamed this up as the Sea Shepard organisation was jousting with Japanese whalers in the Pacific.  It seemed that there *must* be a more effective (both result and cost) way of doing this.

The cost of putting a single vessel to sea for the conservation group is monstrous.  And that's for one boat, that can only be in one place at a time, and has to take on significant risk.

So my idea of a small fleet (big would be better) of autonomous boats was born.

They could do all kinds of ocean research with a few sensors added and report in periodically.  They can be positioned as requested or be left to go where they decide based on factors like weather conditions, proximity to other vessels (including each other) and even just investigate things they find interesting.

The cost of these would be minimal compared to the existing fleet and have far more capability while they are at sea.

## How again does this help whales? 

Well, surely there is a sound or something they could produce to scare whales if they are in danger; imitate a pod of Orca's or something.  

But that's the least of my worries.  I had no idea how to have code interact with the physical world, nor did I understand autonomous drones.
Get Free Responsive Landing Page with Animations.
Tags: html, css, javascript, webdev
Published: 2021-09-25 06:14:34

## You can get the template from the link proivided in the description of the video.

### Technologies Used :-
+ HTML
+ CSS
+ JAVASCRIPT
+ JQUERY
+ SASS

### Libraries and Assets Used :- 
+ jQuery
+ Scroll Reveal
+ Unicons
+ Google Fonts

### Sections Given in Template :- 
+ Navbar
+ Hero Section
+ About Section
+ Services Section
+ Milestones Section
+ Clients Section
+ Footer

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube 4OgFQyRsy80 %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 61
Tags: php, javascript, webdev, tutorial
Published: 2021-09-25 05:24:04

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be Displaying the video
{% youtube Rqc49s9_vI4 %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Plug me in
Tags: elixir, phoenix, plug
Published: 2021-09-25 04:29:47

---
title: Plug me in
published: true
description: Adding custom headers to Phoenix framework requests
tags: elixir, phoenix, plug
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v21dp9zcxwmjesegfskl.jpg
---

Plug is a great tool. It brings a great way to extend, in a clear and encapsulated way, behaviors and state changes to controller flow.

For example, we can do a plug to set a custom header in a router pipe for Phoenix.

To do so we Crete a plug module


```elixir
defmodule MyApp.CustomHeadersPlug do
  import Plug.Conn

  def init(opts), do: opts

  def call(conn) do
    conn
    |> put_resp_header("Custom-Header", "value")
  end
End
```

Then we can implement in the router:

```elixir
  pipeline :web do
    plug MyApp.CustomHeadersPlug
    ...
  end
```

And that's it. Any request going through this pipeline will have in it's response `x-custom-header: value`.
How to launch a GUI application using PySimpleGUI with a double-click on a mac
Tags: pysimplegui, python, mac, gui
Published: 2021-09-25 04:08:55

On mac, by creating a `.sh` file in the form of `.command`, you can execute that shell script file by double-clicking it.

Using this mechanism, I tried to launch a GUI application using PySimpleGUI by double-clicking the file.

## About the PySimple GUI application to run
Create a simple PySimpleGUI application that displays a list of theme colors provided by PySimpleGUI.

Save this code as `display-theme.py`.

```python
import PySimpleGUI as sg
sg.theme_previewer()
```

When you run this code, you will see a screen like this.

![Displays a list of theme colors provided by PySimpleGUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dth1o4ez4msop6oxvqwy.png)

## Create a .command file
Let's actually create a `.command` file.

Create the `.command` file directly like this.

```sh
vim display-theme.command
```

Or, you can create a `.sh` file, write your code in it, and then change it to `.command`.

```sh
mv display-theme.sh display-theme.command
```

### Contents of the shell script

```sh
# Chnage current dir
cd `dirname $0`

# Run python script
python display-theme.py
echo $?

# Close the terminal by pressing any key
read a
```

When the `.command` file is executed, the current directory is set to `root`, so this command will take you to the location where the file exists.

```sh
cd `dirname $0`
```

This code is written as a confirmation. It just prints out an `echo` to see if the execution is completed successfully.

```sh
echo $?
```

By including this description, the terminal will be closed by pressing any of the keys.
If this is not included, the terminal will close instantly, so it is also add to make sure that it was executed.

```sh
read a
```

### File permission
Once you have created the shell script, give it execution permissions like this.

```sh
chmod u+x display-theme.command
```

## Double-click

At this point, your file directory should look like this.

```sh
.
├── display-theme.command
└── display-theme.py
```

You can then double-click this `.command` file directly from the Finder to launch the GUI application with the theme color list.

This sample code is also available on GitHub.

[shinshin86/pysimplegui-mac-app-sample(GitHub)](https://github.com/shinshin86/pysimplegui-mac-app-sample)
Adding @antv/g6 To Streamlit Custom Component
Tags: streamlit, g6
Published: 2021-09-25 03:57:02

### Steps To Implement

- You need to already create the vite vanilla JS custom component in [part 2 or this series](https://dev.to/aisone/streamlit-custom-components-vite-vanilla-js-40hl)
- From the `template` folder 
- Add the @antv/g9 library
```
cd vite_vanilla_component/frontend
npm i @antv/g6
```
- insert the code below just after `import { Streamlit } from 'streamlit-component-lib'` on or near the top of the `main.js` file
```js
import G6 from '@antv/g6';

const gdata = {
  nodes: [
    { id: 'node1', x: 50, y: 350, label: 'A', },
    { id: 'node2', x: 250, y: 150, label: 'B', },
    { id: 'node3', x: 450, y: 350, label: 'C', },
  ],
  edges: [],
};

for (let i = 0; i < 10; i++) {
  gdata.edges.push({ source: 'node1', target: 'node2', label: `${i}th edge of A-B`, });
}
for (let i = 0; i < 5; i++) {
  gdata.edges.push({ source: 'node2', target: 'node3', label: `${i}th edge of B-C`, });
}

const container = document.body.appendChild(document.createElement("div"))
container.setAttribute('id', 'container');
G6.Util.processParallelEdges(gdata.edges);

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
console.log(width, height)
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
  // the edges are linked to the center of source and target ndoes
  linkCenter: true,
  defaultNode: {
    type: 'circle',
    size: [40],
    color: '#5B8FF9',
    style: { fill: '#9EC9FF', lineWidth: 3, },
    labelCfg: {
      style: { fill: '#000', fontSize: 14, },
    },
  },
  defaultEdge: {
    type: 'quadratic',
    labelCfg: { autoRotate: true, },
  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  nodeStateStyles: {
    hover: { fillOpacity: 0.8, },
    selected: { lineWidth: 5, },
  },
});
graph.data(gdata);
graph.render();
```

### Running

The steps to run are the same as in previous <a href="https://dev.to/aisone/streamlit-custom-components-vite-vanilla-js-40hl#running" target="_blank">article</a> (right click and open new tab).

You should see the following when navigating to the component url:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwwfsdjapzfmsm9w8z64.png)

---

### Further Improvements

The following are improvements that can be done once the code is added:

- Allow end-user to pass in g6 config, nodes and edges from python code
- Add graph event listeners to record last clicked node
- Modify the button to send last clicked node information back
Experience on Contributing to a Github Project
Tags: opensource, python
Published: 2021-09-25 03:51:22

This week is mainly about how to contribute to other's project on Github. Also, as a project maintainer, how to maintain your project properly. 

To make a contribution another project, first of all, I need to fork the project repository and clone the fork to my local machine. I need to make sure it is the origin remote and create a new branch for this project. Then start to navigate the code and try to understand the logic of the code. I will make changes to this project in my local repository. After all these steps above is completed, the next step is to commit my changes. Using `git push origin BRANCH_NAME` to push my changes to this "BRANCH_NAME" of the "origin". Last but not least, I can create a pull request and the start to communicate with the project maintainer.

In this week, I brought up an [issue](https://github.com/roman-rezinkin/RomanStaticSG/issues/11) to [RomanStaticSG](https://github.com/roman-rezinkin/RomanStaticSG), and created a [pull request](https://github.com/roman-rezinkin/RomanStaticSG/pull/17) for this issue.

The feature I added for this project is the support of heading level one parsing of markdown file. During this whole process, I practiced more on the Github issue, and Github pull request from the point of view of both the project maintainer and a project contributor.


No matter which role I am playing at, the communication between both sides is pretty important. For next contribution, I think I would focus a little bit more on the communication side. A good communication would help a lot on boosting the team work efficiency during software development.
OSD600 - Week3 Lab2
Tags: open
Published: 2021-09-25 03:47:43

- Jia Hua Zou's repo: <a href="https://github.com/JiaHua-Zou/Jia_SSG">https://github.com/JiaHua-Zou/Jia_SSG</a>
- My repo: <a href="https://github.com/juuuuuuun/jun-ssg">https://github.com/juuuuuuun/jun-ssg</a>

#Overview
This Lab2 was a small, but not very challenging but rewarding practice to update the SSG of the existing Release0.1, which converted .txt files to .html, and to add the ability to convert the .md extension of the markdown file to .html as well.

#Meet new collaborator
In the case of this lab, it was a unique project to update the code of a collaborating student instead of updating your own code, so this lab also requested a partner to collaborate with. Couldn't work with Alex. Because both me and her wanted to collaborate with other students. So I asked Slack to collaborate with another student, and fortunately I was able to meet Jia Hua as a new collaborator. He speaks the same language, JavaScript, is very playful and very quickly puts a pull request on my code.

#Processing
After I decided to collaborate with Jia Hua, I immediately cloned his repo and left an issue to let other students know that I became a collaborator of that collaborator. As a result of analyzing his code, I was lucky that many parts were similar to mine, so if the input file for this lab is a markdown file, the function to convert the tag elements used in markdown into tags for html is easy. could add. So, he added a function and conditional statement to replace ```### in his markdown file readme.md with <h#>...</h#> and  ` with <xmp>...</xmp>``` . <a href="https://github.com/JiaHua-Zou/Jia_SSG/pull/14/files">changed part</a>. We also chatted about code and pull requests through Slack. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07tyry6meot2hy2ia4dc.png)While writing the code, Jia Hua first completed updating the ssg of my repo and made a pull request. After confirming that the code was okay, I immediately completed the merge. Then I also completed a pull request after updating his code.

#Issue
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npr3953r4a1rjozo4sdp.png)I ran into a problem while collaborating with Jia Hua. That is, when the pull request was made, his repo was rejected because he did not have permission. This part made me quite puzzled and immediately started looking for the problem. The problem was solved when he added me as a collaborator, but the absurdly real solution is that I accidentally skipped the fork part. This part taught me that everything should always be done carefully and step by step, and I will not skip the fork part in the future.

#As a result...
In conclusion, Lab2 was the second collaboration for me, and it was a very valuable time to let me know that collaboration through pull request is easy without forgetting fork. We thank the professor for providing such an excellent lab and look forward to future releases and labs.
(o^∀^o)