DEV Community: Darcy

DB best practice question

Darcy — Tue, 05 Jan 2021 03:48:36 +0000

I am building an app on Strapi and am deciding on the best practice to organise the database.

I have a Table (‘Job’) that has roughly 60 rich text form fields. Additionally, each of the form fields needs to have a ‘visibility’ boolean value, which toggles whether the field is viewable by certain users.

Regarding the database structure, do you think it is better practice to have two separate fields, or to combine them into a single JSON field that contains 'value' and 'visibility' as keys within the field?

The upside of having them separate is that can store them text and boolean, but the downside is that it will double the number of fields needed for each Table.

How to make a Drupal REST API

Darcy — Sat, 22 Aug 2020 06:25:03 +0000

I want to create a React component on a Drupal8 site to display tweets.

To do so, I've decided to use Drupal as a backend to make a REST API of Twitter feed and use that feed in the React component.

Although I have written a couple REST APIs on NodeJS, I am confused about how/where to start on making a REST API on Drupal. Does anyone know a good tutorial/guide to get me started?

Much appreciated!

Headless CMS recommendations

Darcy — Sun, 26 Apr 2020 08:10:31 +0000

I have used headless CMS for personal projects or smaller clients. However, for a number of large clients (both private and government sectors) I have used Drupal and Wordpress due to the client's preference.

However, I am really looking at some of the headless CMS alternatives due to a lack of flexibility with time spent configuring Drupal projects.

Can anyone recommend a good headless CMS, specifically for large clients?

Help! How to upload files to S3

Darcy — Sat, 18 Apr 2020 02:12:22 +0000

Hey all :) I am struggling with something and wondering whether somebody could help me.

I am trying to upload files to S3. I have watched several tutorials on it and am still having trouble, specifically:

Whether to upload from server-side or client? For this project, the cost is a priority and based on this article I am learning toward uploading client side. Is that the correct approach?

The power of 'focus music' for programmers

Darcy — Sun, 19 Jan 2020 23:22:06 +0000

👋

If you've developed a seriously high tolerance for caffeine like me, you may want to read on 🤔.

Quickly after working full-time as a developer, I began to realize that my morning cup of Joe wasn't working for me anymore. Soon, two, three and then four cups of Joe ☕ ☕ ☕ ☕ simply wasn't cutting it for me!

The coffee jitters had me all like:

I explored other ways to boost my morning productivity. l-Theanine combined with the coffee does help, but the rest that I tried were overpriced and way overhyped IMO (bulletproof coffee 🤥).

I recently discovered, what I can only describe as, 'focus music'. That is music which has been specifically created to improve focus and concentration. Heck, even Kipochge listens to Kelly Clarkson. I have always avoided music while working as it invariably becomes even more distracting than the original noise I'm trying to drown out. So, when I signed up for a trial with Brain.fm, I wasn't expecting too much (although, I did expect it to be at least better than Kelly Clarkson). However, I was pleasantly surprised by how effective their music was! I was able to quickly and consistently develop a flow state. There is a bunch of research about why their music is so effective (something to do with pitch and lack of instrumental complexity of the music). All I know is that I have replaced my jitter-inducing coffees with a cup of green tea 🍵 and focus music 🎵.

He's deep in that flow:

I have since found the Brain.fm desktop app a little buggy and prefer to work my phone switched off. Therefore, I have replaced it with simply using YouTube which is awash with free focus music soundtracks.

Have you tried 'focus music', and what are your productivity boosters?

A Year in Review: 2019

Darcy — Tue, 31 Dec 2019 09:21:38 +0000

As a review for the year, I thought that I'd compile a list of lists for several categories.

Books

Deep Work: Rules for Focused Success in a Distracted World: details the 'science of productivity'. As the distractions around us continue to grow, the ability to perform deep work is becoming both increasingly rare and valuable. The book illustrated the critical importance of 'attention residue'. That is, if you're constantly switching from one task to another, a residue of your attention remains stuck thinking about the previous task. To avoid this, work for extended periods with full concentration on a single task. As a consequence of reading the book, I've been encouraged to disengage from social media and, as the author describes, 'embrace boredom' as a tool to train ourselves for intense concentration.
Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones: focuses on very small but incredibly powerful (hence atomic) habits. When applied, the changes that stem from atomic habits may seem small and unimportant at first but will compound into remarkable results over time. Habits are the compound interest of self-improvement and therefore focus on the system rather than your goals. In addition, the book outlined exactly how to introduce (and stick to) an atomic habit: 1) make it obvious, 2) make it attractive, 3) make it easy, and 4) make it satisfying.
Ultralearning: Master Hard Skills, Outsmart the Competition, and Accelerate Your Career: the author, Scott Young, is an incredibly interesting character: from completing MIT's four-year undergraduate computer science curriculum in 12 months, without taking any classes! Or, by traveling the World without speaking English for 12 months and learned Spanish, Portuguese, Mandarin Chinese, and Korean! The book is about how to supercharge your learning to become hyper-productive.
Mean Genes: whilst genes haven't changed much in tens of thousands of year, the environment around us has changed enormously. Essentially, what happens when our hunter-gatherer minds are transported into a 'fast food nation'. The result is a "mismatch" that results in four categories of self-defeating behaviors (profligacy, gluttony, infidelity, and addiction). The book is a fun tour of these behaviors and provides an insight into some of our self-defeating but difficult-to-control behaviors.
Algorithms to Live By: The Computer Science of Human Decisions: provides practical examples of the application of computer science and algorithms to real-life decision-making. In doing so, it distills an algorithm into simply a series of steps that you can follow to solve a very specific problem, which can then be run as often you like and will always provide a solution.

2019 Tech Trends

React Hooks: although released in (late) 2018, React Hooks have exploded in 2019 as a way to manage a component's state and lifecycle in functional components with a simple and concise syntax. In addition, React provides the ability to build custom hooks to create reusable components and shared logic, without the need to create higher-order components or use render props. Personally, I'm still drawn to the clearer separation between stateless functional components and Class components, although to ability code so succinct is drawing me more and more to React Hooks.
Accessibility and Internationalisation: after the rapid developments of JavaScript between 2015-2018, developments have begun to evolve less dramatically. As a result, the focus is increasingly shifting toward ensuring the web is open and useable by everyone! Specifically, ensuring the web is accessible to people with disabilities, those using mobile devices, or with slow network connections. In addition, developers increasingly design/developing their work in a way that ensures it will be accessible, or easily adapted for, users from any culture, region or language.
ES2019: whilst not as significantly as other recent releases ES2019 brought some nice new features, including to the ability to strip whitespace (String.trimStart()/String.trimEnd()), the ability to concatenate arrays up to a specified depth (Array.flat()/Array.flatMap()), the ability to transform a list of key-value pairs into an Object (Object.fromEntries()), and try/catch binding!
GraphQL: GraphQL is data-driven, as opposed to endpoint-driven, allowing the client to declare the exact data they need and receive a corresponding JSON response from the server. Thus, giving the developer full visibility into the API. GraphQL overcomes several of the shortcomings of REST APIs. In 2020, GraphQL may overtake REST for new companies, and established companies continue to migrate toward GraphQL!
TypeScript: the language de jour, largely because it offers tools that result in less buggy and more readable code with the types of object interfaces offering self-documentation. Whether TypeScript becomes a mainstay in the frontend community or goes the way of CoffeeScript remains to be seen. However, the rapid releases from v3.0 in late-2018 to v3.7 in 2019 indicates that it remains on the rapid-growth trend!

2020 Predictions

Watch for ES2020: Since ES2015, JavaScript has been rapidly evolving. As of 2019, there are many new features in the 'Stage 3' phase meaning that they're close to being finalized, and browsers/Node are getting support for these features now.

Optional Chaining Operator

Optional Chaining allows for the ability to conditionally check for nested objects. Thus, if our program runs into an undefined or null property, instead of crashing, it will simply return undefined. At present, it hasn't been implemented in any browser, but Babel will use this feature.

const obj = {
  prop1: {
    prop2: {
      prop3: {
        prop4: {
          prop5: 5
        }
      }
    }
  }
}

console.log(obj?.prop1?.prop2?.prop3?.prop4?.prop5); // 5
console.log(obj?.prop100?.prop2?.prop3?.prop4?.prop5); // undefined

Nullish Coalescing Operator

The problem with the || operator is that it applies to all 'falsy values'. To solve this, the ?? has been introduced to set the default value only if the first time is either null or undefined.

const ES2015_Feature = x || 500;
const ES2020_Feature = x || 500;

const x = false;

console.log(ES2015_Feature); // null
console.log(ES2020_Feature); // 500

CSS-in-JS will overtake standard CSS: the frontend community is solidifying around uniting everything under JavaScript! CSS-in-JS remains a big part of this transition. The simplicity of passing props, instead of using different class names, means that it handles that dynamic styles with a declarative syntax. The result is a much cleaner and more logical integration of style between CSS/JSX/JS code. In 2020, watch out for Facebook's release of their own CSS-in-JS library!
Micro Frontends: micro frontends allow you to split your frontend architecture into different frontends for different teams working on different parts of your app. The growth of Bit has allowed smaller teams of devs to isolate, build and test individual components. In 2020, watch for Bit introducing deployments which will allow teams to deploy and update standalone frontends.
Vue3: with a passionate community following devoted to its relative simplicity and the fact that it's not controlled by a giant tech company (unlike React and Angular). In 2020, watch out for the long-anticipated update to v3.0 expected in Q4 2019, so expect significant Vue growth in 2020!
Established technologies aren't going anywhere: despite the release of new and shiny libraries and languages, the enduring demand for established technologies (think Drupal, PHP, WordPress, jQuery) will remain strong throughout 2020.

Happy New Year! 😃

An intro to CSS-in-JS libraries

Darcy — Sun, 08 Sep 2019 02:03:04 +0000

As so many inspired by Christopher Chedeau's talk on Facebook's use of CSS in JS, many libraries have emerged as a way of implementing the methodology. In fact, when selecting a library, you may yourself slightly overwhelmed with the number of options available.

At the core of each of the libraries is the ability to use them with modern component-based applications. The aim of this article to provide an outline and comparison of four of the libraries that I've used most often:

Styled-Components
Emotion
Glamor
Aphrodite

Summary

Library	Template Literal	Object Literal	Automatic Vendor Prefixing	Server-Side Rendering	ClassName Required
styled-components
Emotion
Glamor
Aphrodite

From the table above, it is clear that many of the key features are shared by all the libraries. In fact, I often find myself choosing a particular CSS-in-JSS library based on syntactic reasons. At the time of writing, that means using styled-components for converting preexisting projects to React (for the ability to use template literals) and Aphrodite for new projects (for, in my opinion, it's clearer separation of CSS and JS logic).

Template Literal vs Object Literal

At the time of writing, only styled-components and Emotion allow you to write styles as template literals. This is a significant advantage for when you are converting an existing codebase to React, as it forces you to do very little modification of the CSS.

Template Literal

// Using template literal string in Emotion
const base = css`
  color: hotpink;
`

render(
  <div
    css={css`
      ${base};
      background-color: #eee;
    `}
  >
    This is hotpink.
  </div>
)

Object Literal

// using Object Literal styles in Emotion

const Button = styled.button(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
)

render(
  <Button fontSize={16}>
    This is a darkorchid button.
  </Button>
)

Syntactic Differences

In comparing the syntactic differences between the libraries, it is best to replicate the same element. For these purposes, I will be creating two buttons of different colors.

Styled-Components

import React from 'react';
import styled, { css } from 'styled-components';

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #007bff;
  color: #007bff;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: #007bff;
    color: white;
  `}
`;

const StyledComponentsLib = () => {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
};

export default StyledComponentsLib;

Emotion

import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/core';

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #007bff;
  color: #007bff;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: #007bff;
    color: white;
  `}
`;

const EmotionLib = () => {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
};

export default EmotionLib;

Glamor

import React from 'react';
import { css } from 'glamor';

const Button = (props) => {
  const myButton = css({
    background: 'transparent',
    color: '#007bff',
    borderRadius: '3px',
    border: '2px solid #007bff',
    margin: '0.5em 1em',
    padding: '0.25em 1em'
  });

  return (
    <button className={css(myButton, props.css)}>{ props.children }</button>
  );
};

const GlamorLib = () => {
  const primaryButton = css({
    background: '#007bff',
    color: 'white'
  });

  return (
    <div>
      <Button>Normal Button</Button>
      <Button css={primaryButton}>
        Primary Button
     </Button>
    </div>
  );
};

export default GlamorLib;

Aphrodite

import React from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  myButton: {
    background: 'transparent',
    color: '#007bff',
    borderRadius: '3px',
    border: '2px solid #007bff',
    margin: '0.5em 1em',
    padding: '0.25em 1em'
  },
  primary: {
    background: '#007bff',
    color: 'white'
  }
});

const Button = (props) => {
  const primaryButton = props.primary && styles.primary;

  return (
    <button className={css(styles.myButton, primaryButton)}>
      { props.children }
    </button>
  );
};

const AphroditeLib = () => {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
};

export default AphroditeLib;