Integrating Java and npm Builds Using Gradle

This article describes how to automate building Java and JavaScript npm-based applications within a single Gradle build.
As examples we are going to use a Java backend application based on Spring Boot and a JavaScript front-end application based on React. Though there are no obstacles to replacing them with any similar technologies like DropWizard or Angular, using TypeScript instead of JavaScript, etc.


How to Worry About npm Package Weight

It’s all too easy to go crazy with the imports and end up with megabytes upon megabytes of JavaScript. It can be a problem as that weight burdens each and every visitor from our site, very possibly delaying or stopping them from doing what they came to do on the site. Bad for them, worse for you.
There is all sorts of ways to keep an eye on it.

You could have a peak on Bundlephobia
Bundlephobia will give you …
The post How to Worry About npm Package Weight appeared first on CSS-Tricks.


[DZone Research] Tools and Testing: The Popularity of npm and Selenium

This post is part of the Key Research Findings in the 2018 DZone Guide to Dynamic Web and Mobile Development. 
For this year’s DZone Guide to Databases, we surveyed software professionals from across the IT industry. We received 1,202 responses with a 64% completion rating. Based on these numbers, we calculated the margin of error at 3%. In this article, we discuss the prominence of npm and Selenium as development and testing tools among web and mobile developers. 


Node.js 10.0 Fills Some Gaps, Polishes a Few Rough Edges

Node.js 10 was released this April and I just wanted to kind of touch on what’s new—the additions improvements, etc. Obviously, I’m not going go through the extensive change log or anything but I just want to mention the major things. The changes are so many that you’ll find this information in series of articles elsewhere but I figured that I would wrap it up in one article and try to convey it in a simple way.
I know these aren’t the most exciting articles to read and share in the world but if you’re a JavaScript developer or someone who works at a technology firm, I think it’s really important to keep up-to-date with these things. It’ll be a short article.


NPM Can Do That?

I have been using the NPM package manager for a few years and watched it rise, almost fall (to Yarn) and evolve into a fast, full-featured package manager and much more. Along the way there are a few simple tricks that have saved me a bunch of time.
Viewing Available NPM Scripts
Picture this… you finally find some time to work on that little app or side project. It’s been days or weeks since you last looked at the code. You open up Visual Studio Code, hit CTRL-` to open the integrated terminal and type npm…? Darn, you can’t remember the command to build/run/debug/do something to your app. Time to crack open the package.json and see how it all works. Buzz kill. Wait, what about…


Thoughts on Importing npm Modules to the Web as JavaScript Modules

I’ve got thoughts on the post I did about ES Modules.
“I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules, and I didn’t want to have to bundle up using CommonJS (require).


Importing NPM Modules to the Web as ES6 Modules

I’ve been working on a way to make it easier to push content into my static site and it’s been a fun little exercise that I will share more in another post. In this post, I want to share the rollup config that I used to import nearly any NPM module into a front-end project using ES6 Modules.
I needed a quick way to import a simple module get-urls into my project. The module is well tested and it does what I needed… ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules, and I didn’t want to have to bundle up using CommonJS (require).


The Wonderful Wide World of webpack: Unpacking Awesomeness

In the past couple of years, webpack has come a long way. It continues to rapidly evolve and revolutionize the way we bundle JavaScript and more. For some of us that have been doing development for more than a few years, seeing an amazing tool like webpack and all of its abilities is mind-blowing. If only it had come into existence a bit sooner…
If you’re like me, you may have stumbled across webpack, hearing about its gazillion configuration options, along with a bunch of plugins, numerous ways to optimize your bundle, and more. So much that it all makes your head spin and you begin to feel overwhelmed as you attempt to make sense of it. That’s honestly how my journey began with Webpack.


10 JavaScript Animation Libraries to Follow in 2018

The client-side of a modern day website feeds off quality animation, which has lead to a rise in the need for JavaScript animation libraries. Fortunately, the supply seems to have matched the demand and there are a lot of options out there. However, making a choice on which library to go with could cause a lot of headaches. A lot of libraries have the potential to become better over the course of the year and would be the go-to solutions for creating animations.
Let’s take a look at the top ten JavaScript animation libraries.


10 Must-have VS Code Extensions for JavaScript Developers

In this article, I’ll focus on must-have VS Code extensions for JavaScript developers.
Visual Studio Code is undoubtedly the most popular lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.
The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.
VS Code Extensions by Category
For this article, I’ll focus on VS Code extensions specifically targeting JavaScript developers. Currently, there are many VS Code extensions that fit this criterion, which of course means I won’t be able to mention all of them. Instead, I’ll highlight VS Code extensions that have gained popularity and those that are indispensable for JavaScript developers. For simplicity, I’ll group them into ten specific categories.
Snippet Extensions
When you first install VS Code, it comes with a several snippets for JavaScript and Typescript. Before you start writing modern JavaScript, you’ll need some additional snippets to help you quickly write repetitive ES6/ES7 code:

VS Code JavaScript (ES6) snippets: currently the most popular, with over 1.2 million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue extensions.

JavaScript Snippet Pack: a collection of useful snippets for JavaScript.

Atom JavaScript Snippet: JavaScript snippets ported from the atom/language-javascript extension.

JavaScript Snippets: a collection of ES6 snippets. This extension has snippets for Mocha, Jasmine and other BDD testing frameworks.

Syntax Extensions
VS Code comes with pretty good syntax highlighting for JavaScript code. You can change the colors by installing themes. However, you need a syntax highlighter extension if you want a certain level of readability. Here are a couple of them:

JavaScript Atom Grammar: this extension replaces the JavaScript grammar in Visual Studio Code with the JavaScript grammar from the Atom editor.

Babel JavaScript: syntax highlighting for ES201x JavaScript, React, FlowType and GraphQL code.

DotENV: syntax highlighting for .env files. Handy if you’re working with Node.

Linter Extensions
Writing JavaScript code efficiently with minimum fuss requires a linter that enforces a specific standard style for all team members. ESLint is the most popular, since it supports many styles including Standard, Google and Airbnb. Here are the most popular linter plugins for Visual Studio Code:

ESLint: this extension integrates ESLint into VS Code. It’s the most popular linter extension, with over 6.7 million installs to date. Rules are configured in .eslintrc.json.

JSHint: a code checker extension for JSHint. Uses .jshintrcfile at the root of your project for configuration.

JavaScript Standard Style: a linter with zero configuration and rigid rules. Enforces the StandardJS Rules.

JSLint: linter extension for JSLint.

If you’d like an overview of available linters and their pros and cons, check out our comparison of JavaScript linting tools.
Node Extensions
Every JavaScript project needs to at least one Node package, unless you’re someone who likes doing things the hard way. Here are a few VS Code extensions that will help you work with Node modules more easily.

npm: uses package.jsonto validate installed packages. Ensures that the installed packages have the correct version numbers, highlights installed packages missing from package.json, and packages that haven’t been installed.

Node.js Modules IntelliSense: autocomplete for JavaScript and TypeScript modules in import statements.

Source: vscode-node-module-intellisense

Path IntelliSense: it’s not really Node related, but you definitely need IntelliSense for local files and this extension will autocomplete filenames.

Node exec: allows you to execute the current file or your selected code with Node.js.

View Node Package: quickly view a Node package source with this extension, which allows you to open a Node package repository/documentation straight from VS Code.

Node Readme: quickly open npm package documentation.

Search node_modules: this extension allows you to search the node_modules folder, which is usually excluded from standard search.

Source: vscode-search-node-modules

Import Cost: displays size of an imported package.

Source: import-cost

The post 10 Must-have VS Code Extensions for JavaScript Developers appeared first on SitePoint.