teleren/devto huggingface dataset:
NodeJS/Express – Upload/Download MultipartFiles/Images – Multer + JQuery Ajax + Bootstrap
Tags: node, express, multer
Published: 2021-04-03 09:12:33

https://grokonez.com/node-js/nodejs-express-upload-multipartfiles-images-multer-jquery-ajax-bootstrap

Tutorial: NodeJS/Express – Upload/Download MultipartFiles/Images – Multer + JQuery Ajax + Bootstrap

In the tutorial, we show how to build a NodeJS/Express web-application to upload MultipartFile-s/Images by Multer middleware, JQuery Ajax and Bootstrap view.

Related posts:
- <a href="https://grokonez.com/node-js/multer-build-restapi-to-upload-a-multipartfile-to-nodejs-express">Multer – Build RestAPI to upload a MultipartFile to NodeJS/Express</a>
- <a href="https://grokonez.com/node-js/integrate-nodejs-express-jquery-ajax-post-get-bootstrap-view">Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view example</a>
- <a href="https://grokonez.com/frontend/nodejs-express-upload-text-fields-multipartfile-with-multer-jquery-ajax-bootstrap-4">NodeJS/Express – Upload Text-Fields + MultipartFile with Multer, Jquery Ajax, Bootstrap 4</a>

<!--more-->
<h2>Goal</h2>
<h3>Prerequisites</h3>
- <a href="https://grokonez.com/node-js/multer-build-restapi-to-upload-a-multipartfile-to-nodejs-express">Multer – Build RestAPI to upload a MultipartFile to NodeJS/Express</a>
- <a href="https://grokonez.com/node-js/integrate-nodejs-express-jquery-ajax-post-get-bootstrap-view">Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view example</a>
<h3>Objective</h3>
In the tutorial, we build a NodeJS/Express web-application that uses Multer middleware to upload/download MultipartFiles/Images using JQuery Ajax & Bootstrap view.

Project structure:

<pre><code class="language-javascript">
/NodeJS-Express-Multer-MultipartFile-Ajax-JQuery-Bootstrap
	/app
		/config
			multer.config.js
		/controllers
			file.controller.js
		/routers
			file.router.js
	/node_modules
	/resources
		/static
			/js
				getrequest.js
				postrequest.js
	/uploads
		/*contains the uploaded-files*/
	/views
		index.html
		404.html
	package.json
	package-lock.json
	server.js</code></pre>

-> results:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-Multer-Upload-MultipartFile-Ajax-Jquery-Bootstrap-dowloadfiles.png" alt="NodeJS-Express-Multer-Upload-MultipartFile-Ajax-Jquery-Bootstrap-dowloadfiles" width="687" height="336" class="alignnone size-full wp-image-12591" />
<h2>Practice</h2>
<h3>Setting up NodeJS/Express project</h3>
Create a folder <em>NodeJS-Express-Multer-MultipartFile-Ajax-JQuery-Bootstrap</em>:

<pre><code class="language-javascript">
mkdir NodeJS-Express-Multer-MultipartFile-Ajax-JQuery-Bootstrap
cd NodeJS-Express-Multer-MultipartFile-Ajax-JQuery-Bootstrap
</code></pre>

https://grokonez.com/node-js/nodejs-express-upload-multipartfiles-images-multer-jquery-ajax-bootstrap
Navbar in Bootstrap 5 Tutorial
Tags: webdev, html, css, tutorial
Published: 2021-04-03 09:10:41

Learn how to make a menu or navigation bar in Bootstrap 5. The navbar is something that basically every website has, so this quick tutorial will cover the basics of how to create one that is:

* Uses Bootstrap 5
* Simple with HTML, CSS
* Is responsive 
* Has Dropdowns
* No jQuery!

{% youtube qNifU_aQRio %}

<center><a href="https://youtu.be/qNifU_aQRio">https://youtu.be/qNifU_aQRio</a></center>


This is part of a series of Bootstrap Tutorials I am doing which describes how to build the fundamentals.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [VS Code in Virtual Reality](https://dev.to/adriantwarog/vs-code-in-virtual-reality-4ja2)
* [VS Code on my Phone](https://dev.to/adriantwarog/vs-code-on-my-phone-how-i-did-it-1fme)
* [40 Amazing Developers You Should Follow On Youtube](https://dev.to/adriantwarog/40-amazing-developers-you-should-follow-on-youtube-5bhh)
* [Enhance UI - Design for Developers](https://dev.to/adriantwarog/enhancing-ui-design-for-developers-3peg)
Getting Started with OCAPI in SFRA - A Powerful Tool 🚀
Published: 2021-04-03 09:04:55

### What is OCAPI?

OCAPI (Open Commerce API) is an API which allows access to our platform data from another application in a secure way, going to request information from the server and returning a value or an HTTP error in case of error ( resource not found, parameters not found etc. ).

There are 3 types of OCAPI: Shop, Data and Meta. The most used is Shop, it provides access to Commerce Cloud Digital storefront functionality.

*You can retrive information about all OCAPI resources from salesforce documentation under “Open Commerce API”.*


### GET IN ACTION!🤘

Hey! yes i know, it was boring, but now we get in action. If you not have installed Postman or Insomnia go to download one of this.

Ok! You are now ready to try making the first API call and getting your first error!

But don't worry, i'm here for explain to you how avoid it and retrive information what you need.

#### RETRIVE AUTHORIZATION TOKEN

Yes, your first api call is for retrive authorization token. We need some parameters to pass in header or query.

* **client_id**, without it we are not able to access information we need, you can find it in business manager under Administration -> Open Commerce API Settings. (_Passed as query_).

* **Your username, password and client secret** (username and password are the same you use for access to business manager, client secret is provided by CRM) which are coding in Base64 (you can use [Base64encode](https://www.base64encode.org/)) following this structure `your_username:your_password:client_secret`.

* **grant_type** (_passed as query_): `urn:demandware:params:oauth:grant-type:client-id:dwsid:dwsecuretoken`.

* `Content-Type: application/x-www-form-urlencoded`.

Finally we have all parameters to pass in header/query and can call endpoint (_https:// **your_host_sandbox** /dw/oauth2/access_token_) for retrive authorization token with a POST.

Let’s build our API call!

* Configure your header:


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

* Configure query:

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

> Remember grant_type value is:  urn:demandware:params:oauth:grant-type:client-id:dwsid:dwsecuretoken
 
**_TOKEN EXPIERD AFTER 15 MINUTES SO YOU HAVE TO RETRIVE NEW TOKEN._**

> Note: I’am using insomnia environment variables.

🎉 Finally we have our authorization token that we can use from now on to execute any API call.

_Don't forget to specify in subsequent API call that Authorization will have Bearer your_token value and don't forget to pass your client_id as a query, this must never be missing!_

 📦  Now let's try to retrieve an order, we just need to make GET to call the resource:

_https:// **your_sanbox_url** /s/Your-Site/dw/Shop/**OCAPI Version**/orders/{ordernumber}_

In header we should set:

* `Authorization Bearer` **your_token** 
* `Content-Type application/json`

> DON’T FORGET to set **client_id** in query.


_You can find other api resource in official salesforce documentation._
HOW TO MAKE A SIMPLE BLACKJACK GAME IN PYTHON.
Tags: python, programming, codereview, learning
Published: 2021-04-03 09:03:43

Hey guys I just want to share with you this little project I made. So this is my recently finished project I know it is not a big deal but I really enjoyed the coding part and to figure out how to do things.

This game is a very simple version of BlackJack card-game.
It is not perfect but I think it is worth to try it, the game itself
has no graphical interface works in >: CMD.

If you want to try it I linked my github profile below.

- > https://github.com/AdyPolyCode/-Codeacademy-
Successful Software Engineer Tricks
Tags: taskforce, awesomitylab, codeofafrica
Published: 2021-04-03 08:59:01

Greetings,

Another week down at task force, the week was fun, educational, and interesting.

We started the week with a team-building session, as usual, a session I personally enjoy not only it’s a warm-up session but also because it’s an opportunity to get to know better about my teammates in the task force. 

Speaking of the team this week we organized ourselves to build teams that will be working on a client project for the coming two weeks while waiting for the project we focused on the technologies we will be using and learn more about them and I believe we will be able to deliver a high-quality product to the client.

This week I also received feedback from the Awesomity Lab team, telling me how I could improve in my codes of the past project (Wanderlust). I tried my best to implement all the feedback as I believe, Awesomity Lab team is trying its best to make me a sharp software engineer who follows all the best practices to deliver products of the best quality.

With the help of Blaise and Joseph, we all know what it takes to be a productive and healthy software engineer it is time management. In the session, Joseph explained what is time management and the reasons why it’s important, then Blaise worked us through different time management strategies, I now know that I have to identify the tasks I want to implement, prioritize them, know the time I am focused and productive then arrange those tasks due to that time and their priorities. 

I can write a million words talking about how the week went at taskforce but what I can tell Awesomity Lab and Code Of Africa treat whoever they are working with, as a family member and I am looking forward to the coming weeks with them.
Fundamentals of Testing in TypeScript #3
Tags: testing, typescript
Published: 2021-04-03 08:57:03

In the previous article, we created a specialized `expect` function that returns an object with assertions, but one of our assertion function's side effects is that as soon as one assertion fails, it throws an error, so other tests do not run. A testing framework exists to help the developer identify what is broken as soon as possible. We can ensure that we will provide more helpful error messages and by running all of our tests.

Let's create our own `test` function to encapsulate our automated tests and abstract them. Also, we want to ensure that we will run all the tests with more helpful error messages.

Our `test` function will accept a `title` of the test and a `callback`.

Because our `test` function can throw an error, we will wrap it in a `try-catch` statement. Inside the `try` block, we will call our `callback`, and if the callback throws an error, we will log it out.

To help a developer identify which functionality is broken, we will log the `title`. For better visibility, we are adding ✅ and ❌ emojis.

```ts
const test = <T>(title: string, callback: () => T) => {
  try {
    callback()
    console.log(`✅ ${title}`)
  } catch (error) {
    console.error(`❌ ${title}`)
    console.error(error)
  }
}
```

Now let's encapsulate our assertion to a function and pass it as a callback to our `test` function.

```ts
test('add function', () => expect(add(8, 16)).toBe(24))
test('subtract function', () => expect(subtract(32, 16)).toBe(16))
```

Now, we can rerun our test file, but we need to look into the console instead of the `tests` tab.
It is now clearly visible that the problem is inside our `add` function, not in the `subtract`.

```
❌ add function
Error: -8 is not equal to 24

✅ subtract function
```
Why is Flask a good web framework choice?
Published: 2021-04-03 08:46:42

I’ve been using [Python](https://python.org) for a long time, and I continue to be impressed with how easy it is to get started with.

When developing a web app with Python, you want to use a framework. A framework makes development easier, you don't repeat the basic code over and over again. In general as a developer, you Don't want to Repeat Yourself (DRY).

You can think of a [web framework](https://pythonspot.com/python-web-development/) as a building block. 

## Why use a framework?

Developing web applications is hard. Not just technically, but also in regards to managing all the moving parts. People tend to underestimate the amount of work required to get a web application off the ground. 

Building a website is easy, but building something that can scale without losing its usability is where the challenge lies.

## Which frameworks exist?

There are many great web frameworks out there. Python [Django](https://pythonbasics.org/django-web-app/) fans have a lot of opinions. But if you want to create a Python web app, [Flask](https://pythonprogramminglanguage.com/python-flask-tutorial/) is also a great choice.

I’ve been using Flask for a long time, and I continue to be impressed with how easy it is to get started with. And once you’ve gotten up and running, the pace of development is fast.

We’ll explore some of the reasons for that in this article, but if curious take a look at the basic steps of [creating a Flask-based web application](https://pythonspot.com/flask-web-app-with-python/).

![flask python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr1in1122rkunlokwd09.jpg)

## Why Flask?

Well, in short: simplicity.

Flask is a micro-framework for Python based on [Werkzeug](https://pypi.org/project/Werkzeug/), [Jinja 2](https://jinja2docs.readthedocs.io/) and good intentions. It’s intended for getting started very quickly and was developed with best intentions in mind. 

You could say it’s the “Pythonic Flask” ;) The default web server of Flask is the built-in development server. It’s super simple, only supports [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) and only works for development purposes, but comes with automatic reloading of the code to see changes instantly.

* It was designed to make getting started quick and easy, with the ability to scale up to complex applications.
* Flask uses a built-in web server for development and a built-in development test server.
* The development test server is used automatically when running tests, ensuring that all code runs in a proper environment.
* Can be used with a [database](https://python-commandments.org/flask-crud/) if needed, but not required
* Flask is BSD licensed and supported by an active community of developers.
* Easy to [deploy online](https://www.pythonanywhere.com/?affiliate_id=00535ced)
use-spinner - Show loading spinners for your asynchronous calls
Tags: showdev, javascript, webdev, programming
Published: 2021-04-03 08:41:55

---
title: use-spinner - Show loading spinners for your asynchronous calls
published: true
description: Add a simple loading spinner to your async JS calls - built for the browser.
tags: #showdev #javascript #webdev #programming
//cover_image: https://direct_url_to_image.jpg
---

Hello community :wave:

Sometimes calls can take longer, so showing a loading spinner becomes an option to fill the gap. I was tired of configuring such spinners times and times again.

Yesterday I built a tiny Javascript library called [`use-spinner`](https://github.com/pinussilvestrus/use-spinner) that simply wraps asynchronous calls into a new function adding a loading spinner to the DOM.

Simply install the module

```sh
$ npm install --save use-spinner
```

and embed it in your Node.js styled application.

```js
import useSpinner from 'use-spinner';

import 'use-spinner/assets/use-spinner.css';

const mySlowCall = async () => {
  return await fetch(/*...*/);
}

const spinned = useSpinner(mySlowCall);

await spinned();
```


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

Of course, it is rather rudimentary right now and the spinner itself is hardly customizable. However, I like the easiness of integration to existing functions without much configuration.

Enjoy :heart:

{% github pinussilvestrus/use-spinner %}
From Scroll to Grid in a snap!
Tags: css, codequality, showdev, codepen
Published: 2021-04-03 08:01:57

---
title: From Scroll to Grid in a snap!
published: true
tags: css, codequality,showdev, codepen
cover_image: https://images.unsplash.com/photo-1565975839988-669eced97892?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80
---

The goal of the last year was **not to use javascript**, as if I had been blindfolded and I had to use only my hearing to orient myself, at first it seemed like a handicap but over time I realized that I had refined this last sense.

Among the different tasks I was asked to study and use the scroll snap in a mobile structure that must transform into a grid in the desktop version.

Here is a simplified demo of the structure. 
> Do you like this colour palette?

{% codepen https://codepen.io/tamer_aka_remat/pen/xxEGxLY %}
What’s a website site if nobody can discover it?

Tags: javascript, learning, discover
Published: 2021-04-03 07:58:56

What’s a website site if nobody can discover it?

It’s like having a Mercedes Benz sitting in your locked garage, no person will find out about it and no person will see it.  You need to take it out of the garage and drive it, to get noticed… and it’s the same with search engine marketing, you need a jockey on the horse to drive your SEO to be noticed online in the search engines.

https://www.designwebsitesolutions.com/whats-a-website-site-if-nobody-can-discover-it/
Leaking and Non-Leaking Arrow Functions in JavaScript
Tags: javascript, arrows, functional
Published: 2021-04-03 07:51:20

When writing arrow functions that shouldn't return any value you may be tempted to return an `||` operation such as:

```js
/* Leaking Arrow Function */
const arrowThatShouldntReturn = () => someOtherFunction() || undefined;
```

This may work if `someOtherFunction` returns a falsy value, but won't work for truthy values.

## The Void Operator
The `void` unary operator evaluates the given *expression* and then returns *undefined*. You'll see this operator used all over the React codebase to create non-leaking arrow functions! 

To use it we can define our functions as:

```js
/* Non-leaking Arrow Function */
const arrowThatShouldntReturn = () => void someOtherFunction(); // returns undefined
```

Or when we don't wish to do anything yet:

```js
/* Non-leaking Arrow Function */
const arrowThatShouldntReturn = () => void; // returns undefined
```

The first method will evaluate `someOtherFunction()` and return undefined regardless of the returned value. The second method is equivalent to `void undefined` which evaluates `undefined` and returns `undefined`.

Are there other use cases? Yes. 

## Before ES6

In old times you used to define variables using `var`. This immediately adds the variable you're declaring to the global object. It also pretty much didn't have restrictions, so you could just `var undefined = true` and it'd work. This is one of the reasons `void 0` used to be the preferred method. There's even an ESLint rule for it! It's not necessary in strict environments though.

## HTML

You probably also met the void operator in anchor tags! Ever met this bad boy?

```html
<a href="javascript:void(0)"/>
```

Yup, that's it. We used it to pretty much create links that preventDefault.

## IIFE 

You can use it with IIFEs too! 

```js
(function() { return true })(); // returns true

void function() { return true }(); // returns undefined
```

---
If you liked this article don't forget to love this post! If you found any issues with this article or have questions don't hesitate to comment them! Thanks for reading! You can follow me on [Twitter](https://twitter.com/kl13nt), or read more of my content here or on my personal [blog](https://iamnabil.netlify.app/blog)!
Angular 11 Tutorials For Beginners
Tags: angular, javascript, java
Published: 2021-04-03 07:44:49

Create Across All Platforms 

Learn one approach to fabricate applications with Angular and reuse your code and capacities to assemble applications for any arrangement target. For web, versatile web, local portable and local work area. 

Speed and Performance 

Accomplish the greatest speed conceivable on the Web Platform today, and take it further, through Web Workers and worker side delivering. 

Precise places you in charge of versatility. Meet tremendous information necessities by building information models on RxJS, Immutable.js or another push model. 

Unimaginable Tooling 

Construct includes rapidly with straightforward, definitive formats. Broaden the layout language with your own parts and utilize a wide exhibit of existing segments. Get quick Angular-explicit assistance and input with essentially every IDE and manager. This meets up so you can zero in on building stunning applications instead of attempting to make the code work.

Check everything here https://tutorialscamp.com/
Creating a simple Head-Tail Spinner using Vanilla CSS
Tags: css, animation, loading, spinner
Published: 2021-04-03 07:28:43

In this article we will go through step by step to create a simple and regular Head-Tail spinner using Vanilla CSS.


*If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.*

## Step 1: Adding a class spinner
 
 In index.html we add class spinner by:

```` html
	<div class = "spinner"></div>
```

In index.css we define the class spinner:

```` css
	body {
 	    background: #050115;
	}
	.spinner {
	    width : 10em;
	    height: 10em;
	    border-top : 1em solid #d5fff7;
	    border-right: 1em solid transparent;
	    border-radius: 50%;
	}
``` 

This creates a tail like structure of our spinner. The next thing will be add a head to it.

## Step 2: Adding a head

We add a class head inside the div of the spinner's div.

````html
	<div class = "spinner">
	    <div class = "head"></div>
	</div>
```
Now, we need to define and postion the head to the required place:

````css
	.head {
	    width: 1em;
	    height: 1em;
	    background-color: #d5fff7;
	    border-radius: 50%;
	    margin-left: 8.5em;
	    margin-top: 0.5em;
	}
```

The spinner looks good and has the attention of the user when it's in the miiddle of the page.

## Step 3: Positioning the spinner

We already have the class spinner, we add margin: auto inside it to position it to the center of the page

````css
	.spinner {
	    ...
	    margin: auto
	}
```

The spinner is just horizontally centred to the page because the height of the body is not full-screen. Let's fix that now:

````css
	body {
	    background: #050115;
	    display: flex;
	    height: 100vh;
	    width: 100vw;
	    overflow: hidden;
	  }
``` 

Let's add motion to our work.

## Step 4: Adding animation

In the class spinner we use animation and define the animation proprties:

````css
	.spinner {
	    ...
	    animation: spinner 0.6s linear infinite;
	}
```

In the property animation, spinner is the animation-name, we can use other name as well. 0.6s is the animaion-duration in which our animation will go from 0% to 100%, linear is the animation-timing-function which makes it look smooth and infinite if animation-iteration-count. 

Now we make the animatoin behave:

````css
	@keyframes spinner {
	    100% { transform: rotate(360deg) }
	}
```

Voila! We have our spinner live.

## Step 5: Changing the size of the spinner

Here till now I have used em instead of px, so that we can control the size of the spinner from a single place instead of making the changes at various places. 

To change the size of the spinner, we add a inline style for font-size and change it's value as shown:

````html
	<div class = "spinner" style = "font-size: 10px">
	    <div class = "head"></div>
	</div>
```

*Default value of 1em is 16px usually. So, changing the font-size here changes the value of 1em thereby changing the size of the spinner.*

Social Media Links: https://designingcoder.github.io


{% youtube lA2uKMm6_gA %}