#Vue.js eslint tutorial | Explore Tumblr posts and blogs

t-baba · 5 years ago

Photo

Underscore.js, React without virtual DOM, and why you should use Svelte

#504 — September 4, 2020

Unsubscribe | Read on the Web

JavaScript Weekly

Underscore.js 1.11.0: The Long Standing Functional Helper Library Goes Modular — “Underscore!?” I hear some of our longer serving readings exclaiming. Yes, it’s still around, still under active development, and still a neat project at a mere 11 years old. As of v1.11.0 every function is now in a separate module which brings treeshaking opportunities to all, but there’s also a monolithic bundle in ES module format for those who prefer that. This article goes into a lot more depth about the new modular aspects.

Jeremy Ashkenas

Mastering the Hard Parts of JavaScript — A currently 17-part blog post series written by someone taking Frontend Masters’ JavaScript: The Hard Parts course and reflecting on the exercises that have helped them learn about callbacks, prototypes, closures, and more.

Ryan Ameri

FusionAuth Now Offers Breached Password Detection and LDAP — FusionAuth is a complete identity and access management tool that saves your team time and resources. Implement complex standards like OAuth, OpenID Connect, and SAML and build out additional login features to meet compliance requirements.

FusionAuth sponsor

How Browsers May Throttle requestAnimationFrame — requestAnimationFrame is a browser API that allows code execution to be triggered before the next available frame on the device display, but it’s not a guarantee and it can be throttled. This post looks at when and why.

Matt Perry

Brahmos: Think React, But Without the VDOM — An intriguing user interface library that supports the modern React API and native templates but with no VDOM.

Brahmos

NativeScript 7.0: Create Native iOS and Android Apps with JS — A signficant step forward for the framework by aligning with modern JS standards and bringing broad consistency across the whole stack. Supports Angular, Vue, and you can even use TypeScript if you prefer.

NativeScript

⚡️ Quick bytes:

🎧 The Real Talk JavaScript podcast interviewed Rich Harris of the Svelte project – well worth a listen if you want to get up to speed with why you should be paying attention to Svelte.

ESLint now has a public roadmap of what they're working on next.

You've got nine more days to develop a game for the current JS13kGames competition, if you're up for it.

VueConfTO (VueConf Toronto) are running a free virtual Vue.js conference this November.

The latest on webpack 5's release plans. Expect a final release in October.

💻 Jobs

Senior JavaScript Developer (Warsaw, Relocation Package) — Open source rich text editor used by millions of users around the world. Strong focus on code quality. Join us.

CKEDITOR

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Designing a JavaScript Plugin System — jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common way to extend the functionality of other tools and libraries and you can roll your own plugin approach too.

Bryan Braun

▶ Making WAVs: Understanding, Parsing, and Creating Wave Files — If you’ve not watched any of the Low Level JavaScript videos yet, you’re missing a treat. But this is a good place to start, particularly if the topic of working with a data format at a low level appeals to you.

Low Level JavaScript

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

The New Logical Assignment Operators in JavaScript — Logical assignment operators combine logical operators (e.g. ||) and assignment expressions. They're currently at stage 4.

Hemanth HM

Eight Methods to Search Through JavaScript Arrays

Joel Thoms

TypeScript 4.0: What I’m Most Excited About — Fernando seems particularly enthused about the latest version of TypeScript!

Fernando Doglio

Machine Learning for JavaScript Devs in 10 Minutes — Covers the absolute basics but puts you in a position to move on elsewhere.

Allan Chua

How to Refactor a Shopify Site for JavaScript Performance

Shopify Partners sponsor

'TypeScript is Weakening the JavaScript Ecosystem' — Controversial opinion alert, but we need to balance out the TypeScript love sometime.

Tim Daubenschütz

▶ Why I’m Using Next.js in 2020 — Lee makes the bold claim that he thinks “the future of React is actually Next.js”.

Lee Robinson

Building a Component Library with React and Emotion

Ademola Adegbuyi

Tackling TypeScript: Upgrading from JavaScript — You’ll know Dr. Axel from Deep JavaScript and JavaScript for Impatient Programmers.. well now he’s tackling TypeScript and you can read the first 11 chapters online.

Dr. Axel Rauschmayer

Introducing Modular Underscore — Just in case you missed it in the top feature of this issue ;-)

Julian Gonggrijp

🔧 Code & Tools

CindyJS: A Framework to Create Interactive Math Content for the Web — For visualizing and playing with mathematical concepts with things like mass, springs, fields, trees, etc. Lots of live examples here. The optics simulation is quite neat to play with.

CindyJS Team

Print.js: An Improved Way to Print From Your Apps and Pages — Let’s say you have a PDF file that would be better to print than the current Web page.. Print.js makes it easy to add a button to a page so users can print that PDF directly. You can also print specific elements off of the current page.

Crabbly

AppSignal Is All About Automatic Instrumentation and Ease of Use — AppSignal provides you with automatic instrumentation for Apollo, PostgreSQL, Redis, and Next.js. Try us out for free.

AppSignal sponsor

Volt: A Bootstrap 5 Admin Dashboard Using Only Vanilla JS — See a live preview here. Includes 11 example pages, 100+ components, and some plugins with no dependencies.

Themesberg

Stencil 2.0: A Web Component Compiler for Building Reusable UI Components — Stencil is a toolchain for building reusable, scalable design systems. And while this is version 2.0, there are few breaking changes.

Ionic

NgRx 10 Released: Reactive State for Angular

ngrx

🆕 Quick releases:

Ember 3.21

Terser 5.3 — JS parser, mangler and compressor toolkit.

Cypress 5.1 — Fast, reliable testing for anything that runs in a browser.

jqGrid 5.5 — jQuery grid plugin.

np 6.5 — A better npm publish

underscore 1.11.0 — JS functional helpers library.

by via JavaScript Weekly https://ift.tt/3i0cc0z

#Javascript Branding #Javascript Weekly

0 notes

qwertsypage · 5 years ago

Text

Auth0: Vue & TypeScript Quickstart SDK - The Missing Docs

Authentication is hard. Even if you know the ins and outs of it, handling registration, login, email verification, forgotten password, secret rotation... and what not... is a tedious work.

For this reason, we use auth providers such as AWS Cognito or Auth0. But this comes with its own drawback, namely that you are at the provider's mercy when it comes to examples and tutorials. If a resource you need does not exist, you either need to contact support and wait for them (but nobody got time for that), or figure it out yourself by the good ol' trial and error method.

A couple of days ago, I had to use Auth0 with Vue.js and TypeScript. Now, Auth0 has an excellent tutorial for Vue.js, but I could not find any examples in TypeScript. So seeing no better option, I started annotating the code provided by the tutorial.

I finished it, and in this blogpost, I'll walk you through the details, so you don't have to repeat this chore.

We will follow the original Auth0 Vue tutorial structure which can be found here. To make it easier to compare the two, we'll use the exact same first-level headings as the original.

You can find my complete auth0 vue typescript repo on RisingStack's Github.

Configure Auth0

First, you'll need to set up your Auth0 application. That part is very well written in the original tutorial, and I would like to be neither repetitive nor plagiarize Auth0's content, so please go ahead and read the first section there, then come back.

Create a Sample Application

Now we already start to diverge from the Auth0 tutorial.

If you already have an existing app, make sure that typescript, vue-class-component, and vue-property-decorator are present in your package.json, as we'll use class components.

If you don't have one, let's create a sample app.

$ vue create auth0-ts-vue

When prompted, select Manually select features.

We'll need Babel, TypeScript, and Router.

The next 3 questions are about deciding whether you want to use class-style component syntax, Babel, and history mode. Hit enter for all three to answer "Yes". You might opt-out from history mode if you really want to.

It is entirely up to you if you want to use dedicated config files or not, and if you want to save this as a preset.

Grab a beverage of your preference while the dependencies are being installed.

Install the SDK

Once it's done, we need to install our auth0 dependencies.

$ cd auth0-ts-vue-example $ npm install @auth0/auth0-spa-js

The auth0-spa-js package comes with its own type definitions, so we're all set for now.

Modify your Webpack Config

If you followed the original Auth0 tutorials configuration part, you've set up your URLs to listen at port 3000. Time to hard code this into our webpack dev-server.

Create a vue.config.js file in the root directory of your app.

const webpack = require('webpack') module.exports = { devServer: { port: 3000 } }

This way, we don't have to specify the PORT env var when we run our app. We'd need to change it in Auth0 anyway all the time, while we're developing it.

Start the application

$ npm run serve

Leave it running so we can leverage Webpack's incremental build throughout the process.

Create an Authentication Wrapper

Have you ever created a Vue.js plugin? Well, now is the time!

The easiest way to use Auth0 in your app is to make it available on this in each of your components, just as you do with $route after you've installed Vue Router.

It would be nice if this was a separate dependency, but for the sake of simplicity, let it live inside our codebase.

Create a directory called auth inside your src dir then create the following files: index.ts auth.ts, VueAuth.ts, User.ts. The original tutorial has them all in one file. Still, in my opinion, it is easier to understand what's happening if we separate the matters a bit, and it also results in nicer type definitions too.

Our index.ts will be a simple barrel file.

export * from './auth'

auth.ts is where we define the plugin. VueAuth.ts is a wrapper Vue object around auth0-spa-js, so we can leverage the observability provided by Vue, and User.ts is a class to make its type definition nicer.

Defining our User

Let's go from the inside out and take a look at User.ts

import { camelCase } from 'lodash' export class User { sub: string names: string nickname: string picture: string updatedAt: string email: string emailVerified: boolean provider?: string id?: string givenName?: string familyName?: string locale?: string [key: string]: string | boolean | undefined constructor (auth0User: { [key: string]: string | boolean | undefined }) { if (!auth0User) return for (const key in auth0User) { this[key] = auth0User[key] } this.sub = auth0User.sub as string this.provider = this.sub.split('|')[0] this.id = this.sub.split('|')[1] } }

Now, this requires a bit of explanation. The first block of fields are the one that are always present, no matter what login scheme the user used. Sub is the OpenID ID Token's Subject Identifier, which contains the authentication provider (eg. auth0 or google) and the actual user id, separated by a |. The other mandatory fields are probably self-explanatory.

Next are provider and id, which are a result of splitting sub, so they should be there, but we cannot be sure. The last are the ones that were only present when Google OAuth is used as the provider. There might be more, depending on what connections you set up and what other data you request. Or you could even code custom fields in the returned ID Token... but I digress.

Last we tell TypeScript, that we want to be able to use the bracket notation on our object by adding [key: string]: any

Our constructor takes a raw user object with similar fields but snake_cased. That's why we camelCase them and assign each of them to our User object. Once we're done, we extract the provider and the id from the subfield.

Show me the Wrapper

Time to take a look at VueAuth.ts

import { Vue, Component } from 'vue-property-decorator' import createAuth0Client, { PopupLoginOptions, Auth0Client, RedirectLoginOptions, GetIdTokenClaimsOptions, GetTokenSilentlyOptions, GetTokenWithPopupOptions, LogoutOptions } from '@auth0/auth0-spa-js' import { User } from './User' export type Auth0Options = { domain: string clientId: string audience?: string [key: string]: string | undefined } export type RedirectCallback = (appState) => void @Component({}) export class VueAuth extends Vue { loading = true isAuthenticated? = false user?: User auth0Client?: Auth0Client popupOpen = false error?: Error async getUser () { return new User(await this.auth0Client?.getUser()) } /** Authenticates the user using a popup window */ async loginWithPopup (o: PopupLoginOptions) { this.popupOpen = true try { await this.auth0Client?.loginWithPopup(o) } catch (e) { console.error(e) this.error = e } finally { this.popupOpen = false } this.user = await this.getUser() this.isAuthenticated = true } /** Authenticates the user using the redirect method */ loginWithRedirect (o: RedirectLoginOptions) { return this.auth0Client?.loginWithRedirect(o) } /** Returns all the claims present in the ID token */ getIdTokenClaims (o: GetIdTokenClaimsOptions) { return this.auth0Client?.getIdTokenClaims(o) } /** Returns the access token. If the token is invalid or missing, a new one is retrieved */ getTokenSilently (o: GetTokenSilentlyOptions) { return this.auth0Client?.getTokenSilently(o) } /** Gets the access token using a popup window */ getTokenWithPopup (o: GetTokenWithPopupOptions) { return this.auth0Client?.getTokenWithPopup(o) } /** Logs the user out and removes their session on the authorization server */ logout (o: LogoutOptions) { return this.auth0Client?.logout(o) } /** Use this lifecycle method to instantiate the SDK client */ async init (onRedirectCallback: RedirectCallback, redirectUri: string, auth0Options: Auth0Options) { // Create a new instance of the SDK client using members of the given options object this.auth0Client = await createAuth0Client({ domain: auth0Options.domain, client_id: auth0Options.clientId, // eslint-disable-line @typescript-eslint/camelcase audience: auth0Options.audience, redirect_uri: redirectUri // eslint-disable-line @typescript-eslint/camelcase }) try { // If the user is returning to the app after authentication.. if ( window.location.search.includes('error=') || (window.location.search.includes('code=') && window.location.search.includes('state=')) ) { // handle the redirect and retrieve tokens const { appState } = await this.auth0Client?.handleRedirectCallback() ?? { appState: undefined } // Notify subscribers that the redirect callback has happened, passing the appState // (useful for retrieving any pre-authentication state) onRedirectCallback(appState) } } catch (e) { console.error(e) this.error = e } finally { // Initialize our internal authentication state when the page is reloaded this.isAuthenticated = await this.auth0Client?.isAuthenticated() this.user = await this.getUser() this.loading = false } } }

It might make sense to compare this with the original tutorial.

In the original tutorial, a Vue object is created while we're creating a class to make its annotation easier. There you can find it as:

// The 'instance' is simply a Vue object instance = new Vue({ ... })

Now let's unpack it.

First, we need to import a couple of types, including our User class.

Then we create the Auth0Options and RedirectCallback type aliases for convenience.

Instead of creating a simple Vue object, we define a Class Component. The public fields are the same as the data object in the original, whereas the static ones are the parameters passed to the plugin.

We differ in two substantial way from the original tutorial:

We have one less method: handleRedirectCallback is not used anywhere in the original, so we omitted it.

Instead of setting up the Auth0 Client in the Vue object's created hook, we use a separate method called init. Aside from that, the contents of the two are identical.

The reason for using a separate method is simple: The created hook is used in place of a constructor when it comes to Class Components, as the constructor of the class is usually called by Vue.

First, a component object is created just like when using Vue({}), passing it the data, methods, watchers, paramlist, and all the things we usually define for components. When this is done, the created hook is called. Later, when the component is actually used and rendered, the params are passed to it, and mounted, or updated.

The problem with the original one is that we cannot pass parameters to the created method. Neither can we write a proper constructor. So we need to have our own method we will call right after the object is instantiated just as it's done with created by Vue.

Let's dissect init a bit.

First, we create and auth0Client.

Then, in the try-catch block, we check if the user is returning after authentication and handle it. We check if the query params contain any signs of redirection. If they do, we call auth0Client.handleRedirectCallback, which parses the URL and either rejects with an error or resolves with and appState.

Then, we pass on the appState to onRedirectCallback. This is a function we can pass to the plugin when we install it to Vue, so we can handle the app level ramifications of a login.

For the other methods, getUser is a simple wrapper around the authClient's getUser method. We pass on the resolved promise to our User's constructor to create a nicely looking User object.

Next, there is loginWithPopup, which we won't use, as popups can be blocked by browsers. So we'll go with the redirect way, where the user is redirected to Auth0, login, then the callback URL is called by Auth0 passing information to our app in the callback URL's query.

The information in the URL is parsed by auth0Client.handleRedirectCallback which will return a Promise<RedirectCallbackResult>. The Promise will be rejected if there is an error in the authentication flow.

We have a couple of simple wrappers around the auth0Client. loginWithRedirect initiates the flow I described above, logout speaks for itself.

Finally, we set up the user and check if we're authenticated.

Let's turn this into a Plugin

Now, all we need to do is create a proper plugin.

If you take a look at Vue's documentation about plugins, you'll see that we need to create an object that exposes an install method. This method will be called when we pass the object to Vue.use and it will receive the Vue constructor and optionally... options.

type Auth0PluginOptions = { onRedirectCallback: RedirectCallback, redirectUri: string, domain: string, clientId: string, audience?: string, [key: string]: string | RedirectCallback | undefined } export const Auth0Plugin = { install (Vue: VueConstructor, options: Auth0PluginOptions) { Vue.prototype.$auth = useAuth0(options) } }

In our install method, we add an $auth member to any Vue object, so the VueAuth object is available everywhere, just as vue-router is.

Let's implement the useAuth function.

/** Define a default action to perform after authentication */ const DEFAULT_REDIRECT_CALLBACK = () => window.history.replaceState({}, document.title, window.location.pathname) let instance: VueAuth /** Returns the current instance of the SDK */ export const getInstance = () => instance /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */ export const useAuth0 = ({ onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, redirectUri = window.location.origin, ...options }) => { if (instance) return instance // The 'instance' is simply a Vue object instance = new VueAuth() instance.init(onRedirectCallback, redirectUri, options as Auth0Options) return instance }

useAuth returns a singleton VueAtuh instance, and extracts the onRedirectCallback and redirectUri from the options object. What's left is an Auth0Options type which we'll pass on straight to the auth0Client.

You can see the init method in action we created earlier. Then VueAuth is instantiated if it hasn't been already. Above that, we also expose a getInstance function, in case we need to use it outside of a Vue component.

Let's see here the whole auth.ts for your copy-pasting convenience:

import { VueConstructor } from 'vue' import { VueAuth, Auth0Options, RedirectCallback } from './VueAuth' type Auth0PluginOptions = { onRedirectCallback: RedirectCallback, domain: string, clientId: string, audience?: string, [key: string]: string | RedirectCallback | undefined } /** Define a default action to perform after authentication */ const DEFAULT_REDIRECT_CALLBACK = (appState) => window.history.replaceState({}, document.title, window.location.pathname) let instance: VueAuth /** Returns the current instance of the SDK */ export const getInstance = () => instance /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */ export const useAuth0 = ({ onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, redirectUri = window.location.origin, ...options }) => { if (instance) return instance // The 'instance' is simply a Vue object instance = new VueAuth() instance.init(onRedirectCallback, redirectUri, options as Auth0Options) return instance } // Create a simple Vue plugin to expose the wrapper object throughout the application export const Auth0Plugin = { install (Vue: VueConstructor, options: Auth0PluginOptions) { Vue.prototype.$auth = useAuth0(options) } }

As you can see, we're extending the Vue constructor with a new instance member. If we try to access it in a component, the TypeScript compiler will start crying as it has no idea what happened. We'll fix this a bit later down the line.

Now, the Auth0Options are the ones that are needed for the client to identify your tenant. Copy the Client ID and Domain from your Auth0 applications settings and store them in a file called auth.config.json for now. It would be nicer to inject them as environment variables through webpack, but as these are not sensitive data, we'll be just fine like that as well.

With all that said, I will not include my auth.config.json in the reference repo, only an example you'll need to fill in with your data.

{ "domain": "your tenant's domain", "clientId": "your app's clientId" }

Make sure to add "resolveJsonModule": true, to your tsconfig.json.

Finally, we're ready to create our main.ts.

import Vue from 'vue' import App from './App.vue' import router from './router' import { Auth0Plugin } from './auth' import { domain, clientId } from '../auth.config.json' Vue.use(Auth0Plugin, { domain, clientId, onRedirectCallback: (appState) => { router.push( appState && appState.targetUrl ? appState.targetUrl : window.location.pathname ) } }) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')

The onRedirectCallback redirects the user to a protected route after they have authenticated. We'll cover this a bit later when we create an actual protected route.

Time to put the authentication logic to use.

First, we'll add a Login / Logout button to Home.vue

We'll also need to update the logic in the script tag of Home

First, we turn the original example component into a Class Component. Second, the methods simply call the methods of VueAuth exposed by our Auth0Plugin.

But what's that? this.$auth is probably underlined in your IDE. Or if you try to compile the code you'll get the following error:

Of course, we still have to tell the compiler that we have augmented the Vue constructor with our $auth member.

Let's create a shims-auth0.d.ts file in our src directory. If you're using VSCode, you might need to reload the window to make the error go away.

import { VueAuth } from './auth/VueAuth' declare module 'vue/types/vue' { interface Vue { $auth: VueAuth } }

Checkpoint

Now, let's try to compile our code. If you have configured your Auth0 credentials correctly, you should be redirected to the Auth0 Universal Login page when you click Login, and back to your app against once you have logged in.

Then, you should be able to click Log out and have the application log you out.

Display the User's Profile

So far so good, but let's try to create a protected route. Displaying the user's profile seems like a prime target for that.

Let's create a file called Profile.vue in src/views.

That's it. We read all the information we need from $auth.user we've already set up in VueAuth.ts.

Add a route to the Profile component

Let's update the app's routing configuration, so the users can access their profile.

Open up src/router/index.ts and add the following to the routes array.

//.. other imports // NEW - Import the profile component import Profile from "../views/Profile.vue"; Vue.use(VueRouter) const routes: Array<RouteConfig> = [ routes: [ // .. other routes and pages .. // NEW - add the route to the /profile component { path: "/profile", name: "profile", component: Profile } ] }); export default router

Now we need to update the navigation bar in App.vue

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> <span v-if="$auth.isAuthenticated"> | <router-link to="/profile">Profile</router-link> </span> </div> <router-view/> </div> </template>

Checkpoint

The code should compile, so let's check if we can navigate to the Profile page and see the data. For added profit, try logging in with both Google and register a username and password. Take note of the data you get.

Secure the Profile Page

We have the route, time to make it protected. Let's create a new file in src/auth called authGaurd.ts.

import { getInstance } from './auth' import { NavigationGuard } from 'vue-router' export const authGuard: NavigationGuard = (to, from, next) => { const authService = getInstance() const fn = () => { // Unwatch loading unwatch && unwatch() // If the user is authenticated, continue with the route if (authService.isAuthenticated) { return next() } // Otherwise, log in authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } }) } // If loading has already finished, check our auth state using `fn()` if (!authService.loading) { return fn() } // Watch for the loading property to change before we check isAuthenticated const unwatch = authService.$watch('loading', (loading: boolean) => { if (loading === false) { return fn() } }) }

First, we put auth.ts's getInstance to use. Then we create a function that checks if the user is authenticated. If they are, we call next, otherwise redirect them to login.

However, we should only call this function, if the authService is not loading, as otherwise, we still don't have any settled information about the login process.

If it is still loading, we set up a watcher for authService.loading, so when it turns true, we call our guard function. Also, please notice that we use the unwatch function returned by $watch to clean up after ourselves in fn.

I personally prefer giving descriptive names to my functions, but I only wanted to change things for the sake of either type annotation, or stability, so forgive me for keeping fn as it is to maintain parity with the JS tutorial.

Guidance with Auth0, Vue & TypeScript

Auth0 and all other authentication providers relieve us from the tedious job of handling user management ourselves. Auth0 itself excels in having a lot of educational resources for their users. The original Vue tutorial was really helpful, but seeing that TypeScript is becoming the industry standard when it comes to writing anything that should be run by JavaScript runtimes, it would be nice to see more TypeScript tutorials.

I hope this article manages to fill in a bit of this gap. If you liked what you just read, please share it with those who might need guidance with Auth0, Vue & TypeScript!

Happy authenticating!

Auth0: Vue & TypeScript Quickstart SDK - The Missing Docs published first on https://koresolpage.tumblr.com/

0 notes

413-request-entity-too-large · 6 years ago

Text

Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita

はじめに

Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。

UIライブラリとしてReact

型のある言語としてTypeScript

スタイル定義としてstyled-components

コンポーネントの開発環境としてStorybook

LinterとしてESLint

FormatterとしてPrettier

この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。

各種ライブラリの紹介

まず、各ライブラリがどのようなものなのかを簡単に紹介します。

ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。

React

ドキュメント

ReactはUI(ボタンやフォームなど)コンポーネントを作成するためのJavaScriptライブラリです。似た立ち位置として、Vue.jsが上げられることも多いと思います。

公式ドキュメントが非常に充実しているので、初めての方は、Tutorialをやってみるのが良さそうです。

TypeScript

ドキュメント

TypeScriptは型を持ったJavaScriptのスーパーセットとして人気なプログラミング言語です。コンパイルすると、JavaScriptのソースコードになります。

公式ドキュメント以外に、TypeScript Deep Diveが情報量が多く、分かりやすいと思います。

styled-components

ドキュメント

styled-componentsは、 CSSとほぼ同様のシンタックスを使ってスタイリングされたReactコンポーネントを作成できるライブラリです。 .cssファイルにCSSを書くのではなく、.jsや.tsxファイル内でCSSを書くようなイメージです。

公式ドキュメントを参照しながら、使ってみるのが良いと思います。

Storybook

ドキュメント

Storybookは、UIコンポーネントをアプリケーションとは独立した環境で開発できるツールです。静的サイトとしてビルドすることで、コンポーネントのカタログとしても利用できます。

React用のチュートリアルも用意されています。

ESLint

ドキュメント

ESLintはJavaScriptのLinterです。 Linterを使うことで、コードの一貫性を高め、バグを未然に防げる可能性が高まります。

@typescript-eslint/eslint-pluginを使うことで、TypeScriptでも利用可能です。

Prettier

ドキュメント

Prettierはフロントエンド開発において人気なコードフォーマッターです。 JavaScriptをはじめとした複数の言語をサポートしています。

Prettierを使うことで、コードのフォーマットを意識することなく統一することができます。

環境構築

GitHubでリポジトリの作成から各種ライブラリのインストール、設定ファイルの作成などを行います。

最終的に、以下の事ができたらOKです。

npm run storybook: Storybookを起動して、React+TypeScript+styled-componentsで作成したコンポーネントが表示できる

npm run lint: ESLint + Prettierを使ってコードのチェックが行える

npm run tsc: TypeScriptのコードに対してコンパイルチェックが行える

Step0 事前準備

npm/Node.js/gitがインストールされていることを確認してください。

$ git --version git version 2.20.1 (Apple Git-117) $ node -v v12.4.0 $ npm -v 6.9.0

バージョンを揃える必要はありませんが、必要に応じてLTSまたは最新版を利用するようにしましょう。

Step1 リポジトリの作成/git clone/gitignore

GitHubで今回作業をするリポジトリを作成しましょう。

新しいリポジトリを作成

リポジトリを作成後は、そのリポジトリをクローンしておいてください。

また、好きなgitignoreをリポジトリに配置しておきます。

例） Node.gitignoreを利用する場合

$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore $ mv Node.gitignore .gitignore

これでリポジトリの準備は整いました！

Step2 package.jsonを作成する

npmのinitコマンドを使って、package.jsonの雛形を作成しましょう。

$ npm init -y

Wrote to /dev/github.com/toshi-toma/todo-app-react/package.json:

{ "name": "todo-app-react", "version": "1.0.0", "description": "A Todo Application built with React, styled-components, TypeScript, E SLint, Prettier, and Storybook", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+ssh://[email protected]/toshi-toma/todo-app-react.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/toshi-toma/todo-app-react/issues" }, "homepage": "https://github.com/toshi-toma/todo-app-react#readme" }

npmのCLIには便利なコマンドがたくさん用意されています。ドキュメントをさっと見るだけでも面白いと思います。

Step3 Reactでコンポーネントを作成して、Storybookに表示する

Reactでコンポーネントを作成して、そのコンポーネントをStorybookに表示して動作や見た目を確認していくとスムーズな開発が行えます。

まずはReactとstyled-componentsでシンプルなコンポーネントを作成してみましょう。

必要なライブラリをインストールします。

$ npm i react react-dom styled-components ... + [email protected] + [email protected] + [email protected] added 11 packages from 12 contributors, updated 2 packages and audited 31753 packages in 5.34s

Reactとstyled-componentsでシンプルなボタンを作成してみましょう。

src/index.js

import React from "react"; import styled from "styled-components";

const Button = styled.button` background-color: #454545; color: #fff; `;

const SimpleButton = () => <Button>button</Button>; // 省略可能

export default SimpleButton;

次に、作成したボタンをStorybookで表示しましょう。

Googleで「Storybook React」と検索するとStorybook for Reactというタイトルの公式ドキュメントが出てくると思います。

Storybook for React

ドキュメントを読むと、Automatic setupコマンドが用意されているようです。

実行してみましょう。

$ npx -p @storybook/cli sb init --type react

...

+ @storybook/[email protected] + @storybook/[email protected] + @babel/[email protected] + [email protected] + @storybook/[email protected] + @storybook/[email protected] added 1147 packages from 843 contributors and audited 31533 packages in 41.347s

...

• Installing dependencies. ✓

To run your storybook, type:

npm run storybook

For more information visit: https://storybook.js.org

これでStorybookの環境構築及びReactコンポーネントを表示する準備が整いました！簡単ですね。

npm run storybookを実行するとStorybookが表示されると思います。

あとは、先程作成したボタンをStorybookに表示しましょう。

stories/index.stories.js

import React from 'react';

import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions';

import Button from '../src/index';

storiesOf('Button', module) .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);

無事にReactとstyled-componentsで作成したコンポーネントをStorybookに表示することができました🎉

Step4 TypeScriptでコンポーネントを作成して、Storybookに表示する

次はReactとstyled-componentsに加えてTypeScriptを使ってコンポーネントを作成して、そのコンポーネントをStorybookに表示します。

まずはStep3で作成したコンポーネントをTypeScript化しましょう。

必要なライブラリをインストールします。 TypeScriptに加えて、型情報もインストールします。

$ npm i -D typescript $ npm i -D @types/{react,react-dom,styled-components}

+ @types/[email protected] + @types/[email protected] + @types/[email protected]

TypeScriptの設定ファイルの雛形をtscコマンドで作成します。

$ npx tsc --init message TS6071: Successfully created a tsconfig.json file.

tsconfig.jsonというファイルが作成されたので、React用に編集します。

tsconfig.json

{ "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es2018", "dom"], "jsx": "react", "strict": true, "rootDirs": [ "src" ], "types": [ "react" ], "esModuleInterop": true }, "include": [ "./src/**/*" ], "exclode": [ "node_modules/" ] }

これでTypeScriptを使う準備が整ったので、コンポーネントをTypeScriptで書き換えてみます。

ReactとTypeScriptを使う場合のコンポーネントファイルの拡張子は.tsxになります。

mv src/index.js src/index.tsx

src/index.tsx

import React, { FC } from "react"; import styled from "styled-components";

const Button = styled.button` background-color: #454545; color: #fff; `;

interface Props { onClick: () => void; }

const SimpleButton: FC<Props> = () => <Button>Done</Button>;

export default SimpleButton;

最後に書き換えたコンポーネントをStorybookで表示します。

TypeScriptを使う場合、別途Storybookの設定が必要です。

必要な設定については、公式ドキュメントが用意されています。

ドキュメントを読むと、必要な設定が@storybook/preset-typescriptとして用意されているので、これを利用します。

必要なライブラリをインストールしましょう。

$ npm i -D @storybook/preset-typescript react-docgen-typescript-loader ts-loader $ npm i -D @types/{storybook__addon-actions,storybook__react}

...

+ [email protected] + [email protected] + @storybook/[email protected]

...

+ @types/[email protected] + @types/[email protected]

npm i -D xxxを実行したログに以下のようなWarningが表示されていると思います。

...

npm WARN @storybook/[email protected] requires a peer of @types/webpack@* but none is installed. You must install peer dependencies yourself

...

@storybook/[email protected]は@types/webpack@*をpeer dependencyとしているようです。

@storybook/preset-typescriptのリポジトリを開いて、package.jsonを見てみましょう。

preset-typescript/package.json

... "peerDependencies": { "@types/webpack": "*", "react-docgen-typescript-loader": "*", "ts-loader": "*" }

peerDependenciesとして@types/webpackが指定されているので、インストールしておきましょう。

$ npm i -D @types/webpack + @types/[email protected]

あとは.storybook/presets.jsを作成して、.storybook/presets.jsと.storybook/config.jsを以下のように編集するだけです。

presets.js

module.exports = ["@storybook/preset-typescript"];

config.js

import { configure } from '@storybook/react'; // automatically import all files ending in *.stories.js - const req = require.context('../stories', true, /\.stories\.js$/); + const req = require.context('../src', true, /\.stories\.tsx$/); function loadStories() { req.keys().forEach(filename => req(filename)); }

configure(loadStories, module);

storiesファイルの拡張子も.jsから.tsxに変更しましょう。

$ mkdir src/stories $ mv stories/index.stories.js src/stories/index.stories.tsx $ rm -rf stories

npm run storybookでコンポーネントが表示されたら成功です🎉

また、TypeScriptで書いたコードはコンパイルを実行することで静的型付けによる型チェックを行えます。

型チェックを行なうnpm scriptsを追加しておきましょう。

package.json

"scripts": { ... + "tsc": "tsc --noEmit",

ここまでの作業によるpackage.jsonの差分を出しておきます。

...

"description": "A Todo Application built with React, styled-components, TypeScript, ESLint, Prettier, and Storybook", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "tsc": "tsc --noEmit", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "repository": { "type": "git", @@ -16,5 +18,28 @@ "bugs": { "url": "https://github.com/toshi-toma/todo-app-react/issues" }, - "homepage": "https://github.com/toshi-toma/todo-app-react#readme" + "homepage": "https://github.com/toshi-toma/todo-app-react#readme", + "dependencies": { + "react": "^16.9.0", + "react-dom": "^16.9.0", + "styled-components": "^4.3.2" + }, + "devDependencies": { + "@babel/core": "^7.5.5", + "@storybook/addon-actions": "^5.1.10", + "@storybook/addon-links": "^5.1.10", + "@storybook/addons": "^5.1.10", + "@storybook/preset-typescript": "^1.1.0", + "@storybook/react": "^5.1.10", + "@types/react": "^16.9.1", + "@types/react-dom": "^16.8.5", + "@types/storybook__addon-actions": "^3.4.3", + "@types/storybook__react": "^4.0.2", + "@types/styled-components": "^4.1.18", + "@types/webpack": "^4.32.1", + "babel-loader": "^8.0.6", + "react-docgen-typescript-loader": "^3.1.1", + "ts-loader": "^6.0.4", + "typescript": "^3.5.3" + } }

Step5 ESLintとPrettierでLintとFormatを導入する

TypeScriptのコードをESLintでLint、PrettierでFormatできるようにしましょう。

今回は手順をいくつか省略できるように、npmで公開されているeslint-configを利用します。ここで利用するルールは自分の好みに応じてカスタマイズしてOKです。

npmの検索窓で「eslint typescript prettier」と検索してみましょう。

以下の手順では、airbnbが提供しているeslint-config-airbnbとTypeScript、Prettierのサポートが入ったeslint-config-airbnb-typescript-prettierを利用します。

eslint-config-airbnb-typescript-prettier

パッケージのページに書いてある説明を参考に、必要なライブラリをインストールします。

$ npm i -D eslint@^5.3.0 prettier@^1.18.2 eslint-config-airbnb-typescript-prettier + [email protected] + [email protected] + [email protected] added 106 packages from 69 contributors and audited 32518 packages in 10.364s

次にESLintの設定ファイルである.eslintrc.jsを作成して、以下のように設定を書きます。

.eslintrc.js

module.exports = { extends: "airbnb-typescript-prettier" };

ESLintの設定が終わったら、npm scriptsを追加しておきましょう。

package.json

"scripts": { + "lint": "eslint --ext .ts,.tsx src/", + "lint:fix": "eslint --ext .ts,.tsx src/ --fix",

これで次からnpm run lintを実行することで、srcディレクトリ以下のTypeScriptファイルに対してLintとFormatチェックが実行されます。

$ npm run lint

> eslint --ext .ts,.tsx src/

/dev/github.com/toshi-toma/todo-app-react/src/index.tsx 15:23 error Insert `⏎` prettier/prettier

/dev/github.com/toshi-toma/todo-app-react/src/stories/index.stories.tsx 1:19 error Replace `'react'` with `"react"` prettier/prettier 3:1 error '@storybook/react' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

....

✖ 8 problems (8 errors, 0 warnings) 6 errors and 0 warnings potentially fixable with the `--fix` option.

FormatやいくつかのLintエラーは自動で修正が可能です。

npm run lint:fixを実行してみましょう。

$ npm run lint:fix

> [email protected] lint:fix /dev/github.com/toshi-toma/todo-app-react > eslint --ext .ts,.tsx src/ --fix

/dev/github.com/toshi-toma/todo-app-react/src/stories/index.stories.tsx 3:1 error '@storybook/react' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies 4:1 error '@storybook/addon-actions' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

✖ 2 problems (2 errors, 0 warnings)

自動で修正されました🎉

... should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependenciesとエラーがでています。

ESLintの設定は必要に応じて調整しましょう。

以下のように設定を変更することで、エラーが直るはずです。

.eslintrc.js

module.exports = { extends: "airbnb-typescript-prettier", rules: { "import/no-extraneous-dependencies": ["error", { devDependencies: ["**/*.stories.tsx"], peerDependencies: false }] } };

Step6 VSCodeでファイル保存時に自動でフォーマットする

最後に、エディタにVSCodeを利用している人を想定して、ファイル保存時にフォーマットエラーなどの自動修正を行えるようにします。

まず、VSCodeのExtensionsでVSCode ESLintをインストールしておきましょう。

あとは、以下のように.vscode/settings.jsonを修正します。

{ "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ] }

さいごに

これで

React+styled-components+TypeScriptでコンポーネントを開発

作成したコンポーネントはStorybookで動作確認

適宜ESLintやPrettierを利用してコーディングを行い、ファイル保存時に自動で修正

が行えるようになり、環境構築終了です🎉

実際にWebアプリを開発する場合、webpackやwebpack-dev-serverなどをインストールして、設定をする必要があります。それについては余裕があれば別途追記します🙏

0 notes

mbaljeetsingh · 7 years ago

Text

Build a Basic CRUD App with Vue.js and Node

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible.

I’ve danced the JavaScript framework shuffle for years starting with jQuery, then on to Angular. After being frustrated with Angular’s complexity, I found React and thought I was in the clear. What seemed simple on the surface ended up being a frustrating mess. Then I found Vue.js. It just felt right. It worked as expected. It was fast. The documentation was incredible. Templating was eloquent. There was a unanimous consensus around how to handle state management, conditional rendering, two-way binding, routing, and more.

This tutorial will take you step by step through scaffolding a Vue.js project, offloading secure authentication to Okta’s OpenID Connect API (OIDC), locking down protected routes, and performing CRUD operations through a backend REST API server. This tutorial uses the following technologies but doesn’t require intimate knowledge to follow along:

Vue.js with vue-cli, vue-router, and Okta Vue SDK

Node with Express, Okta JWT Verifier, Sequelize, and Epilogue

About Vue.js

Vue.js is a robust but simple Javascript framework. It has one of the lowest barriers to entry of any modern framework while providing all the required features for high performance web applications.

This tutorial covers two primary builds, a frontend web app and backend REST API server. The frontend will be a single page application (SPA) with a homepage, login and logout, and a posts manager.

Okta’s OpenID Connect (OIDC) will handle our web app’s authentication through the use of Okta’s Vue SDK. If an unauthenticated user navigates to the posts manager, the web app should attempt to authenticate the user.

The server will run Express with Sequelize and Epilogue. At a high level, with Sequelize and Epilogue you can quickly generate dynamic REST endpoints with just a few lines of code.

You will use JWT-based authentication when making requests from the web app and Okta’s JWT Verifier in an Express middleware to validate the token. Your app will expose the following endpoints which all require requests to have a valid access token.

- GET /posts - GET /posts/:id - POST /posts - PUT /posts/:id - DELETE /posts/:id

Create Your Vue.js App

To get your project off the ground quickly you can leverage the scaffolding functionality from vue-cli. For this tutorial, you are going to use the progressive web app (PWA) template that includes a handful of features including webpack, hot reloading, CSS extraction, and unit testing.

If you’re not familiar with the tenets of PWA, check out our ultimate guide to progressive web applications.

To install vue-cli run:

npm install -g vue-cli

Next, you need to initialize your project. When you run the vue init command just accept all the default values.

vue init pwa my-vue-app cd ./my-vue-app npm install npm run dev

Point your favorite browser to http://localhost:8080 and you should see the fruits of your labor:

Extra Credit: Check out the other templates available for vue-cli.

Install Bootstrap

Let’s install bootstrap-vue so you can take advantage of the various premade components (plus you can keep the focus on functionality and not on custom CSS):

npm i --save bootstrap-vue bootstrap

To complete the installation, modify ./src/main.js to include bootstrap-vue and import the required CSS files. Your ./src/main.js file should look like this:

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })

Add Authentication with Okta

Dealing with authentication in a web app is the bane of every developer’s existence. That’s where Okta comes in to secure your web applications with minimal code. To get started, you will need to create an OIDC application in Okta. Sign up for a forever-free developer account (or log in if you already have one).

Once logged in, create a new application by clicking “Add Application”.

Select the “Single-Page App” platform option.

Continue reading %Build a Basic CRUD App with Vue.js and Node%

via SitePoint https://ift.tt/2v898vv

#IFTTT #Feedly

0 notes

t-baba · 5 years ago

Photo

TC39 needs your help with the future of time in JavaScript

#496 — July 10, 2020

Unsubscribe | Read on the Web

JavaScript Weekly

Temporal, a Future API for Dates and Times in JavaScript — TC39 seeks your help with the future of JavaScript! They’re working on a proposal for a modern date/time API for ECMAScript/JS. Check out these examples for a feel of what the API would give us. You’re encouraged to have a play and fill out this survey.

The Temporal Champions Group on TC39

Perf Track: Tracking the Performance of Sites Using Popular JS Frameworks — Aiming to ‘track framework performance at scale’, Perf Track lets you get answers to questions like how many Vue apps use compression (and what type), how big React apps tend to be, or how many Ember apps have a good first contentful paint time.

Google Chrome Labs

How to Communicate on a Remote Team: Tools and Templates — Learn how to overcome the two biggest challenges of remote communication: understanding tone and upholding a collaboration framework.

CircleCI sponsor

Creating Tiny Desktop Apps with Tauri and Vue.js — Tauri is a toolkit (built in Rust) for building cross platform, JavaScript and CSS powered desktop apps, and the eventual app size can be pretty small (under a megabyte).

Kelvin Omereshone

Malina.js: A Front-End Compiler Inspired by Svelte — A tool similar to Svelte that pre-compiles an app (think a compile-time framework, rather than a runtime one) for better performance. See examples on the REPL. One developer created the same app with Svelte and Malina and has things to say, too.

Oleg Nechaev

⚡️ Quick bytes:

ESLint 7.4.0 has been released.

Impressive to see a typewriting / typing effect done entirely without JavaScript.

There's a new release of VS Code out with a new JavaScript debugger.

💻 Jobs

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

📚 Tutorials, Opinions and Stories

A Case Study of Moving a Three.js WebXR App Off the Main Thread — You can’t argue about Surma’s dedication to Web Workers and here we get a practical demonstration of how they can help to improve performance.

Surma

Moving from TypeScript to Rust and WebAssembly — There’s not a lot to this quick writeup, but it’s interesting that this sort of move is now at least possible and it may well suit your use case too.

Nicolo Davis

Four Ways to Fetch Data in React — It’s really three ways you perhaps don’t want to fetch data, building towards a solid case for the best approach. But we like the logical progression through the alternatives.

Cory House

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

Debounce Explained: How to Make Your Code Wait For Your User To Finish Typing — Debounce functions are higher-order functions that limit the rate at which another function can be run.

Juan Vega

Flattening Arrays with Array.flat() — Knowing about flat() is useful enough, but did you know you can flatten an array of any depth with .flat(Infinity)?

Samantha Ming

Barebones WebGL in 75 Lines of Code — WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think this thorough guide is one of the best. Of course, you may see all of the boilerplate needed and just use Three.js instead, which is fine too! 😄

Avik Das

Automated Code Reviews for JavaScript, Directly from Your Git Workflow

Codacy sponsor

▶ Learn Next.js: A Video Course — A free video course on how to build both Jamstack and SSR sites using React and Next.js. No signing up needed either.

Lee Robinson

Khan Academy's Transition to React Native — The tale of the multi-year project to move both the iOS and Android apps of the popular education platform over to using React Native.

Khan Academy

🔧 Code & Tools

shareon: Simple and Stylish 'Share Buttons' — They also boast good ethics as there’s no tracking code involved.

Nikita Karamov

Financial: A Zero-Dependency Financial Calculations Library — Based on numpy-financial but aimed at Node, Deno, and browser alike, Financial gives you functions for calculating things like future values, repayments, interest rates, etc.

Luciano Mammino

Serverless Headless CMS - OpenSource, Powered by React and Node — Scale up and down in milliseconds with your demand. Stop paying for servers and resources you are not using.

Webiny sponsor

useWebAnimations: React Hook for Flexible Web Animations API Animations — While still badged an ‘experimental technology’ by MDN, the Web Animinations API provides an approach for describing animations on DOM elements.

Welly Shen

Puppeteer 5.0 Released: The Headless Chrome Control Library — Puppeteer 4.0 was only three weeks ago but there are breaking changes here and work on making Puppeteer environment agnostic is in full flow.

Puppeteer

N3.js: Fast, Spec-Compatible, Streaming RDF Library — If you need/use RDF you’ll know, but basically it’s a format for modeling and specifying Web resources and this library works in Node and browser alike.

RDF JavaScript Libraries

🎨 Creative Corner

jsplot: A Quick Way to Plot the Results of a Function — It’s really quick and minimal but this basic Web tool does a quick plot from the results of the JavaScript you supply.

Fredrik Norén

▶ The Easiest Flappy Bird Tutorial Ever? — A 13-minute YouTube video on how to create your own Flappy Bird clone using straight up HTML, JS, and CSS. No framework, no build tools, the code isn’t perfect, but that’s not the point :-)

Shawn Beaton

by via JavaScript Weekly https://ift.tt/3iSXSHS

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 5 years ago

Photo

Creative coding, super linting, and a new JS podcast

#493 — June 19, 2020

Unsubscribe | Read on the Web

✍️ It's been surprisingly quiet, we thought, out in JavaScript land this week, but we've been doing this for a while so we still have lots of neat bits and pieces for you to enjoy :-) Thanks for reading and continuing to support us! 😁

JavaScript Weekly

GitHub Unveils Its 'Super Linter': One Linter to Rule Them All? — Setting up the right linters for the various types of code in your projects can be… a bit of a pain. So GitHub has unveiled Super Linter, a combination of linters you can use with your repos via GitHub Actions. And, yes, we get ESLint and StandardJS.. plus things like markdownlint too.

GitHub

keen-slider: An Agnostic Touch Slider — Think ‘carousels’ but comfortable and smooth when using touch. They work with the mouse and touchpads as well, of course, and there are no dependencies. Live examples here.

Eric Beyer

Identify Front-End Issues Like JavaScript or Network Errors Fast — Datadog’s algorithmic alerts will proactively alert on any client-side issues such as JavaScript and network errors. Optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

▶ Compiler Compiler: A Video Series About Working on a JavaScript Engine — This gets very technical fast :-) Follow a JavaScript engineer on Firefox’s SpiderMonkey team as she gives an inside look at SpiderMoney and the art of compilation.

Yulia Startsev

Puppeteer v4.0.0 Released: The Node API for Chrome — The popular way to remotely control a headless Chrome instance gets a major version bump with the main breaking change being that Puppeteer no longer uses Node’s EventEmitter library in order to make it more environment agnostic. It’s also now “much better at killing lingering browser processes.” GitHub repo.

Puppeteer Team

⚡️ Quick bytes:

OpenHive.JS is a new JavaScript podcast from James Snell and Matteo Collina – three episodes so far including an interview with Laurie Barth on maintaining Gatsby.

The first alpha release of Bootstrap 5 is out and notably drops jQuery as a dependency in favor of vanilla JS.

First proposed 5 years ago, variadic tuple types are coming to TypeScript in TypeScript 4.0. Examples here.

The V8 project has started a V8 Research Grant to give up to $40k to academic programming language and research projects based around the V8 JavaScript engine.

What caused TypeScript to take off? Google announcing they were going to use it with Angular, claims Ryan Cavanaugh, Microsoft's engineering lead for TypeScript.

ThoughtWorks has written about 'Node Overload' and asserts "performance is no longer a reason to choose Node.js."

💻 Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

📚 Tutorials, Opinions and Stories

Why We Switched From Yarn to pnpm — Yarn and pnpm are both popular alternatives to npm but why would you switch from one to the other? Improved performance in a monorepo situation.

Andrew Sprouse

How to Run an Online Dev Conference / Event — An experienced developer event organizer took their All Day Hey event online at a rapid pace this year due to the pandemic. This extensive writeup covers how all the main pieces came together.

Josh Nesbitt

Stop Mocking fetch — Why you shouldn’t mock fetch or your API clients in your tests and what to consider instead.

Kent C Dodds

▶ Creative Coding in p5.js — A practical talk from GitHub Satellite 2020 demonstrating using the Processing-influenced p5.js creative coding library and editor for creating art with JavaScript.

Cassie Tarakajian

Top GitHub Best Practices for Developers - Expanded Guide — Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree.io sponsor

Tips for End to End Testing with Puppeteer — Some tips and tricks from someone who’s used Puppeteer a lot.

Daniel Caldas

Going Async in Vue 3 with Suspense — A practical example of a new feature coming to Vue 3 for rendering fallback content until a condition is met (e.g. the real component is ready).

Vinicius Kiatkoski

What JavaScript Developers Should Know About curl — curl is a fantastic (and borderline universal) command line HTTP client that lets you test, tweak, and manipulate requests both targeting your own apps and APIs as well as those of others.

Valeri Karpov

Computing with Types in TypeScript

Dr. Axel Rauschmayer

Several Ways to Clean Up Vue.js Components — Opinionated, so don’t expect to agree with them all.

Michael Zanggl

🔧 Code & Tools

Code Notes: A Gatsby Theme for Publishing Code-Related Notes and Snippets — If you’ve got a bunch of code snippets you want to keep collected together and present in an attractive fashion, this is a neat Gatsby and Markdown/MDX powered approach. Here’s an example site (which has lots of great JavaScript snippets on it – bonus!)

Zander Martineau

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

TOAST UI Grid: A Customizable Grid Control for the Web — First featured a year ago, TUI Grid is a powerful grid control for the display, editing, and management of data. It comes from the same folks as TUI Editor and TUI Calendar.

NHN

DOCX: A Declarative API to Generate .docx Files — .docx files being more commonly known as modern Microsoft Word documents. This library works in both Node and the browser and there’s a live demo here.

Dolan

Midori: A Library for Animated Image Backgrounds — Built with three.js, provides support for animated transition, a configurable dynamic “camera”, and post-processing effects.

Benjamin Pang

🕰 Tzdb: A Simplified and Grouped List of Time Zones and Offsets — The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.

Vincent Voyer

Save Your Sprints. Build Tools 5x Faster

Retool sponsor

Helipopper: A Powerful Tooltip and Popover Library for Angular — A lighweight wrapper for Tippy.js for use in Angular. Lots of examples demonstrating the flexibility of it on the demo page.

netanel basal

by via JavaScript Weekly https://ift.tt/2YOeura

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 5 years ago

Photo

A new JS runtime, ESLint 7, npm's future, and more

#488 — May 15, 2020

Unsubscribe : Read on the Web

JavaScript Weekly

Deno 1.0 Released — Two years ago, Ryan Dahl, the creator of Node.js, gave a talk about the 10 things he regretted about Node.js. At the same time, he introduced Deno, a prototype of a new, security-first, npm-less JavaScript runtime — now it's considered ready for the big time and, at a minimum, is worth having a quick play with. If you want to do a walkthrough tutorial to see if it’s to your taste or not, this is a good one by Flavio Copes.

Ryan Dahl, Bert Belder, and Bartek Iwańczuk

Psst.. we launched Deno Weekly as a way to stay up to date with Deno. We'll only feature it from time to time in JavaScript Weekly.

JavaScript Features To Forget — It’d be easy to say.. that's just, like, your opinion, man.. but when it’s the author of about 73 (slight exaggeration) JavaScript books including JavaScript: The Definitive Guide, it’s worth listening.

David Flanagan

Don’t Build Auth From Scratch. Focus On Your App — Spend less time on authentication and authorization and more time developing your awesome app. Auth built for <devs>. Download our community edition for free.

FusionAuth sponsor

Playwright 1.0: Fast and Reliable Cross-Browser Testing — We first featured Playwright, Microsoft’s take on a cross-browser alternative to Puppeteer, a few months ago, but it’s already at 1.0. This post does a good job on selling it.

Arjun Attam (Microsoft)

Announcing TypeScript 3.9 — You know it's JavaScript plus syntax for type declarations and annotations by now, right? 3.9 gains a variety of editor improvements, performance improvements, and tweaks to inference and Promise.all. No awaited just yet though.

Daniel Rosenwasser (Microsoft)

Recoil: An Exprimental State Management Library for React — Interesting not only because it comes from Facebook, but because there’s a pretty good 23 minute talk about it and it follows the latest React standards.

Facebook

⚡️ Quick bytes:

WebAssembly is taking us into interesting places.. such as writing PONG clones in COBOL that we can play in the browser. The COBOL code is pretty nice, to be fair.

JSNation Live is the latest in a line of online JavaScript conferences, this one coming on June 18-19 and, curiously, with both free and paid options.

Kite has unveiled AI powered JavaScript 'completions' based upon deep learning over 22 million JavaScript files.

💻 Jobs

Senior Software Engineer — Save Lives & Make an Impact — We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📚 Tutorials and Opinions

▶ Tom Preston-Werner Talks About Redwood.js — GitHub co-founder Tom Preston-Werner talks about Redwood.js, a new full-stack JavaScript framework built around React, GraphQL, and Prisma.

Full Stack Radio podcast

Standard IO: Under the Hood — What really happens behind the scenes when you call console.log?

Vladimir Keleshev

An Initial Introduction to npm v7 — If you thought the npm blog would fade away after the GitHub acquisition, you thought wrong! Isaac Schlueter is back with a status update on what the next major version of npm will offer and is promising a series of posts to come going into more detail. We'll probably focus more on this in Node Weekly in coming weeks.

The npm Blog

Now Up to 4GB of Memory in WebAssembly Applications on V8 — It’s 4GB because WebAssembly currently uses 32 bit pointers but till now WebAssembly apps in Chrome and Emscripten have been limited to 2GB for.. reasons.

Andreas Haas, Jakob Kummerow, and Alon Zakai

Connect Users to Vital Business Data with NodeRun (Webinar On‑Demand)

Profound Logic sponsor

Why We Made a New Component Library Instead of Buying One — It principally came down to the company involved preferring to have total control but they also felt Vue.js was well suited to the task.

Alessandro Grosselle

Second-Guessing the Modern Web — What if everyone’s wrong? Can we solve things in a better way that single page applications? Interesting thought piece and Rich Harris replied with In Defense of the Modern Web.

Tom MacWright

John Conway's FRACTRAN, A Ridiculous, Yet Surprisingly Deep Language — A beautiful JavaScript-heavy tribute to John Conway (of Game of Life fame) by trying to reimplement his esoteric FRACTRAN language.

Reg Braithwaite

What Every Developer Should Know About TCP — You’re every developer! And so am I!

Roberto Vitillo

🔧 Code & Tools

ESLint v7.0.0 Released — The popular pluggable and configurable linter tool for identifying and reporting on patterns in your code. Node 8 support is dropped.

ESLint

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Move forward and backwards through your code to understand what led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

Next.js 9.4 Released: The React Powered Site Building Framework — Just two months after 9.3 (which was already an exciting release) comes the even more significant 9.4 which includes Fast Refresh, a new “instantaneous” hot reloading experience, plus incremental static generation where static pages can be generated or re-rendered in the background as traffic comes in.

Vercel

Fuse.js 6.0: Lightweight Fuzzy-Search Without Dependencies — Want a simple search feature without a dedicated backend? This could help. It’s been around for years but 6.0.0 has just dropped with more new goodies like logical query operators. - GitHub repo.

Kiro Risk

Perfume.js 5.0: A Web Performance Library for Measuring User-Centric Perf Metrics — Only 2KB when gzipped, supports the latest browser performance APIs for precise metrics on things like first paint, first input delay, total blocking time, etc.

Leonardo Zizzamia

Shifty: A Teeny Tiny Tweening Engine — All it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Jeremy Kahn

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days. — Using MongoDB Atlas? Studio 3T is the professional GUI and IDE that unlocks the power you need.

Studio 3T sponsor

Color2K: A Color Parsing and Manipulation Library in 2KB or Less — A key goal here was to be a lot smaller than the competition “while still satisfying all of your color manipulation needs in an sRGB space”.

Rico Kahler

by via JavaScript Weekly https://ift.tt/2WzGfUB

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 5 years ago

Photo

Jest 26, JS one liners, and comparing Ember to React

#487 — May 8, 2020

Unsubscribe : Read on the Web

JavaScript Weekly

Jest 26 Released: The Popular Testing Framework — Jest is a popular testing framework that works with pretty much everything. This release focuses on getting the dependency count and install size down (this causes some breaking changes, unsurprisingly), adds a new fake timer implementation, drops Node 8 support, and initial, experimental ESM support to play with.

Christoph Nakazawa

1LOC: A Collection of One-Line JS Snippets — A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, checking objects, DOM work, etc.) You can submit your own for inclusion too.

Nguyen Huu Phuoc

Hardcore Functional Programming in JavaScript — Brian Lonsdorf teaches you functional programming concepts in JavaScript such as pure functions, currying, composition, functors, monads and more.

Frontend Masters sponsor

Debug Anything: The Basics — A six part series (all ready to read now) on debugging your JavaScript and TypeScript code with the debugger built into Visual Studio Code.

Charles Szilagyi

Comparing Ember Octane and React — This is about as detailed a comparison as you could hope for and a demonstration of just how much Ember contributes to the JavaScript ecosystem. Octane really kicks things up a notch for Ember, too.

Chris Garrett

Deno 1.0 is Due Next Week: Here's What You Need to Know — In 2018 Node's creator Ryan Dahl told us 10 Things I Regret About Node.js and revealed a prototype of Deno, a new V8-based runtime, and here's what you need to know about it. Short of time? This two-minute video sums up the biggest wins quickly.

David Else

Our newest newsletter..

Carrying on from the Deno item above, yes, we've started Deno Weekly, a new newsletter dedicated to the newest runtime in the JavaScript/TypeScript world. Issue 2 goes out just after 1.0 is released next week.

Even if you don't stick with Deno long term, feel free to subscribe then unsubscribe at any time — we won't take offence 😄

Subscribe to Deno Weekly here or enjoy issue 1 here.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📚 Tutorials

How To Build a Vue Survey App Using Firebase — A step-by-step guide to building a functional survey app using Vue.js and Firebase for both authentication and as a database.

David Atanda

A Brief Look at ES2020's Promise.any — When you need to know when at least 1 promise got resolved among an iterable of Promise objects, Promise.any() is the solution.

Marios Fakiolas

ES2020: Everything You Need to Know — An ES2020 roundup!

Martin McKeaveney

Building a Crossword Puzzle Generator — As a NY Times crossword addict, I love a good crossword, but if you’d rather figure out how to make your computer solve them, be my guest 😄 This post guides you on how to approach the problem.

Mitchum

Git Best Practices for SOC 2 Compliance Quick Wins — Get quick wins for your SOC 2 compliance audit, and raise developer productivity at the same time.

Datree.io sponsor

Getting Started with Sapper and Svelte — Sapper is a Svelte-powered framework.

Chris Boakes

A ES2015+ Cheatsheet — A one-page guide to ES2015+ features based around brief example snippets.

Devhints.io

How to Fix ESLint Errors Upon Save in VS Code — A quick-fire tip.

David Walsh

How to Build a Blog with Next 9.3, Netlify, and Markdown — Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform.

Cassidy Williams

A Canvas Engine Comparison: PixiJS vs Two.js vs Paper.js — A benchmark of three popular 2D rendering engines/drawing APIs. Note: This will tax your system.

SlayLines

🎉 BTW, if you like videos, we need to shout out Florin Pop's YouTube channel as he's just passed 20k subscribers by posting neat JavaScript videos and live streams nearly every day for the past six months! 😁 Lots of great stuff on there for JavaScript developers of all skill levels.

🔧 Code & Tools

Selecto.js: Make Elements Selectable Within an Area — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.

Daybrush (Younkue Choi)

Visual Studio Code April 2020 Released — Probably the most widely used editor in the JavaScript space now and April brings some neat new features like being able to work on GitHub issues within the editor.

Microsoft

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Majestic 1.7: A Zero Config GUI for Jest — A tool to help make your JavaScript testing life a little easier. Run npx majestic in the folder of any project that uses Jest to give it a quick try.

Raathi Kugarajan

Pico: Take Browser Screenshots Client-Side with JavaScript — Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

Gripeless

React Flow: A Library for Rendering Interactive Graphs — If you have a need to lay out graphs in a visual way and be able to smoothly pan and zoom around such graphs, this is an interesting new library. Live demo here.

Moritz Klack

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

NeutralinoJS: Build Cross-Platform Apps Using JS, HTML and CSS — Sounds just like Electron, right? Not quite. NeutralinoJS use less memory and are smaller as they don’t ship a full browser inside. 1.4.0 just dropped.

Neutralinojs

Slugify 1.0: Simply Turns Strings into URL/Filename-Friendly 'Slugs' — e.g. ‘I ♥ Dogs’ becomes ‘i-love-dogs’

Sindre Sorhus

RxJS Primitives: A Set of Libraries That Provide Operators for RxJS

Tane Piper

⚡️ Quick releases:

Madge 3.9 — Plot graphs of your module dependencies.

Glider 1.7.2 — Dependency-free carousel alternative.

vue-virtual-scroll-list 2.2 — High performance large list rendering.

Pickr 1.6 — Color picker, now with i18n support.

vue-test-utils 1.0 — Official Vue.js testing utilities.

Espree 7.0 — Esprima-compatible JavaScript parser.

by via JavaScript Weekly https://ift.tt/3bjgDzg

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 5 years ago

Photo

Is Deno the next big thing?

#472 — January 24, 2020

Read on the Web

JavaScript Weekly

▶ A Look at Deno: Could It Supplant Node (One Day)? — Over the past couple of years, we’ve mentioned Deno a few times. It’s a 'new' JavaScript and TypeScript runtime initially created by Ryan Dahl, the creator of Node, so it’s interesting to see how he thinks things should be done nowadays. Version 1.0 is due soon and we'll feature it in more detail then.

Bert Belder

A Guide to ESLint Configuration and Best Practices — A start-to-finish walkthrough aimed at beginners or anyone who usually just copy/pastes settings until things work. This will help you really understand what’s going on.

Lucas Santoni

React Hooks Guide: See the In-Depth Tutorials with Examples — This guide serves as an exhaustive resource for learning the built-in Hooks that are now part of React. Learn all about them as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Start learning today.

Progress KendoReact sponsor

TypeOfNaN JavaScript Quiz Questions — A set of 72 (so far) multiple choice questions to test out your JavaScript knowledge. Give it a try over the weekend :-)

Nick Scialli

Playwright: A Node Library to Automate Chromium, Firefox and WebKit — If you’re familiar with Puppeteer for automating Chrome/Chromium, this is in a similar vein for multiple browsers and is being worked on by some of the same contributors. The goal? To be vendor-neutral and to make the APIs more testing-friendly than Puppeteer.

Microsoft

⚡️ Quick Releases

Node 13.7.0

Jest 25.1 — Popular testing solution.

CodeMirror 5.51 — Powerful code editor control.

Vue 3.0.0 alpha 3

💻 Jobs

Full Stack Engineer — Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.

Expensify

Programmer — Basecamp (Remote) — Join our Research & Fidelity team and help shape the front end of our Rails apps and expand our suite of open-source JavaScript frameworks.

Basecamp

Find a Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

JavaScript Visualized: Generators and Iterators — An easily accessible introduction to generator functions with code and animated examples.

Lydia Hallie

How to Pass Data Between Components in Vue.js — With several ways to share data across components, it’s worth spending some time to reflect on what best suits your situation.

Matt Maribojoc

Writing Dependency-Free JavaScript — If you really need to have no dependencies at all, these tips may help.

Magnus Hovland Hoff

▶ Scaling Telecommunications Data with a Service Mesh — Luca Maraschi, a TELUS Digital chief architect, shares how they serve massive volumes of data to millions of customers.

Heroku sponsorpodcast

JavaScript Tree Shaking, Like A Pro — Eliminating dead code is becoming an essential practice, to avoid large bundle sizes and improve performance. But “as a general rule of thumb: predicting how Webpack will behave for a given module, is not easy to do by eye.”

Daniel Brain

The Best Way to Build Reactive Sub-Forms with Angular — Learn how to extract repetitive sub-form implementations into standalone, robust and type safe components.

Tomas Trajan

How We Do Efficient TDD with Karma and Webpack — How Bamboo has made the act of writing a unit test, running the test and seeing feedback into a fast, iterative process for their developers.

Josh Hale

TypeScript's Secret Parallel Universe — How TypeScript handles name clashes between types and variables.

Florian Reuschel

A Basic Introduction to 'Big O' Notation via JS — This article won’t get you through a CS degree(!) but if you’ve heard people talking about things like “O(n) complexity”, it’ll help.

Joshua Hall

The 10 Most Important JavaScript Frameworks of The Past Decade? — It’s a bit of a listicle by definition, but covers frontend, backend, and native and broadly matches up with our experiences. Where’s Ember though?

Ovie Okeh

How We Replaced Mocha with Jest

Ákos K

🔧 Code & Tools

React Nice Dates: Responsive, Touch-Friendly Modular Date Picker — Another month, another date picker, but this seems to be a pretty good one. Lots of demos and code examples and the control itself feels good.

Hernán Sartorio

Time-Travel Debugger for JavaScript and TypeScript — Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

Panzoom: A Universal Panning and Zooming Library — Here’s a live demo.

Andrei Kashcha

Ava 3.0 Released: The Popular Test Runner — A popular test runner for Node with a concise API, detailed error output, etc. 3.0 drops built-in Babel support due to advancements in Node’s native modern JavaScript support and this has some implications for how you’ll write your tests so take care with this upgrade and read this post first.

AVA

Proton Native V2: React, but for Desktop Apps — Make cross-platform desktop apps with React without using Electron or a browser by using Qt (or, as of v2, wxWidgets) for rendering native interfaces.

Gustav Hansen

BLAKE3 Hashing for JavaScript: Native Node Binding and WebAssembly — BLAKE3 is a Merkle-tree based cryptographic hash function (originally implemented in Rust) that’s fast, secure, and highly parallelizable.

Connor Peet

Axe Pro: Free Accessibility Testing Tool Created for Development Teams

Deque sponsor

EPANET-JS: Model A Water Distribution Network in JavaScript — This certainly seems like the real deal, but the creator is quick to note that it’s “extremely niche as I don’t suspect there will be many engineers simulating water networks”. Hmm.

Luke Butler

A Big List of HTTP Static Server One-liners — Want to spin up a quick HTTP server locally? There’s a lot of ways to do it.

William Bowers

by via JavaScript Weekly https://ift.tt/38GCrnL

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 8 years ago

Photo

Building With Vue.js 2 and Firebase

Introduction

Firebase is Google's mobile platform that helps you develop high-quality apps and grow your business. In this tutorial, you will make good use of one of Firebase's awesome features: the Realtime Database.

You will build a single page application to create books. This book will be saved to your Firebase database, and you will be able to retrieve and delete books you have created.

Let's get started.

Set Up Firebase

Go to Google's Firebase page to create a new account. When done with that, log in to your console. Click on the option to add a project. Enter your project details and click on the button CREATE PROJECT.

This will lead you to your console. The Firebase console helps you manage your Firebase configuration settings.

For this tutorial, you'll need to make access to your database public. From the panel on the left, select Database. Select Realtime Database from the options that show next by clicking GET STARTED. Making your database public involves editing the rules. So click RULES on the page that loads next.

Make your rules look like this.

{ "rules": { ".read": true, ".write": true } }

Click the option to PUBLISH when done.

With this rule, authentication is not required to perform read and write actions on your database. This is needful for the application you will be building in this tutorial.

Set Up a Project Using Vue CLI

Vue CLI allows you to scaffold Vue.js projects. If you do not have it on your machine, you can get it by running:

npm install -g vue-cli

This will install it globally on your machine. Here is how Vue-CLI is used.

vue init <template-name> <project-name>

To learn more about Vue-CLI, check the GitHub page.

For this project you will use webpack templates, so run the command below from your terminal.

vue init webpack vue-book

These are the installation options I used.

? Project name vue-book ? Project description A Vue.js project ? Author izuchukwu1 <[email protected]> ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No vue-cli · Generated "vue-book". To get started: cd vue-book npm install npm run dev Documentation can be found at http://ift.tt/28JYKuJ

Navigate to your project folder. The files and folders generated by Vue-CLI have a tree like this.

├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── README.md ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js └── static 6 directories, 19 files

Now run the command to install your dependencies.

npm install

When done, you can start your dev server by running:

npm run dev

Add Firebase to the Project

To bind Firebase data to Vue.js data properties, we will make use of the VueFire library. You can check more about it on GitHub.

Run the command below:

npm install firebase vuefire --save

Open up main.js to add VueFire. Make your main.js file look like what I have below.

#src/main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import VueFire from 'vuefire' Vue.use(VueFire) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } })

Set Up the Firebase Connection

Go to your Firebase console, and click on the Overview link on the left panel. Select the option to add Firebase to your web app. Copy the snippet that pops up in the window to a text file. The snippet contains your apiKey, authDomain, databaseURL, projectId, storageBucket, and messagingSenderId. You need these details to be able to access your Firebase database.

You start by importing Firebase from the core Firebase library. A Firebase instance is created using the initializeApp method. The snippet you copied has to be passed to this method as an object. This has to be done in the script section of your App.vue, like this.

#src/App.vue import Firebase from 'firebase' let config = { apiKey: "...", authDomain: "...", databaseURL: "...", storageBucket: "...", messagingSenderId: "..." }; let app = Firebase.initializeApp(config) let db = app.database() let booksRef = db.ref('books')

After creating the Firebase instance, the database reference is obtained by using app.database().

Book Listing

Since VueFire makes it easy to bind Vue.js data properties to Firebase, implementing the books listing feature requires you to add this.

firebase: { books: booksRef },

You add that below:

name: 'app',

Now you have access to the book items from your database. The template will look like this.

<div class="panel-body"> <table class="table table-striped"> <thead> <tr> <th>Title</th> <th>Author</th> </tr> </thead> <tbody> <tr v-for="book in books"> <td><a v-bind:href="book.url"></a></td> <td></td> </tr> </tbody> </table> </div>

The v-for directive is used to iterate through the available books. Each book will be outputted in a new table row.

Adding a New Book

To put in place the addition of new books, you need to first define the data model that will be used.

data () { return { newBook: { title: '', author: '', url: 'http://', isbn: '' } } }

Next, set up the template to look like this.

<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Add New Books</h3> </div> <div class="panel-body"> <form id="form" class="form-inline" v-on:submit.prevent="addBook"> <div class="form-group"> <label for="bookTitle">Title:</label> <input type="text" id="bookTitle" class="form-control" v-model="newBook.title"> </div> <div class="form-group"> <label for="bookAuthor">Author:</label> <input type="text" id="bookAuthor" class="form-control" v-model="newBook.author"> </div> <div class="form-group"> <label for="bookUrl">Url:</label> <input type="text" id="bookUrl" class="form-control" v-model="newBook.url"> </div> <input type="submit" class="btn btn-primary" value="Add Book"> </form> </div> </div>

The v-model directive is used to bind the newBook properties to the corresponding input.

The v-on directive will lead us to create an event handler method that gets called whenever a new book is to be created. Here is what the event handler should look like.

methods: { addBook: function() { booksRef.push(this.newBook) this.newBook.title = '', this.newBook.author = '', this.newBook.url = 'http://', this.newBook.isbn = '' }, },

The addBook method helps insert new book objects into the Firebase database. The data is also synced across all clients.

Deleting Books

Let's add the ability to delete books. Add another column to the book listing.

Let's put in place a method that gets called each time the button is clicked. The method is passed the book you intend to delete, which is actually the key to the book, as you will see soon. The remove() is called on the returned book to delete it from the database.

Here is what the method looks like.

removeBook: function (book) { booksRef.child(book['.key']).remove() }

With that, you are done with App.vue. Putting everything together, here is how your App.vue file should look.

<template> <div id="app" class="container"> <div class="page-header"> <h1>Vue Book</h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Add Book</h3> </div> <div class="panel-body"> <form id="form" class="form-inline" v-on:submit.prevent="addBook"> <div class="form-group"> <label for="bookTitle">Title:</label> <input type="text" id="bookTitle" class="form-control" v-model="newBook.title"> </div> <div class="form-group"> <label for="bookAuthor">Author:</label> <input type="text" id="bookAuthor" class="form-control" v-model="newBook.author"> </div> <div class="form-group"> <label for="bookUrl">URL:</label> <input type="text" id="bookUrl" class="form-control" v-model="newBook.url"> </div> <div class="form-group"> <label for="bookIsbn">ISBN:</label> <input type="text" id="bookIsbn" class="form-control" v-model="newBook.isbn"> </div> <input type="submit" class="btn btn-primary" value="Add Book"> </form> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Books Lists</h3> </div> <div class="panel-body"> <table class="table table-stripped"> <thead> <tr> <th>Title</th> <th>Author</th> <th></th> </tr> </thead> <tbody> <tr v-for="book in books"> <td> <a v-bind:href="book.url"></a> </td> <td> </td> <td> <span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeBook(book)"></span> </td> </tr> </tbody> </table> </div> </div> </div> </template> <script> import Firebase from 'firebase' let config = { apiKey: "...", authDomain: "...", databaseURL: "...", storageBucket: "...", messagingSenderId: "..." } let app = Firebase.initializeApp(config) let db = app.database() let booksRef = db.ref('books') export default { name: 'app', firebase: { books: booksRef }, data () { return { newBook: { title: '', author: '', url: 'http://', isbn: '' } } }, methods: { addBook: function() { booksRef.push(this.newBook) this.newBook.title = '', this.newBook.author = '', this.newBook.url = 'http://', this.newBook.isbn = '' }, removeBook: function(book) { booksRef.child(book['.key']).remove() } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; } </style>

In the template, I added some Bootstrap classes. For these to work, open your index.html file and make it look like this.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-book</title> <link rel="stylesheet" href="http://ift.tt/2apRjw3" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="http://ift.tt/2hbdoRr" /> </head> <body> <div id="app"></div>  <script src="http://ift.tt/2nfnDrE" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="http://ift.tt/2aHTozy" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

Conclusion

JavaScript has become extremely popular and is now capable of building mature applications (as we've seen above). If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.

In this tutorial, you learned about Firebase. You were able to connect Vue.js and Firebase using VueFire. Your application can make read and write requests to your Firebase database.

You can go further by adding more features like categories and description.

by Chinedu Izuchukwu via Envato Tuts+ Code http://ift.tt/2zGQubw

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript #Javascript Branding #Javascript Weekly

3 notes · View notes

t-baba · 6 years ago

Photo

The 2019 State of JavaScript survey is here

#465 — November 29, 2019

Read on the Web

JavaScript Weekly

▶ Faster JavaScript Apps with JSON.parse() — Did you know that JSON can be parsed more quickly than JavaScript itself? Here's how and why to consider using JSON.parse instead of normal object literals.

Mathias Bynens / Bram van Damme

It's Time to Take the State of JavaScript 2019 Survey — Now in its fourth year, the popular State of JavaScript survey returns, seeking your responses to help find out “which libraries developers want to learn next, which have the best satisfaction ratings, and much more”. Of course, we’ll share the results once they’re live, as always.

Raphaël Benitte, Sacha Greif and Michael Rambeau

Getting Started Building Apps with JavaScript — CascadiaJS just wrapped up. Take a look at the collection of articles, tutorials and podcast episodes that will help you get started building web applications with JavaScript and JS-related technologies.

Heroku sponsor

ESLint 6.7 Released — The popular linting tool includes a new way for rule authors to make suggestions for non-automatic fixes, plus there are six new rules covering things like duplicate else-ifs and grouping accessor pairs. 6.7.1 quickly followed 6.7.0 fixing a regression.

ESLint

Cockatiel: A Resilience and Transient-Fault-Handling Library — This is for defining common resilience or fault handling techniques like ‘backoff’, retries, circuit breakers, timeouts, etc. and is inspired by .NET’s Polly fault handling library.

Connor Peet

The Epic List of Languages That Compile to JavaScript — JavaScript is as much a compile target as a language in its own right these days, and this extensive list on the CoffeeScript repo has been (and continues to be) updated for years. The latest addition? Fengari, a Lua VM written in JavaScript.

Jeremy Ashkenas et al.

▶ Building Promises From Scratch in a Post-Apocalyptic Future — A 20 minute screencast covering what’s involved in creating a promises implementation from scratch on top of lower level primitives (e.g. callbacks).

Low Level JavaScript

⚡️ Quick Releases

Babel 7.7.4 — The JavaScript transpiler.

Ink 2.6.0 — Like React but for building CLI apps.

GPU.js 2.3.0 — GPU-accelerated JavaScript.

jQuery.Terminal 2.9.0 — Add terminal experiences to your site/app.

💻 Jobs

Senior Front-End Software Engineer (Vue, Nuxt, Apollo) — Join our distributed Front-End functional team in our quest to make doctors more effective using Vue, Nuxt, Apollo and Rails.

Doximity

Vue Front End Lead at Valiant Finance - Sydney, Australia — FinTech based in Surry Hills looking for an experienced Vue Front End Lead to help us build our growing financial marketplace.

Valiant Finance

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

An Official Style Guide for Writing Redux Code — Recommended patterns, best practices, and suggested approaches for writing Redux-based apps.

Redux

An Introduction to the Picture-in-Picture Web API — Chrome supports a ‘picture-in-picture’ mechanism for creating floating video windows that continue to play even if a user navigates to a different page. Firefox and Safari have support via proprietary APIs too.

Ayooluwa Isaiah

Black Friday Sale: Quokka.js - Rapid JavaScript Prototyping in Your Editor — Quokka displays execution results in your editor as you type. Get it now with a 50% Black Friday discount.

Wallaby.js sponsor

Understanding Streams in Node.js — Streams continue to be one of the fundamental concepts that power Node applications.

Liz Parody

Outside the Web: Emscripten Now Generating Standalone WebAssembly Binaries — A key part of both asm.js and Emscripten was the idea of compiling binaries for use on the Web using JavaScript, but now Emscripten has support for emitting WebAssembly without relying on JavaScript at all. You can, of course, interact with such output from your JavaScript code, though.

Alon Zakai

Building Animated Draggable Interfaces with Vue.js and Tailwind — Tailwind CSS is an increasingly popular CSS framework.

Cristi Jora

Video Developer Report - Top Trends in Video Technology 2019

Bitmovin sponsor

Using Backreferences in JavaScript Regular Expressions — Backreferences allow you to use matches already made within a regex within that same regex.

stefan judis

For the Sake of Your Event Listeners, Use Web Workers — “Start by identifying notably intense processes and spin up a small Web Worker for them.”

Alex MacArthur

🔧 Code & Tools

litegraph.js: A Graph Node Engine and Editor — This would be useful if you need to create an online system for users to create and manipulate graphs or interconnecting ‘nodes’ for things like graphics, audio or data pipelines, say. Live demo here.

Javi Agenjo

Duktape 2.5: A Compact, Embeddable JavaScript Engine — An ES5.1-compliant JavaScript engine focused on being very compact. If you have a C/C++ project that needs a JS engine, it’s worth a look as the duk binary runs only 350K.

Sami Vaarala

Automate and Standardize Code Reviews for JS and 29 Other Languages — Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow.

Codacy sponsor

Scala.js 1.0.0-RC1: A Scala to JavaScript Compiler — A final 1.0 release is due in early 2020. If this area of using Scala to build front-end apps interests you, you might also like Slinky which makes writing React apps in Scala easier.

Scala Team

Ketting 5.0: A 'Generic' Hypermedia Client for JavaScript — Supports Hypertext Application Language, JSON:API, Siren, and HTTP link headers. Works in both the browser and Node.js.

Evert Pot

WebGLStudio.js: A 3D Graphics Editor in the Browser — It’s not new but its author says it’s now mature, ready to be extended, and can be used in production (although a 1.0 release is still a little way away).

Javi Agenjo

JSONCrush: Compresses JSON Into URI Friendly Strings — The results are shorter than standard URI encoding.

Frank Force

by via JavaScript Weekly https://ift.tt/2R3J6CF

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 6 years ago

Photo

Front end tooling, building your own React, and getting started with AssemblyScript

#463 — November 15, 2019

Read on the Web

JavaScript Weekly

Build Your Own React — An interestingly presented walkthrough of creating your own React-a-like from scratch. You’ll need some time (and be gentle with the scrolling) but this is an interesting way to present such a walkthrough.

Rodrigo Pombo

The Bytecode Alliance: Building A Secure-by-Default, Composable Future for WebAssembly — The Bytecode Alliance is a new industry partnership (originally between Mozilla, Fastly, Intel, and Red Hat) designed to forge WebAssembly’s ‘outside-the-browser’ future. If you’re not yet in sync with why WebAssembly outside the browser makes sense, this announcement should give you a good idea.

Mozilla Hacks

Hone Your JavaScript Skills in Just One Week — Catch up on all the JavaScript advancements and in just one week you’ll be prepared to pick up and apply whatever the web ecosystem throws at you for years to come.

Big Nerd Ranch sponsor

The Introductory Guide to AssemblyScript — AssemblyScript, a TypeScript-to-WebAssembly compiler, provides a way to get around the steep learning curve for WebAssembly and makes it easier to integrate features that need WebAssembly into typical JS projects.

Danny Guo

Results of the 2019 Front-End Tooling Survey 2019 — Over 3,000 developers took part in this front-end tooling survey, answering a wide range of questions on things such as tooling and methodologies. React and Vue leapt up in popularity since last year with jQuery and Lodash dropping. Webpack dominates in the bundler space, Jest dominates the testing space, and most of us are using ESLint.

Ashley Nolan

Brendan Eich, Inventor of JavaScript, Did a Reddit AMA — He also helped co-found Mozilla and has just launched version 1.0 of Brave, a privacy-focused browser. Several of the questions are about Brendan’s work on JavaScript and may be of interest.

30 Seconds of Code: A Curated Collection of Useful JS Snippets — We’ve linked this project a couple of times over the years, but it has continued to get lots of updates, so if you want to do lots of interesting things with arrays, math, strings, vectors, and more, check it out. A handy resource.

30 Seconds

⚡️ Quick Releases

GreenSock 3.0 — Long standing animation system / library.

React 16.12.0 — See this week's React newsletter for more.

TUI Editor 1.4.8 — Powerful WYSIWYG Markdown editor.

ExcelJS 3.4 — Read and write to Excel spreadsheets.

Choices 9.0 — Configurable select box/text input plugin.

💻 Jobs

Frontend Developer - React (Remote or UK) — Work from anywhere. Build the next generation analytic platform serving the world's leading brands.

RethinkXSocial

Senior Software Engineer at Getty (Los Angeles, CA) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js.

J. Paul Getty Trust

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📘 Articles & Tutorials

Handling null and undefined in JavaScript — What are the best strategies to minimize errors caused by values that could be null, undefined, or otherwise uninitialized at runtime?

Eric Elliott

An Early Look at the Vue 3 Composition API in the Wild — A good way to see some of the benefits of the new API.

Mateusz Rybczonek

Making an Audio Waveform Visualizer with Vanilla JavaScript — A really neat tutorial that breaks down the problem well.

Matthew Ström

Why Unit Tests Aren’t ‘Tests’

Gauge sponsor

A console Cheat Sheet — An illustrated tour of the most popular console methods for debugging code from the dev tools.

Javascript Jeep

How to Add Testing to An Existing Project — Because test-driven development is often more a dream than the reality.

Kent C Dodds

Understanding Client Side Routing by Implementing a Router in Vanilla JS

Will Taylor

How Discord Achieves Native iOS Performance with React Native — Discord, the popular gamer-aimed chat system, chose React Native very early on as the basis for their iOS app, but they’ve had to invest a lot of effort in keeping it performant.

Miguel Gaeta

Top CI Pipeline Best Practices - A Developer's Guide

Datree.io sponsor

Making Instagram.com Faster: Code Size and Execution Optimizations — The latest in a series of JavaScript performance posts from the Instagram team.

Glenn Conner

How TypeScript 3.7 Helps Quality — A look at TypeScript 3.7 through the lens of how its new features impact code quality.

Matt Eland

🔧 Code & Tools

JSON Generator: A Tool for Generating Random Data — Generate any random data you want online with agile JavaScript-powered templates. (Possibly stick with the 'old' version for now, though, the 'new' beta doesn't seem to work properly for me.)

Vazha Omanashvili

pm2 4.2 Released: The Node Production Process Manager — A very mature and widely used process manager that includes a load balancer for keeping Node apps alive forever and to reload them without downtime.

Alexandre Strzelewicz

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here.

Sindre Sorhus

Ajv: A Fast JSON Schema Validator — Supports v5, v6, and v7 proposals and claims to be both the fastest validator for both Node and browser.

Evgeny Poberezkin

Fabric.js 3.5: A SVG-to-Canvas and Canvas-to-SVG Library — Essentially provides an interactive object model on top of an HTML5 canvas.

Fabric.js

progress-estimator: A Progress Bar and Time Estimate for Promises — Tracks time between responses to make the completion time estimates more accurate.

Brian Vaughn

vue-spotify: A Spotify Client Built with Vue.js and Vuex

gk4m

by via JavaScript Weekly https://ift.tt/2CNDcxk

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 6 years ago

Photo

Using native modules in production today

#451 — August 23, 2019

Read on the Web

JavaScript Weekly

Using Native JavaScript Modules in Production Today — “now, thanks to some recent advances in bundler technology, it’s possible to deploy your production code as ES2015 modules—with both static and dynamic imports—and get better performance than all non-module options currently available.”

Philip Walton

Web Template Studio 2.0: Generate New Apps from VS Code Wizard-Style — Web Template Studio is an extension, from Microsoft, for Visual Studio Code that simplifies creating new full-stack apps in a ‘wizard’-esque style. It now supports Angular, Vue, and React.

Lea Akkari (Microsoft)

Free Webinar: Design Patterns for Microservice Architecture — If you're planning to design microservice architecture, make sure to learn the best design patterns first. We'll talk about API Gateway, BFF, Monorepo, gRPC and more. Everything based on real-life examples from successful SOA projects.

The Software House sponsor

▶ The State of JavaScript Frameworks in August 2019 — Every six months, Tracy Lee sits down with several representatives of different frameworks to get a brief update on how they’re doing. This hour long episode features Evan You (Vue.js), Minko Gechev (Angular), Michael Dawson (Node.js), Jen Weber (Cardstack), Manu Mtz.-Almeida (Ionic) and Marvin Hagemeister (Preact).

Tracy Lee

JavaScript to Know for React — Examples of which JavaScript features in particular you should be familiar with when learning and using React.

Kent C Dodds

date-fns 2.0: It's Like lodash But For Dates — A date utility library that provides an extensive and consistent API for manipulating dates, whether in the browser or in Node. After tree-shaking and minification, date-fns can be much more compact than moment.js. Homepage.

date-fns

Node v12.9.0 (Current) Released, Now on V8 7.6 — The upgrade to V8 7.6 opens up some new opportunities like Promise.allSettled(), JSON.parse and frozen/sealed array perf improvements, and BigInt now has a toLocaleString method for localized formatting of large numbers.

Node.js Foundation

💻 Jobs

Frontend Engineer at Scalable Capital (Munich) — Passionate about React and GraphQL? Join our Team of JavaScript Developers and shape the future of FinTech.

Scalable Capital GmbH

Have You Thought About Being a Web Developer in Robotics? — A unique opportunity to work on a high-powered engineering web application for a computer vision system combining 3D graphics and an intuitive user experience.

Veo Robotics

Get Hired Based on Your Skills Not Your CV — We’ll introduce you to over 1,500+ companies who’ll compete to hire you. You’re always hidden from your current employer and we’re trusted by over 100k developers.

hackajob

📘 Tutorials

An Introduction to Memoization in JavaScript — ‘Memoization’ is when you cache return values of functions based upon the arguments provided. Here’s an example of creating a separate function that can do this for existing functions.

Nick Scialli

Why is ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'? — One of those fun little JavaScript “wat” moments.

Stack Overflow

The State of JavaScript: 2019 and Beyond. Get the Whitepaper — Read about the latest developments and trends in the JavaScript ecosystem, and how things will change in 2019 and beyond.

Progress Kendo UI sponsor

All The New ES2019 Tips and Tricks — An accessible, example-heavy roundup of new ES2019 features.

Laurie Barth

Exploring the Two-Sum Interview Question in JavaScript — There are two solutions, the straightforward ‘brute force’ way, and a more efficient solution that can demonstrate strong CS fundamentals..

Nick Scialli

Using Generators for Deep Recursion

Jason H Priestly

7 Ways to Make Your Angular App More Accessible

Chris Ward

▶ Is Modern JavaScript Tooling Too Complicated? — A podcast where two developers debate a point with two other developers, each group taking one side of the debate. Is modern JS tooling too complicated? Discuss!

JS Party podcast

🔧 Code and Tools

NodeGUI: A New Way to Build Native Desktop Apps with JavaScript — An interesting new alternative to something like Electron as it’s based around Qt, the cross platform widget toolkit, rather than a browser engine.

Atul R

Chart.xkcd: xkcd, Hand-Drawn-Style Charts — If you like your lines wiggly and rough, this might be for you. It tries to mimic the style of the fantastic xkcd comic.

Tim Qian

Browser Automation Experience Made Reliable and Less Flaky — Taiko is a free/open source browser automation tool that addresses the last mile to reliable testing.

ThoughtWorks - Taiko sponsor

FilePond: A Flexible File Uploader with a Smooth UI — It’s vanilla JavaScript but has adapters to make it easier to use with React, Vue, Angular, or even jQuery. v4.5 has just dropped. GitHub repo.

Rik Schennink

v8n: A 'Fluent Validation' Library — Chain together rules to make validations, e.g. v8n().some.not.uppercase().test("Hello");

Bruno C. Couto

file-type: Detect The File Type of a Buffer/Uint8Array — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file.

Sindre Sorhus

pagemap: A 'Mini Map' for Your Pages — A neat little idea that’s particularly useful on long pages. This adds a clickable/navigable overview of an entire page to the top right corner. Here’s the associated repo.

Lars Jung

Automated Code Reviews for 27 Languages, Directly from Your Workflow

Codacy sponsor

⚡️ Quick Releases

ESLint 2.6.1

d3 5.10 & 5.11 — the JavaScript data visualization library.

vue-cli 3.11

AVA 2.3 — popular test runner for Node.

The Lounge 3.2 — a JavaScript-powered IRC client.

by via JavaScript Weekly https://ift.tt/2HlYZ1S

#Javascript Branding #Javascript Weekly

0 notes

t-baba · 6 years ago

Photo

How to Set Up a Vue Development Environment

If you’re going to do any serious amount of work with Vue, it’ll pay dividends in the long run to invest some time in setting up your coding environment. A powerful editor and a few well-chosen tools will make you more productive and ultimately a happier developer.

In this post, I’m going to demonstrate how to configure VS Code to work with Vue. I’m going to show how to use ESLint and Prettier to lint and format your code and how to use Vue’s browser tools to take a peek at what’s going on under the hood in a Vue app. When you’ve finished reading, you’ll have a working development environment set up and will be ready to start coding Vue apps like a boss.

Let’s get to it!

Want to learn Vue.js from the ground up? This article is an extract from our Premium library. Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month.

Installing and Setting Up Your Editor

I said that I was going to be using VS Code for this tutorial, but I’m afraid I lied. I’m actually going to be using VSCodium, which is an open-source fork of VS Code without the Microsoft branding, telemetry and licensing. The project is under active development and I’d encourage you to check it out.

It doesn’t matter which editor you use to follow along; both are available for Linux, Mac and Windows. You can download the latest release of VSCodium here, or download the latest release of VSCode here and install it in the correct way for your operating system.

Throughout the rest of this guide, for the sake of consistency, I’ll refer to the editor as VS Code.

Add the Vetur Extension

When you fire up the editor, you’ll notice a set of five icons in a toolbar on the left-hand side of the window. If you click the bottom of these icons (the square one), a search bar will open up that enables you to search the VS Code Marketplace. Type “vue” into the search bar and you should see dozens of extensions listed, each claiming to do something slightly different.

The post How to Set Up a Vue Development Environment appeared first on SitePoint.

by James Hibbard via SitePoint https://ift.tt/2OITgta

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript Branding #Javascript Weekly #Mobile #Mo

0 notes

t-baba · 6 years ago

Photo

Electron 6, a String#replace trick, and learning about scope in JS

#448 — August 2, 2019

Read on the Web

JavaScript Weekly

Hotkey: Trigger an Action on an Element When a Keyboard 'Hotkey' is Pressed — Want quick and simple keyboard shortcuts for elements on your page? Set the data-hotkey attribute and use Hotkey. It even supports multiple keys pressed in sequence. GitHub built and uses it (view source on any GitHub page and look for the data-hotkey attributes).

GitHub

Electron 6.0 Released — Just 3 months after version 5 was released, the popular JavaScript-based cross-platform desktop app building platform hits version 6 and uses Chromium 76, Node 12.4, and V8 7.6 under the hood.

Electron.js Team

New Introduction to Gatsby Course with Jason Lengstorf — Build blazing 🔥 fast website by default with Gatsby. In this course, you'll build up a blog from scratch and deploy your brand new blog to Netlify for the world to see!

Frontend Masters sponsor

Did You Know String.prototype.replace Supports Replacement Patterns? — It feels a bit Perl-like, but this is an interesting feature I’d never seen in JavaScript before (despite being in the MDN docs). Example: 'abc'.replace('b', '$&-$&') === 'ab-bc'.

Stefan Judis

Writing a Simple MVC App in Plain JavaScript — If you’re tired of hearing about React, Angular, Mithril, Ember, and the rest, and just want to write JavaScript, this is for you. (Ultimately, all of those frameworks are very useful but being able to work without them first will help you appreciate what they do!)

Tania Rascia

Taking Redux Off of the Main Thread with Comlink — Using Web Workers carefully can yield major UX and performance benefits by taking computation off of the UI thread. Here’s one way to do it when using Redux.

Surma

Quick bytes:

VueConf US 2020 is taking place on March 2-4 in Austin, Texas. The CFP opens on September 1.

The Ember project has published a roadmap for its future.

Amazon Transcribe, AWS's speech-to-text service, now supports WebSockets for streaming, real-time transcription.

Chrome is going to hide the 'www' subdomain and 'https' scheme in its location bar to make URLs 'easier to read'.

Kyle Simpson has started work on the 2nd edition of his popular You Don't Know JavaScript book series.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Front-end Engineer — Goldstar is looking for front-end Engineers with React experience on-site in Portland, Oregon and Pasadena, California.

Goldstar

Get Hired Based on Your Skills Not Your CV — Our AI makes it easier and quicker to match with top JavaScript jobs, with no recruiters and an average salary of £70k.

hackajob

📘 Tutorials, Opinions, and Videos

▶ Let's Learn About Scope in JavaScript — Google’s dynamic JavaScript duo, Jake and Surma, present an entertaining chat about variable scoping, complete with tablet-based demos.

Google Chrome Developers

Looking at the Optional Chaining ES Proposal — Boils down the proposal to exactly the essentials you need to know.

Dr. Axel Rauschmayer

The Developer’s Guide to Not Losing the Metrics You Need — Gathering and storing metrics is a part of production. When adverse events occur, you need to have the metrics available to debug the problems.

InfluxData sponsor

Do React Hooks Replace Redux? — This question has bounced around in the community a lot recently as more use cases for hooks emerge.. but Eric’s TLDR is ‘Hooks are Great, but No.’ and he explains why in depth.

Eric Elliott

Getting Started with Vuetify 2.0 — Vuetify is a Material Design-based component library for Vue.js.

Ben Hong

Quick Tips for Using Mocks when Unit Testing with Jest

Daniel Caldas

First-Class Functions in JavaScript — A brief tutorial aimed at beginners who might be wondering why being able to treat functions as first-class citizens (i.e. as objects in their own right) has merit.

Nick Scialli

Top 10 GitHub Best Practices - Lessons from Thousands of Repositories

Datree.io sponsor

My VS Code Setup: Making The Most Out of VS Code — A grab bag of addons and tools to consider if you’re a VS Code user.

Deepu K Sasidharan

Understanding RxJS Observables and Why You Need Them — RxJS is a reactive programming library based around ‘observables’ and is used by Angular for its reactivity.. but you can use it separately too.

Nwose Lotanna

🔧 Code and Tools

Hackathon Starter: A Boilerplate for Node Web Apps — A boilerplate for when you want to start building a Node app quickly (such as at a hackathon) as it includes almost everything you’d need.

Sahat Yalkabov

Esprint: Runs ESLint Across Multiple Threads for More Performance — It’s been considered that this could be merged into ESLint itself.

Ensure That Your Code Is Error-Free Before Merging — Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow.

Codacy sponsor

Treeverse: Walk Tree Structures Depth- or Breadth-First

Isaac Z Schlueter

Rollup: A Modern ES6 Module Bundler — Not a new project, but it's been getting plenty of releases lately. Write your code using ES modules and get tree-shaking/dead code elimination and bundling to the format you require. One of Rollup’s wins over more popular alternatives is its speed.

Rollup Contributors

Top 25 JavaScript Plugins for WebStorm and IntelliJ

Ilana Brudo

⚡️ Quick Releases

Font Awesome 5.10.0 — The popular icon toolkit.

webpack 4.39.0 — 'everything but the kitchen sink' bundler.

TUI Editor 1.4.5 — Markdown-based WYSIWYG editor.

Spectacle 5.7 — React.js-based presentation library.

Duktape 2.4 — Embeddable JavaScript engine for C/C++ projects.

by via JavaScript Weekly https://ift.tt/2YFwKRA

#Javascript Branding #Javascript Weekly

0 notes