How to Upload and Serve Data Using Amazon CloudFront and Amazon S3 in Node.js

Most applications today serve users across the globe and need a way to deliver their content fast. The content can be images, videos, PDF, and so on. Content delivery networks (CDNs) are a network of servers that are geographically distributed with the intent of serving content to users as fast as possible.
Amazon CloudFront is a content delivery network service which can deliver content fast and securely. In this article, I will describe how to upload files to an S3 bucket and serve those files through CloudFront in Node.js. CloudFront will use S3 as an origin in this article.

Link: https://dzone.com/articles/how-to-upload-and-serve-data-using-amazon-cloudfro?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Uploading and Downloading Files: Streaming in Node.js

While the buffer APIs are easier to use to upload and download files, the streaming APIs are a great way to better manage memory and concurrency. In this post, you’ll learn how to stream files between clients, Node.js, and Oracle Database.
Overview
The streaming APIs in Node.js are designed to leverage and simplify its evented nature. There are four different stream classes: Readable, Writeable, Transform, and Duplex. Readable streams (which includes Transform and Duplex) have a method that can be thought of like the pipe command in Linux, where the standard output of one command can be piped into the standard input of another command. Here’s a command line example that takes the output from the ls (list) command and pipes it through the grep (search) command to show files that have the word “oracle" in the name:

Link: https://dzone.com/articles/uploading-and-downloading-files-streaming-in-nodej?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Understanding Node.js File System Module

A file system is a mechanism that controls how data is stored, accessed, and managed on an operating system. The file system module in Node.js allows you to work programmatically with the file system on an operating system.
Using file system (fs) module, we can perform read, write, delete, and many more operations. Let us look at some of the most important operations.

Link: https://dzone.com/articles/understanding-nodejs-file-system-module?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Intro to Series on Uploading and Downloading Files With Node.js and Oracle Database

I first wrote about uploading and downloading files in 2015. Since then, many new features have been added to the driver, including streaming and buffer APIs for working with LOBs. It’s time to revisit the topic and put these new APIs to use. In this mini-series, I’ll demonstrate two different options for uploading and downloading files. The best choice for your use case will depend on several variables which will be discussed in the respective post. You might be wondering, why use the database to store files (unstructured data) when you could just use the file system? This is a great question. Here are a few important reasons:

Link: https://dzone.com/articles/intro-to-series-on-uploading-and-downloading-files?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Detect Text in Images

Images are a great way to communicate without text but oftentimes images are used/abused to spread text within social media and advertisements. Text in images also presents an accessibility issue. The truth is that it’s important, for any number of reasons, to be able to detect text in image files. The amazing open source tool […]
The post How to Detect Text in Images appeared first on David Walsh Blog.

Link: https://davidwalsh.name/how-to-detect-text-in-images

Extracting command line arguments from Node.js using destructuring

If you’ve worked on a Node.js command-line program, you were probably faced with the extraction of command line arguments. Node.js provides all command line arguments in the process.argv array. However, the contents of the array aren’t what you might expect. What’s in process.argv? The first two items in process.argv are: The path to the executable…

Link: http://feedproxy.google.com/~r/nczonline/~3/6irWseuJCAw/

So You Think You’re Just Gonna npm install? Think Again

We embraced the birth of package lockfiles with open arms, which introduced deterministic installations across different environments and enforced dependency expectations across team collaboration.
Life is good! Or so I thought… what would have happened had I slipped some changes into the project’s package.json file but had forgotten to commit the lockfile along side of it?

Link: https://dzone.com/articles/so-you-think-youre-just-gonna-npm-install-think-ag?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Microsoft Unveils New (and Simpler) Open Source Programming Language

According to Microsoft’s Mark Marron, it’s time to move beyond the structured programming paradigm of the 1970s and onto something a whole lot simpler. With Bosque, Microsoft’s new open source programming language, he’s attempting to do just that. Marron sees Bosque as an entirely new model, which he dubs “regularized programming,” because it does away with techniques that accidently create complexity – like loops, conditionals, and subroutines – and focuses instead on algebraic operations.

Link: https://dzone.com/articles/microsoft-introduces-regularized-programming-language-called-bosque?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Optimize the Performance of a Vue App with Async Components

Single-page applications sometimes cop a little flack for their slow initial load. This is because traditionally, the server will send a large bundle of JavaScript to the client, which must be downloaded and parsed before anything is displayed on the screen. As you can imagine, as your app grows in size, this can become more and more problematic.
Luckily, when building a Vue application using Vue CLI (which uses webpack under the hood), there are a number of measures one can take to counteract this. In this article, I’ll demonstrate how make use of both asynchronous components and webpack’s code-splitting functionality to load in parts of the page after the app’s initial render. This will keep the initial load time to a minimum and give your app a snappier feel.
To follow this tutorial, you need a basic understanding of Vue.js and optionally Node.js.
Async Components
Before we dive into creating asynchronous components, let’s take a look at how we normally load a component. To do so, we’ll use a very simple message component:

<template>
<h1>New message!</h1>
</template>

Now that we’ve created our component, let’s load it into our App.vue file and display it. We can just import the component and add it to the components option so we can use it in our template:
<!– App.vue –>
<template>
<div>
<message></message>
</div>
</template>

<script>
import Message from “./Message";
export default {
components: {
Message
}
};
</script>

But what happens now? The Message component will be loaded whenever the application is loaded, so it’s included in the initial load.
This might not sound like a huge problem for a simple app, but consider something more complex like a web store. Imagine that a user adds items to a basket, then wants to check out, so clicks the checkout button which renders a box with all details of the selected items. Using the above method, this checkout box will be included in the initial bundle, although we only need the component when the user clicks the checkout button. It’s even possible that the user navigates through the website without ever clicking the checkout button, meaning that it doesn’t make sense to waste resources on loading this potentially unused component.
To improve the efficiency of the application, we can combine both lazy loading and code splitting techniques.
Lazy loading is all about delaying the initial load of a component. You can see lazy loading in action on sites like medium.com, where the images are loaded in just before they’re required. This is useful, as we don’t have to waste resources loading all the images for a particular post up front, as the reader might skip the article halfway down.
The code splitting feature webpack provides allows you to split your code into various bundles that can then be loaded on demand or in parallel at a later point in time. It can be used to load specific pieces of code only when they’re required or used.
Dynamic Imports
Luckily, Vue caters for this scenario using something called dynamic imports. This feature introduces a new function-like form of import that will return a Promise containing the requested (Vue) component. As the import is a function receiving a string, we can do powerful things like loading modules using expressions. Dynamic imports have been available in Chrome since version 61. More information about them can be found on the Google Developers website.
The code splitting is taken care of by bundlers like webpack, Rollup or Parcel, which understand the dynamic import syntax and create a separate file for each dynamically imported module. We’ll see this later on in our console’s network tab. But first, let’s take a look at the difference between a static and dynamic import:
// static import
import Message from "./Message";

// dynamic import
import("./Message").then(Message => {
// Message module is available here…
});

Now, let’s apply this knowledge to our Message component, and we’ll get an App.vue component that looks like this:
<!– App.vue –>
<template>
<div>
<message></message>
</div>
</template>

<script>
import Message from "./Message";
export default {
components: {
Message: () => import("./Message")
}
};
</script>

As you can see, the import() function will resolve a Promise that returns the component, meaning that we’ve successfully loaded our component asynchronously. If you take a look in your devtools’ network tab, you’ll notice a file called 0.js that contains your asynchronous component.

Conditionally Loading Async Components
Now that we have a handle on asynchronous components, let’s truly harvest their power by only loading them when they’re really needed. In the previous section of this article, I explained the use case of a checkout box that’s only loaded when the user hits the checkout button. Let’s build that out.
Project Setup
If you don’t have Vue CLI installed, you should grab that now:
npm i -g @vue/cli

Next, use the CLI to create a new project, selecting the default preset when prompted:
vue create my-store

Change into the project directory, then install the ant-design-vue library, which we’ll be using for styling:
cd my-store
npm i ant-design-vue

Next, import the Ant Design library in src/main.js:
import ‘ant-design-vue/dist/antd.css’

Finally, create two new components in src/comonents, Checkout.vue and Items.vue:
touch src/components/{Checkout.vue,Items.vue}

The post Optimize the Performance of a Vue App with Async Components appeared first on SitePoint.

Link: https://www.sitepoint.com/vue-async-components/