Tai Lu ( 呂台生 )

Posted by Tai Lu ( 呂台生 ) who's building useful things.You should follow him on Twitter

Vuex State and Getters

March 16, 2020

How we can access the State from our Vuex store from within our components, both directly and with the help of Getters.

JavaScript Array Splice

March 11, 2020

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Vue Components

March 11, 2020

Components are reusable blocks of code that can have both structure and functionality. They help create a more modular and maintainable codebase.

Vue Communicating Events

March 11, 2020

How to communicate from a child component up to its parent. Our product component will be able to tell its parent, the root instance, that an event has occurred, and send data along with that event notification.

Vue Computed Properties

March 10, 2020

The properties on the Vue instance that calculate a value rather than store a value.

Vue Class and Style Binding

March 09, 2020

How to dynamically style our HTML by binding data to an element’s style attribute, as well as its class.

Vue Event Handling

March 08, 2020

How to listen for DOM events that we can use to trigger methods

Vue Attribute Binding

March 05, 2020

Explore ways you can connect data to the attributes of your HTML elements

Learn Vue.js

March 03, 2020

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications.

The State of Vue.js in 2020

March 02, 2020

In the last few years, Vue.js has grown from a relatively unknown framework to the fastest growing JavaScript framework of all time.

What is a Progressive Web App

March 01, 2020

PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.

The Documentary Vue.js

March 01, 2020

With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring Vuejs to life.

Gatsby with Tailwind CSS

February 24, 2020

The right way to add Tailwind CSS to a Gatsby.js React Application, using Post CSS and Purge CSS.

npm dotenv

February 21, 2020

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

ChroPath 5.0

February 20, 2020

A developer tool to generate, edit and inspect relative xpath, absolute xpath, CSS selectors, linkText and partialLinkText.

Cypress Bundled Tools

February 17, 2020

Cypress relies on many best-of-breed open source testing libraries (such as Mocha, Chai, Chai-jQuery, Sinon, and Sinon-Chai) to lend stability and familiarity to the platform

TennisTournament

February 15, 2020

Given the number of players and available courts, calculate the maximum number of parallel tennis games

Cypress First Test

February 15, 2020

A solid test generally covers 3 phases including "set up the application state", "take an action", and "make an assertion about the resulting application state".

活出自己的第三人生

February 13, 2020

當我們歷經求學、就業的階段,達到了人生的高峰,接下來就進入了第三人生。

Gatsby End-to-End Test with a Default Starter

February 13, 2020

A good use case for writing automated end-to-end tests is asserting accessibility with cypress-axe, a Cypress plugin that incorporates the axe accessibility testing API

NPM start-server-and-test

February 13, 2020

Starts server, waits for URL, then runs test command; when the tests end, shuts down server

Cypress Timeouts

February 12, 2020

Cypress offers several different timeout values based on the type of command.

MongoDB Command Examples

February 12, 2020

To begin using MongoDB, connect a mongo shell to the running instance. From a new terminal, issue the command mongo.

Cypress Asserations

February 11, 2020

What makes Cypress unique from other testing tools is that commands automatically retry their assertions.

MaxSliceSum

February 10, 2020

Find a maximum sum of a compact subsequence of array elements

Cypress Querying The Dom

February 09, 2020

Cypress leverages jQuery’s powerful selector engine to help make tests familiar and readable for modern web developers

MaxProfit

February 08, 2020

Given a log of stock prices compute the maximum possible earning

PermCheck

February 07, 2020

Check whether array A is a permutation

Effective React Testing

February 06, 2020

In this talk, learn how to create an effective plan for testing a React and Redux application from the ground up.

如何創造自己的好運(下)

February 05, 2020

Dr. Hsu 許醫師鑽研新時代思想20幾年,尤偏愛賽斯;同時從事身心靈整體健康研究,對於癌症的治療及預防復發上有獨到心得。

Dominator

February 01, 2020

Find an index of an array such that its value occurs at more than half of indices in the array

Fish

February 01, 2020

N voracious fish are moving along a river. Calculate how many fish are alive.

Stone Wall

February 01, 2020

Cover “Manhattan skyline” using the minimum number of rectangles

Brackets

January 31, 2020

Determine whether a given string of parentheses (multiple types) is properly nested

Nesting

January 31, 2020

Determine whether a given string of parentheses (single type) is properly nested

JavaScript Number Methods

January 26, 2020

With JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.

JavaScript Numbers

January 26, 2020

JavaScript has only one type of number. Numbers can be written with or without decimals.

Max Counters

January 23, 2020

Calculate the values of counters after applying all alternating operations

Min Avg Two Slice

January 23, 2020

Find the minimal average of any slice containing at least two elements

Building Resilient Frontend Architecture

January 23, 2020

How can we design an application architecture that is more resilient to change in the first place? How can we defend against entropy in a system where people are pushing changes every day?

Binary Search

January 18, 2020

Binary search is much faster with Time Complexity of O(logN) whereas linear search algorithm works in O(N) time complexity.

Merge Sort

January 18, 2020

The algorithm divides the array in two halves, recursively sorts them and finally merges the two sorted halves.

Quick Sort

January 18, 2020

Quicksort is a comparison algorithm that, on average, runs in O(n log n), or linearithmic, time.

Distinct

January 17, 2020

Compute number of distinct values in an array

Frog River One

January 17, 2020

Find the earliest time when a frog can jump to the other side of a river

Passing Cars

January 17, 2020

Count the number of passing cars on the road

Triangle

January 17, 2020

Determine whether a triangle can be built from a given set of edges

JavaScript Array Object

January 17, 2020

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.

Array Sort Method

January 17, 2020

The sort() method sorts the elements of an array in place and returns the sorted array.

JavaScript Set Object

January 17, 2020

The Set object lets you store unique values of any type, whether primitive values or object references.

Binary Gap

January 16, 2020

Find longest sequence of zeros in binary representation of an integer.

Cyclic Rotation

January 16, 2020

Rotate an array to the right by a given number of steps

Frog Jump

January 16, 2020

Count the minimal number of jumps that the small frog must perform to reach its target.

Find Missing Element

January 16, 2020

An array A consisting of N different integers is given. The array contains integers in the range [1..(N + 1)], which means that exactly one element is missing.

Tape Equilibrium

January 16, 2020

Find the minimal difference between the sum of two splitted array parts

JavaScript Math Object

January 15, 2020

Math is a built-in object that has properties and methods for mathematical constants and functions.

React List Components by Example

January 13, 2020

This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React.

CSS Web Safe Font Combinations

January 10, 2020

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems.

How to build and deploy websites using Netlify

January 06, 2020

Netlify helps developers quickly roll out static websites. In this in-depth Netlify course for beginners, you will learn how to use the service for everything needed in modern web development, from local setup to global deployment.

JSON Objects

January 05, 2020

JSON objects are surrounded by curly braces {} and written in key/value pairs.

Using JavaScript Fetch API

January 04, 2020

The Fetch API provides an interface for fetching resources (including across the network).

The Adjacent Sibling (+) Selector

January 01, 2020

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

The Hover Effect for Mobile Buttons

December 30, 2019

Hover effects inform users what they can interact with by providing visual feedback on buttons. But there’s a problem — hover effects are for desktop apps, not mobile apps.

What is clearfix ?

December 29, 2019

What's happening when we float something with CSS, and how clears work with floats.

Pseudo-classes and Pseudo-elements

December 27, 2019

A pseudo-class is a selector that selects elements that are in a specific state. Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

CSS transform property

December 26, 2019

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Using CSS Animations

December 26, 2019

CSS animations make it possible to animate transitions from one CSS style configuration to another.

My Showcase List

December 26, 2019

Track, update and demonstrate my beautiful websites

CSS Grid and Flexbox

December 23, 2019

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

CSS display property

December 22, 2019

The display property specifies the display behavior (the type of rendering box) of an element.

Using the Effect Hook

December 21, 2019

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

CSS Rem vs Em Units

December 20, 2019

According to the W3C spec the definition for one rem unit is equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

What’s Running on Port 8000? (And how to stop it)

December 17, 2019

If everything in Linux is a file, there has to be more to it than just files on your hard drive. This tutorial will show you how to use lsof to see all the other devices and processes that are being handled as files.

Gatsby Image Props

December 15, 2019

After you’ve made a query, you can pass additional options to the gatsby-image component.

Using ESLint in Gatsby

December 15, 2019

Gatsby ships with a built-in ESLint setup. For most users, our built-in ESlint setup is all you need. If you know however that you’d like to customize your ESlint config e.g. your company has their own custom ESlint setup, this shows how this can be done.

CSS Layout - The Position Property

December 12, 2019

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). Learning how CSS positioning works will make your future projects much easier to lay out.

JavaScript Async and Await

December 11, 2019

There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”.

What is AJAX

December 11, 2019

AJAX (Asynchronous JavaScript And XML) allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.

Using Gatsby with axios

December 10, 2019

It’s also possible to use an “unstructured data” approach in Gatsby sites, no GraphQL required.

Using the State Hook

December 07, 2019

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

AWS Full Course Tutorial

December 06, 2019

This AWS full course will help you understand what is AWS (Amazon Web Services), how did AWS become so successful, the services that AWS provides, the future of AWS and a demonstration on deploying a web application in AWS.

Learn Sass in 30 minutes

December 06, 2019

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

Dying to be me! Anita Moorjani

December 05, 2019

Her true story will radically alter your current beliefs about yourself, your purpose on earth, your health, your relationships, and your life!

Introducing React Hooks

December 05, 2019

React 16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all packages, including React DOM. React Native supports Hooks since the 0.59 release of React Native.

JavaScript Array & Object Destructuring in ES6

December 04, 2019

Destructuring assignment is a cool feature that came along with ES6. Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

JavaScript Closures

December 03, 2019

JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures.

JavaScript Functions

December 03, 2019

Function expressions can be made "self-invoking". A self-invoking expression is invoked (started) automatically, without being called.

JavaScript Hoisting

December 03, 2019

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope

Web Full-Stack Dev Roadmap 2020

December 02, 2019

This web dev roadmap will help guide you in deciding what technology and languages you should learn about in 2020.

What is Responsive Web Design ?

November 25, 2019

Web pages can be viewed using many different devices including desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

react-icons library

November 24, 2019

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

What is CSS in JS ?

November 23, 2019

The modern React world is moving quickly to adopt the CSS in JS philosophy and Styled Components is one of the libraries leading the charge.

Composing and styling Gatsby themes

November 14, 2019

Gatsby themes open up a lot of incredible opportunities, and theme-ui might just be the perfect tool for making themes composable, interoperable, and even more powerful.

What is JSX Pragma

November 14, 2019

A pragma is a compiler directive. It tells the compiler how it should handle the contents of a file. JSX syntax on its own isn’t readable by the browser. In order to ship something readable to the browser, JSX needs to be converted to plain JavaScript.

Build a Gatsby Theme

November 12, 2019

Gatsby Themes are the Next Big Thing™ for building web sites and apps.

Migrating from WordPress to Gatsby

November 09, 2019

For the past four years, the blog had been running on WordPress. It was as fast, as custom, and as free of plugins as I could possibly make it, but WordPress is cumbersome, and there’s only so fast and pleasant to use you can make it.

Bad iPhone battery life?

November 07, 2019

Your iPhone running iOS 13.2 experiencing poor battery life? Has your battery gone from great to terrible? Here's what you need to know to diagnose and fix the problem.

Bootstrap Spacing : how it works

November 06, 2019

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

What is the JAM Stack

November 05, 2019

You may have already seen or worked on a JAMstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator...

如何創造自己的好運(上)

November 04, 2019

Dr. Hsu 許醫師鑽研新時代思想20幾年,尤偏愛賽斯;同時從事身心靈整體健康研究,對於癌症的治療及預防復發上有獨到心得。

What is Gatsby JS and Why use it

June 10, 2019

This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.

Gatsby for Agencies and Teams

March 27, 2019

This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.