teleren/devto huggingface dataset:
Slide, a Go web framework for developers coming from Express.
Tags: go, express
Published: 2020-08-09 14:32:02

---
title: Slide, a Go web framework for developers coming from Express.
published: true
description: 
tags: 
cover_image: https://blog.golang.org/go-brand/Go-BB_cover.jpg
---
[Slide](https://github.com/go-slide/slide) is one of the fastest frameworks, built on top of fasthttp. People coming from express will feel at home.

## Motivation
While playing around with the Go’s net/http, one thing that we missed most was the lack of middleware support and the problems it solves. After a little reading, we decided to write our own web framework which would solve the issues like middleware support with next, handle a wide range of files, Upload, Download, etc.

### :rocket:  Example

```go
package main

import (
	"log"
	"github.com/go-slide/slide"
	"github.com/go-playground/validator/v10"
)

func main() {
    validate := validator.New()
	config := slide.Config{
		Validator: validate,
	}
    app := slide.InitServer(&config)
    app.Get("/", func(ctx *slide.Ctx) error {
        return ctx.Send(http.StatusOK, "Hello, World")
    })
    log.Fatal(app.Listen("localhost:4321"))
}
```
## Features
Slide supports Middleware with Next function

### Express

```js
var express = require('express')
var app = express()

app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

```
### Slide

```go
app := slide.InitServer(&config)

## Application level
// you can multiple middlewares also
app.Use(func(ctx *slide.Ctx) error {
    fmt.Println("this will run for all URL(s)")
    return ctx.Next()
})
```

## Nested (Grouped) Routes

### Express
```js
var express = require('express')
var router = express.Router()
var auth = require('./auth')

router.use('/auth', auth)

// auth.js
var express = require('express')
var router = express.Router()

// GET /auth/login
router.get('/login', function (req, res, next) {
  res.send('this is the index auth/login')
});

module.exports = router
```

### Slide
```go
auth := app.Group("/auth")
auth.Use(func(ctx *slide.Ctx) error {
    fmt.Println("this will run for all /auth URL(s)")
    return ctx.Next()
})
auth.Get("/login", func(ctx *slide.Ctx) error {
    return ctx.Send(http.StatusOK, "Hello, World")
})
```

## Files
Slide supports wide range of helpers for file
```go
// serve dir
app.ServerDir("/static", "static")

// single file
app.ServeFile("/js", "static/login.js")

// Downloading file
app.Get("/download", func(ctx *slide.Ctx) error {
	return ctx.SendAttachment("static/login.js", "login.js")
})

// uploading file
app.Post("/upload", func(ctx *slide.Ctx) error {
	return ctx.UploadFile("static/login.js", "login.js")
})

// serve single from route
app.Get("/servefile", func(ctx *slide.Ctx) error {
   return ctx.ServeFile("static/index.html")
})

```

We would love to hear feedback from you. Thank you for reading.
Finish What You Start
Tags: csharp, unity3d, codenewbie
Published: 2020-08-09 14:23:57

##I am learning to love the feeling of finishing my work

I always struggled with seeing things through growing up; a bad habit that followed me into adulthood. I have started any number of projects (big and small) in my life that I've never finished. My favorite example is a project car I bought in 2012 that I never really got on the road and eventually gave away by the time I moved to Georgia this year (2020).

We start a lot of things in life and the last thing we want is for the only thing we finish to be the life itself. At least it's the last thing *I* want for myself.

This is partly why jumping into game design is scary for me: I'm clever and accomplished enough that if I fail at design/development it will 100% be because I chose not to finish what I started here. Being responsible for your own success is alluring. Being responsible for your own defeat is terrifying. But it's a dichotomy I'm tired of running away from. Design is not going to be my next project car.

##Which brings me to this

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

I comprehend (the thesis of my last post) this code, but most importantly I completed the game that it was written for. It was a crappy platformer featuring a dragon that jumps and shoots fire, but it's complete and exists and I'm proud of myself for that.

What I enjoyed most about that project was how my comprehension of the details and the hard work allowed me a minimal amount of freedom to add my own details and make some of my own decisions. Instead of the fireball sprite Jason Weimann found online and used, I found an image and *made* my own sprites. Jason's dragon shoots fireballs, mine shoots lightning bolts. Jason's dragon shoots every time it jumps, mine jumps and shoots independently.
Jason's music track is fun and light, mine is dense battlemusic with beating drums and great crescendos that's far heavier than the cute graphics and high-pitched jumping sound effects would suggest.
I made decisions that made my game more mine than someone else's, and I finished the project after nearly 8 hours of work on it. (Not all at once).

What feels best about this experience is that I feel ready to take on the next one. I just have to figure out what that next one will be. For now, I will be working through a 3 part series on C# and .NET that I found on Udemy a while back. I really want to take advantage of the comprehension I've developed for coding and delve into the gritty details of programming before moving forward again.
#30DaysOfCJS: How To Be a Web AV Artist
Tags: community, webmidi, audio, datavisulization
Published: 2020-08-09 14:17:45

---
title: #30DaysOfCJS: How To Be a Web AV Artist
published: true
description: #30DaysOfCJS Day 8, How To Be a Web AV Artist
tags: community, webmidi, audio, datavisulization
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dkufsb9otdt2zvegbout.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 8 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**How To Be a Web AV Artist // Ruth John // CascadiaJS 2018**



If you'd like to watch the talk, here is the Youtube link.
{% youtube Dt4I-96C-pg%}

Further readings:
- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
- [Advance Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques)
- [Web audio spatialization basics](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)
- [Using IIR filters](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters#IIR_versus_biquad_filters)
Side Project Journal: An Inspirational Quote API
Tags: graphql, project, api, quotes
Published: 2020-08-09 12:46:28

---
title: Side Project Journal: An Inspirational Quote API
published: true
description: A brief reflection on why I built Spark, an inspirational quote API with GraphQL
tags: graphql, project, api, quotes
//cover_image: https://direct_url_to_image.jpg
---
TL;DR - Spark is a dead-simple GraphQL API of inspirational quotes meant to inspire and move end-users. 

Check it out here: [https://github.com/SaalikLok/Spark-API](https://github.com/SaalikLok/Spark-API)

In some of my projects, I've thought about using a quote API to get inspirational quotes and include them in loading screens, etc. When I couldn't find an API that did exactly what I wanted, I realized that I'd be better off making my own!

Spark is a project that I've started, stopped, and restarted with a new set of tools and motivation several times. I tried with Express and MongoDB, which ended very early. I finished a version of Flask and a MySQL database, running locally, but it was a pain to push to production and felt like overkill.

I'm happy that this time, I was able to create a static version of this with GraphQL, without the need for the database or any fanciness. And it's great that the API gets all the perks of using an awesome technology like GraphQL.

As I'm deepening my full stack React knowledge, GraphQL is a critically important tool in the ecosystem. I realized that building a simple static API for quotes would be a great entry point to this.

It's hosted using the Heroku free account (for now) but we'll see if there's some interest and usage!

If people (or myself) start using the API more regularly, I'll add more quotes to it and ultimately throw a bit of money at Heroku to make it more performable.

If you're a developer, I'd love to hear your thoughts and any feedback you have on the project. 

There are a few more fun things in store on the horizon, which I'm super excited to share soon.

_This was originally posted on my blog: https://blog.saaliklok.com/_
Help me improve the homepage
Tags: discuss, help, ux
Published: 2020-08-09 13:55:50

I work for [Endtest](https://endtest.io).

The [homepage](https://endtest.io) is one of the most important parts of our website, and your feedback would be very helpful.

I'm mostly looking for thoughts on how it looks and feels, not necessarily technical aspects (Lighthouse score, etc.) 

1. How would you improve the homepage?
2. Does it do a good job of describing what our platform does?
3. Is there any piece of text that makes you think "I don't want to try this"?
ของฝากจากเฮียเบน
Tags: theben
Published: 2020-08-09 13:51:47

---
title: ของฝากจากเฮียเบน
published: true
description: 5 Laws of Tradesformation
tags: theBen
---
**<u>ยกระดับการเทรดด้วยกฎห้าข้อ</u>**
1. อ่านเทรนให้ออกตาม TF ที่เราเลือก
2. เทรดไปตามเทรน อย่าออกไม้สวนเทรน ถ้าติดไม่ต้อง SL ให้ถือเอาไว้
3. ถ้าเกิดการกลับเทรนให้ปิดไม้ลบ
4. อย่า OVERTRADE
5. เทรดไม่ต้องกำไรทุกวัน แต่ต้องมีไม้รันเทรนไว้กินคำใหญ่เสมอ
   
----------------------------------------------
ข้อ 1 ถึง 3 คือ เทคนิค ข้อ 4 คือ MM ข้อ 5 คือ Mindset.
Road to Vim Mastery Day 1
Tags: vim, codenewbie
Published: 2020-08-09 13:44:28

Yesterday while i was going through some videos(which i don't understand btw) i saw a video called vim for python. As i was feeling uncomfortable with using pycharm which takes a solid 2 min to load, i decided to check what this so called vim is ?. This is what i found out:

**What is VIM ?**
     
   vim is fast command line based text editor (this is what my brain managed to understand after dabbling on google for 30 min. if you want formal definition go [here](https://www.google.com/search?sxsrf=ALeKk03-yBzkd8HCKDSo61ubvdMI5-zEKg%3A1596975519760&ei=n-kvX5XxLdjb9QO54YSIAg&q=vim&oq=vim&gs_lcp=CgZwc3ktYWIQAzIECCMQJzIECCMQJzIECCMQJzIHCAAQsQMQQzIECAAQQzIOCC4QsQMQgwEQxwEQrwEyBQguELEDMgIIADIECAAQQzILCC4QsQMQxwEQowI6BAgAEEc6CAguEJECEJMCOgUIABCRAjoFCAAQsQM6CAguELEDEIMBOggIABCxAxCDAToICAAQsQMQkQI6CAgAEJECEIsDOgQILhBDUJWXMljYmjJgrJwyaABwA3gAgAGjAYgBxwOSAQMwLjOYAQCgAQGqAQdnd3Mtd2l6uAECwAEB&sclient=psy-ab&ved=0ahUKEwjVvMe0jY7rAhXYbX0KHbkwASEQ4dUDCAs&uact=5)

**Why use VIM**

Cause it is fast and powerful 
> as for why it is powerful, idk yet. it's like telling children rockets are powerful 

**My motivation to learn VIM**
 
It looks cool 
> looks like software from hacker movies
> Don't need a mouse when mastered, alteast that's what they said.

**How I Started Learning**

I found a website called VimGenius where you can practice your knowledge on vim.
> well first you need to get the knowledge

So first download vim from [here](https://ftp.nluug.nl/pub/vim/pc/gvim82.exe) and install it with default settings(which means just keep pressing next button).

now follow the below steps:
 
1. open cmd (press windows + r and type cmd and press enter)
2. type vimtutor and a file containing commands that you need to know will open up.

Important step : take it slow, don't try to complete it in one day.
Practice so that they become a part of your instincts 

**What I learned on my first day**

vim has two modes (for now i only know these two modes )

1. Insert Mode
2. Normal Mode

Insert Mode:
     
When you open a file using vim, you can't just starting typing like we used to do in notepad. first you have to enter insert mode by clicking i or I.

>Without entering Insert mode, you are basically viewing a read-only file




Normal Mode:
   
This where you get to do the fun stuff, to enter this mode press *esc* ( a button at left most corner on top of your keyboard). 

After enter esc key, you can enter following commands

 `:q`   

used to close a file 

>the : is not for decoration it is supposed to be typed

 `:q!`
 To close a file without saving, just in case you messed up your code

 `:w`
To save changes to file but don't wanna close it.

`:wq! or :x or :zz`
To save changes and close file 

`x`
To delete character at cursor (cursor is something your mouse location)

Navigation commands (use in normal mode)

`h`
Move cursor left

`l`
Move cursor right

`j`
Move cursor down

`k`
Move cursor up


Well that's it for day 1.
               
     
*Zed*
Abbreviations we always use on work
Tags: discuss, webdev
Published: 2020-08-09 13:33:52

Everyday we use many almost abbreviations I and we many don't know what's there meaning.

because I'm a web developer So I decided to collect them in cheatsheet and add any web abbreviation I will remember any time.

**SVG** Scalable Vector Graphics

**HTTP:** Hypertext Transfer Protocol

**CSS:** Cascading Style sheet

**HTML:** Hypertext Markup Language

**WWW:** World Wide Web

**SEO:** Search Engine Optimization 

**SMO:** Social Media Optimization

**SSL:** Sucuire Socket Layer

**CLI:** Command Line Interface 

*ex: Terminal (on MacOs) or GitBash (on windows)*

**DBMS:** Database Management System 

*Software that allows you to interact with a database ex: postgreSQL*

**DBAPIS:** Database Application Programming Interfaces 

*How to interface with database from another language or web framework ex: Python, NodeJS*

**SQL:** Structure Query Language

*The standard language for communicating with a relational database*

**CMS:** Content Management system 

*ex: WordPress, Drupal and Shopify, etc ....*

**EKS:** Elestic Kubernates Services

**OS:** Operating System

**WWW:** World Wide Web

**JPEG:** Joint Photographic Experts Group

**PNG:** Portable Network Graphics

**GUI:** Graphic User Interface

**FTP:** File Transfer Protocol

**IDE:**  Integrated Development Environment 

**CD:** Computer Desk


And hope if anyone wants to add some abbreviation specific for the web don't hesitance to share them in the comments! and share knowledge.
How to add global CSS in the public html file in React - Create React app (CRA)?
Tags: react, css, javascript, html
Published: 2020-08-09 13:25:22

{% youtube jFOQBqZHXj8 %}

``` The short answer is CRA(create react app) doesn't know about those files unless you import them in js.  so import it in index.js file. For more clarity, watch the full video```

Then why the title says how to add in public HTML file? It's because all the things wrapped inside one div root id in public HTML file that's how most people think at first when it comes to applying global or base styles in web app. And index.js file target div block with id "root" so index.js is the way to import your global css.

This video will show you how to add global css or base styles  which are required for your whole app

Here I'm referring global or base styles as the combination of normalization, resets, variables, placeholders, mixins, function. At the moment vanilla CSS doesn't support placeholders, mixins, functions which are sass features.

This is an ongoing project with contentful CMS.check out github code here: [singerProfile](https://github.com/Alidhuniya/singerProfile-ReactJS-with-Contentful)

[google solution link](https://github.com/facebook/create-react-app/issues/7300)

Read more of my articles on dev.to here: https://dev.to/alidhuniya
A list of free Udacity courses
Tags: webdev, codenewbie, beginners, resources
Published: 2020-08-09 13:15:53

Here's a list of free courses that I took in the past and currently taking that I think you should take to have a better grasp of web development. Most of these courses are introductory courses since they are free but nonetheless, having a good foundation can help you tremendously in your career so I highly recommend that you at least take one or two courses from this list.

### 1. Programming Languages

This is a beginner introductory course about theory and practices of programming languages.
https://classroom.udacity.com/courses/cs262

### 2. Version Control with Git

If you want to learn git this is the course for you.
https://classroom.udacity.com/courses/ud123

### 3. Responsive Web Design Fundamentals

At the end of this course, you'll have all the tools needed to build a responsive website.
https://classroom.udacity.com/courses/ud893

### 4. Responsive Images

This course is all about making your images responsive. I'd recommend that you take it after finishing Responsive Web Design Fundamentals.
https://classroom.udacity.com/courses/ud882

### 5. HTML5 Canvas

Learn how to create images and interactive animation with HTML5 Canvas.
https://classroom.udacity.com/courses/ud292

### 6. ES6
Everything you need to know about javascript ES6.
https://classroom.udacity.com/courses/ud356

### 7. Web Accessibility

Your website should be accessible to everyone and in this course, they show you how you can do it.
https://classroom.udacity.com/courses/ud891

### 8. Writing READMEs

Documentation is an important part of the development process and in this course, they teach you how you can write good READMEs.
https://classroom.udacity.com/courses/ud777

### 9. Intro to Algorithms

If you want to get started with algorithms this course is for you.
https://classroom.udacity.com/courses/cs215

### 10. Intro to Progressive Web Apps

Learn how you can build a PWA.
https://classroom.udacity.com/courses/ud811

<hr>

If you know of other free courses on Udacity share them in the comments!
#BotWhacking
Tags: watercooler, discuss, challenge
Published: 2020-08-09 13:24:46

Ok so you know those Twitter bots that search for various keywords and retweet tweets? They're pretty popular in the developer community, presumably as they're an interesting project to build. I wondered how many it would be possible to hit with a single tweet.

{% twitter 1292258633225363456 %}

A few had a go with good results!

{% twitter 1292259407489839111 %}

{% twitter 1292286461883097089 %}

My latest is currently sitting at 60 retweets.

{% twitter 1292315511552978944 %}

Can you beat that? 😄
Why does indexOf output like this?
Tags: indexof, javascript, method, array
Published: 2020-08-09 13:10:46

 var num = [26, 16, 41, 32, 16, 28, 16, 41];
        console.log(num.indexOf(41));// 2
        console.log(num.indexOf(41, 2)); // 2
        console.log(num.indexOf(16, -1)); // -1 why?
        console.log(num.indexOf(16, -2)); // 6
5 Productivity VScode extensions for Javascript developers
Tags: vscode, productivity, javascript
Published: 2020-08-09 13:02:06

>###If you improve by 1% every day you will improve by 100% in 100 days. 

Sounds very simple but it is hard to achieve. Here I have curated a list of 5 extensions that will help you improve your coding productivity right away!🚀🚀🚀

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

Prettier or another forms of it are quickly becoming a standard of many software engineering teams because it helps to maintain the code base structure and syntax consistent throughout your codebase while at the same time removing the hustle of formatting the code for each individual developer.

Get it here: [Prettier](https://prettier.io/) 

##Tab nine
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ju8k4yxzuplsllpyo561.gif)

Tab nine is an AI based code assistant software. It predicts what code you might be writing and suggest you to autocomplete what you might be intending to write. It works very similarly as autocomplete in Gmail just for coding.

I recommend giving it a try and see for yourself how the autosuggestion feel to use.

Get it here: [Tab nine](https://www.tabnine.com/) 

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

ESLint prevents you from making code mistakes even before you try to run the code. It will generate an underline of where the problem might originate and show an error in console after the code is compiled. In this way you are increasingly reducing the time you spend on debugging and testing the code.

Get it here: [ESlint](https://eslint.org/) 

##Code Spell Checker
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4f82964bim9ko7npsqir.gif)

Have you ever did a merge/pull request and were caught misspelling something and the had to pull up the old branch again just to fix the minor spelling issue? Now there is a solution that will save you even before you push your code.

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

##Bracket pair colorizer
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zu5wwoa9ucjcday3qvy3.png)

Everyone who have spent some time coding have ended up in the situation where you click trough the brackets to just find the matching one, now there is a tool that makes it much faster to identify the right brackets by colorising them.

Get it here: [Bracket pair colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 

##Conclusion

I hope you find this article useful and found a plugin that could add another 1% to your growth and productivity! Have a productive coding!🚀🚀🚀
How to remove duplicate words from an array in JavaScript?
Tags: javascript, node, arrays
Published: 2020-08-09 15:51:31

---
title: How to remove duplicate words from an array in JavaScript?
published: true
date: 2020-08-09 13:00:10 UTC
tags: javascript,nodejs,arrays
canonical_url: https://blog.murtajaziad.xyz/how-to-remove-duplicate-words-from-an-array-in-javascript/
---

In this article, you will learn how to remove duplicate words from an array in JavaScript.

![](https://cdn-images-1.medium.com/max/1024/1*kokxymwnX3my8VNkEzOc8w.jpeg)<figcaption>Snow Capped Mountain During Evening — <a href="https://www.pexels.com/photo/photo-of-snow-capped-mountain-during-evening-2440024/">Pexels</a></figcaption>

That’s the array of duplicate words that we have:

```
let duplicate_words = ["camera", "signature", "camera", "guitar", "guitar", "camera"];
```

By default, a set cannot have duplicate elements.  
So, we can remove duplicate words from an array by converting it to a set.

```
let words_set = new Set(duplicate_words);
```

If we log the set to the console, we will get:

```
console.log(words_set); // Set(3) {"camera", "signature", "guitar"}
```

We need it as an array, so we will convert the set back to an array using the spread operator.

```
let words = [...words_set];
```

Now, log the words to the console.

```
console.log(words); // ["camera", "signature", "guitar"]
```

The duplicate words have been removed from the array successfully!

Follow me on [Twitter](https://twitter.com/MurtajaZiad_), and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCjurfkhxHmwQMlXqRjLEBKg)!