james0r

React Hooks are a feature introduced in React version 16.8 that allow you to use state and other React features without writing a class. They are JavaScript functions that let you "hook into" React state and lifecycle features from function components Source 3.

There are two main rules for using hooks in React:

1. Only call hooks at the top level: Don't call hooks inside loops, conditions, or nested functions. Instead, always use hooks at the top level of your React function, before any return keyword Source 2.

2. Only call hooks from React function components or custom hooks: You should never call hooks from regular JavaScript functions. However, you can call hooks from React functional components and custom hooks Source 2.

These rules are enforced by the ESLint plugin called `eslint-plugin-react-ho

james0r

a simple git branching model

This is a very simple git workflow. It (and variants) is in use by many people. I settled on it after using it very effectively at Athena. GitHub does something similar; Zach Holman mentioned it in this talk.

Update: Woah, thanks for all the attention. Didn't expect this simple rant to get popular.

james0r

<?php
public function onTotalsCalculate() {
    $storedPassword = $this->config->get('plugins.gravel.webhook_password');
    $providedPassword = $this->grav['uri']->param('p');

    if ($storedPassword === $providedPassword) {
      $flex       = Grav::instance()['flex'];
      $reviewsCol = $flex->getCollection('reviews');
      $locationsDir = $flex->getDirectory('locations');
      $reviewsApproved = $reviewsCol->filterBy(['approved' => true, 'processed' => false]);

james0r

If you've found your way to this article, odds are you're already familiar with Grav CMS.

For the uninitiated, Grav is a Flat-File CMS which instead of using traditional databases like MySQL, Postgres, or MongoDB, Grav primarily uses YAML and Markdown for storing your page data.

That's enough to get the job done for many sites--but if you have data that doesn't really warrant a page and needs to be more dynamic in its creation, storage, and retrieval, Grav pages might feel like you're attempting to smash a square peg in a round hole.

Meet Grav's Flex Objects.

Grav's Flex Objects require Grav version 1.7+

james0r

In my-plugin/my-plugin.php:

public function onPluginsInitialized(): void {
   ...

  $this->router();
}
public function router() {
 /** @var Uri $uri */

james0r

{
  "11": {
    "published": true,
    "country": "AE",
    "admin1_code": "05",
    "admin2_code": "",
    "name": "Ras Al Khaimah City",
    "ascii_name": "Ras Al Khaimah City",
    "lat": "25.78953",
    "lng": "55.9432",

james0r

/**
 * Returns matched element or nodelist.
 *
 * @param {string} A valid CSS selector.
 * @param {HTMLElement} An object instance of HTMLElement.
 * @param {boolean} True uses querySelectorAll and returns a Nodelist.
 * @return {HTMLElement or Nodelist} Matched element or elements.
 * Usage:
 * q5('.some-class') // returns single element in the DOM tree
 * q5('.some-class', ancestor) // returns single element descendant of parent element

james0r

Glowing text animation

A Pen by James on CodePen.

License.

james0r

import Vue from "vue";
import Router from "vue-router";
import Signup from "./views/Signup.vue";
import Signin from "./views/Signin.vue";
import Home from "./components/ClientsComponent";
import axios from "axios";
import { API_URL } from "./constants";

const url = API_URL + "secret";

james0r

<?php

return PhpCsFixer\Config::create()
    ->setRules(array(
        '@PSR2' => true,
        'array_indentation' => true,
        'array_syntax' => array('syntax' => 'short'),
        'combine_consecutive_unsets' => true,
        'method_separation' => true,
        'no_multiline_whitespace_before_semicolons' => true,