mpj

Thoughts on Templating languages

I get a lot of questions about what I think about Vue.

I won't comment too much on Vue in general because I'm not familar enough with it, but I'm very familiar with templating systems, and in articles praising Vue, the fact that it uses templating system instead of JSX is almost always cited as a reason to choose Vue. This drives me up the friggin' wall, because the negative side effects of templates are not communicated or discussed. JSX exists for good reasons. To me, JSX is a great simplification and clear improvement over templates.

Template languages are often sold on looking superficially good. I recently ran across yet another one of these articles citing the wonders of Vue, and especially templates. In this article, this JSX example is included:

tkh44

import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion

const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }

const AnimationExample = () => (
  <Router>
    <div>
      <ul>

TylerK

import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';

const App = () => {
  render() {
    return (
      <Router>
        <Route

mjackson

// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'

ReactDOM.render(
  <Router>
    <Route path="/about" component={About}/>
    <Route path="/:username" component={User}/>
  </Router>
)

sergiodxa

// with props
import React, { Component } from 'react';

// this method work as a our base `handleClick` function
function handleClick(name, event) {
  alert(`hello ${name}`);
}

class App extends Component {
  constructor(props) {

developit

import { h, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  The key is, instead of passing virtual DOM elements as "children" to this component,
 *  you pass a _function_ that returns virtual DOM elements. Fetch calls that function and passes it the network data.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {

developit

import { h, cloneElement, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  Just to demonstrate a compositional component that requires input massaging.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {
    this.update();

ljharb

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

nepsilon

What you should know about tabindex

tabindex is an HTML core global attribute.

With it you can control in what order the elements get the focus, when the user presses the TAB key. You can also prevent an element to gain focus through the TAB key.

Typical example:

1. We have a login form

gr2m

// It could be done more elegantly, instead of using glob it could walk the 
// relative dependencies, so it would be more flexible and could actually 
// be turned into a package that could be run before publishing to npm
var fs = require('fs')

var detective = require('detective')
var glob = require('glob')
var _ = require('lodash')
var buildinModuleNames = require('builtin-modules/static')