Notebook — Talentedunicorn

Changing author information on a git commit

Fri, 13 Mar 2020 00:00:00 GMT

There might be times where you need to “rewrite” history on Git. The most common case is updating the commit message to fix typos or change the message, but there might be times one would want to update the author information - this is how you go about it.

Do not do this on published/pushed commits (unless you know what you are doing)

To change the author of the last commit:

git commit --amend --author "NAME <EMAIL_ADDRESS>"

And that’s it, your commit author will be updated. For earlier commits, you could rebase then run commit amend.

Extra git tip: Rebasing the first commit of a repository

Usually rebase looks like git rebase -i COMMIT_TO_START_FROM but if you wanted to change the first commit COMMIT_TO_START_FROM can’t be the commit you are changing (first commit). To be able to do that the command changes to: git rebase -i --root. ;)

Culture Shock by Cultprint jolts Telawi back to life

Thu, 21 Nov 2024 00:00:00 GMT

Words by: Alfonso

Running from 15 November 2024 to 12 January 2025 at 3, Jalan Telawi 3, Cultprint’s group exhibition Culture Shock offers a creative counterpoint to the area’s reputation as a watering hole for expats and partygoers, injecting the street with culture and conversation amid its late-night revelries.

Horsing around - Ernest Zacharevic

Cultprint, founded by Lithuanian public artist Ernest Zacharevic and Malaysian embroidery artist Sheena Liam, began as a printing studio in Penang before evolving into a dynamic space for residencies, exhibitions, and community engagement. With Culture Shock, its debut in Kuala Lumpur, Cultprint reimagines the former CzipLee store as a gallery that mirrors both Bangsar’s evolving cultural identity and its own ethos of independent artistic expression.

Curated by Zacharevic, the exhibition showcases 16 celebrated and emerging artists, each bringing unique perspectives through a variety of mediums. They include Zacharevic himself, renowned for his interactive public murals, and partner Liam, whose minimalistic embroidery explores themes of identity and self-reflection.

Sliz

Insomnia - Sheena Liam

The exhibition showcases a dynamic blend of local and international talents, with a strong emphasis on Penang-grown and Penang-based artists. Among them are Azmi Hussin, known for his witty caricatures; multidisciplinary artist Bibichun, whose works explore cultural narratives; Low Chee Peng, whose fine art reflects intricate detail and emotional depth; TAZONE, a rising talent in high-risk graffiti art; and text artist Trina Teoh, who bridges prose and visual art.

Outside of the island city, other homegrown artists include Cloakwork, whose humorous and energetic graffiti murals are beloved globally; Kenji Chai, creator of the iconic Chaigo character graffitied throughout KL; Teebai, whose pieces tackle socio-political themes; Bono Stellar, known for vibrant, light-filled sculptural installations; and Sliz, who blends surrealism and street art.

Inner Chaos - Kenji Chai

Cloakwork

Blossom - Teebai

Rounding out the exhibition are Martha Cooper, the legendary American photographer of street art culture; Isaac Cordal, the Spanish sculptor famous for his poignant miniature installations; Yok & Sheryo, a New York-based duo fusing folk motifs and urban art; and finally Singapore’s Sam Lo, affectionately dubbed the “Sticker Lady” for their provocative works.

Follow the leader (1) - Isaac Cordal

Follow the leader (2) - Isaac Cordal

The exhibition’s layout reflects its theme of cultural collisions. The ground floor is alive with vibrant, collaborative works while the upper level offers a quieter, more introspective atmosphere, showcasing the range of styles and voices united under Cultprint’s vision.

Lost postcards (1) - Isaac Cordal

Lost postcards (2) - Isaac Cordal

Lost postcards (3) - Isaac Cordal

For more information, follow Cultprint on Instagram, check out their website, or visit the exhibition space at 3, Jalan Telawi 3.

Mockup resources and tools in web development

Thu, 01 Jun 2017 00:00:00 GMT

Design on the Web has changed a lot since the days of marquee scroll and table layouts and this has also changed way we display designs.

There is a lot that goes into designing a web interface, from storyboarding to a sketch/wireframe/whatever-hip-thing-kids-use-now(cough sketch)/ a pretty static Photoshop document. Eventually your designs will end up on …the web.

Mockup devices

Since the designs will be used on a device like a computer, mobile or future toasters that connect to the Internet, it makes sense to showcase your designs with those devices.

apart from giving context to the design, mockups with devices look more natural and prettier

Also we can all agree apart from giving context to the design, mockups with devices look more natural and prettier.

There are a few ways to generate a mockup of your shiny designs with a device template

Generators — Generating mockups from uploaded screenshots
- Placeit
HTML5 templates
- Pixelsign HTML5 device mockups
- MockuPhone
Photoshop — Manual way using blank templates
- Facebook design resources
Sketchappsources — Device mockup resources for Sketch

I’d like to hear more on your experiences with presenting web designs and other tools you use.

Coffee or Tmux

Wed, 11 Nov 2020 00:00:00 GMT

According to Wikipedia - tmux is a terminal multiplexer for Unix-like operating systems. But to me; tmux is a complex tool to have on the terminal. Using tmux gives your terminal super-powers (if you may), from being able to split your terminal window into multiple panes to creating tabs (also known as windows on tmux).

Image of tmux with split panes

I have been using tmux for a while now and here’s a few things i’ve learnt so far that might be useful to a beginner

Changing the default prefix key
Panes
How to copy and paste on tmux

Changing the default prefix key

Tmux uses a prefix key for global commands, the default key is CTRL + b or Cmd + b which I find to be a hard combination to reach, so it’s probably the first thing you’d want to change after installing tmux on your computer.

This can be done in the tmux configuration file .tmux.conf on the Home directory of your user account. Edit this file and add/replace the line similar to below:

unbind C-b
set -g prefix C-a

This will set the prefix to CTRL + a key. Now you could split the window vertically by pressing CTRL + a and " and will have two panes.

Panes

By default a window starts with one pane. The window can then be split into multiple panes that appear on the screen. This is common to the “window splitting” feature on popular terminal emulators like terminator or hyper

A tmux window with three panes

Here are a few commands I use a lot with panes

Moving between panes

[PREFIX]+[DIRECTION] // so for Up = CTRL+A then Up

Zooming in and out

[PREFIX]+Z // or in our case CTRL+A then Z

Splitting

[PREFIX]+% // for a horizontal split
[PREFIX]+" // for a vertical split

Copy and paste

This is especially useful if you need to copy output from one pane to another or within the same pane.

Sophia Brandt wrote a nice article on how that works and more but in a nutshell, here’s the steps:

Enter copy mode by pressing CTRL+b, [.
Use the arrow keys to go to the position from where you want to start copying. Press CTRL+SPACE to start copying.
Use arrow keys to go to the end of text you want to copy. Press ALT+w or CTRL+wto copy into Tmux buffer.
Press CTRL+b, ] to paste in a possibly different Tmux pane/window.

Hope you learned something useful and are using tmux in your terminal. Feel free to share what you like about tmux ;)

CSS variables

Wed, 27 Feb 2019 00:00:00 GMT

In the modern web¹ things aren’t fixed as they were a few years ago. Responsive design is now a standard that directly impacts not just how your users experience your website but also ranking in search engines.

Website performance is more so important especially now that being able to build things isn’t enough if those things don’t perform well and the distinction between application and website is getting more a more blurred. Exciting new features are available now on this robust platform making working with the web easier, less-hacky and fun

Cascading Style Sheets (CSS) has mostly been on the backseat when it comes to “languages” on the web (atleast HTML has language in it’s name) but this has been changing with the things we are now able to do with CSS. We had come up with ways to make CSS more robust but most of those ways have been non-native and require extra setup on build; Sass and LESS will have limitations when it comes to changes needed on runtime. In early 2018, the W3C put out a draft for the cascading variables module which allows for reusable variables in CSS.

Usage

As of the current date of writing this post; support for CSS variables is available on most browsers².

To declare a variable the syntax is --[variable-name]: [value]; and can then be used in a cascading fashion in place of values.

Example

:root {
  --global-padding: 2rem;
}

header {
  padding: var(--global-padding);
}

Default values

Cascading variables supports a default fallback value which will be applied if the variable specified is invalid.

header {
  --spacing: 2rem;
  background: var(--spacing, yellow);
}

yellow will be applied since 2rem is not a valid color

Common Gotchas

As of writing this post, there’s a few things that aren’t (yet) possible with CSS variables.

Can’t be used in media queries. So @media(var(--breakpoint)){ ... } won’t work
Concatenation without calc. padding: var(--space-unit)px; won’t work instead padding: calc(var(--space-unit) * 1px); works

Depending on your project and users of your product, it’s definitely worth considering using CSS variables. I’d like to know your experiences and use cases for CSS variables.

Modern, to the time of writing this post ↩
Unfortunately Internet Explorer doesn’t have good support…yet ↩

How width and max-width work

Fri, 29 Jul 2016 00:00:00 GMT

For most Front-end developers on the web implementing layout designs; setting the width property is a frequent part of the task. Understanding the property saves a lot of time during development and improves code quality.

Recently Chris Coiyer of CSS-Tricks published a post titled A Tale of `width` and `max-width`.

In the article he demonstrates how the width and max-width CSS properties work with the subject of a modal module, although the technique can be applied on other elements.

Chris Coiyer: You might want to limit the width of a modal, right? Kinda gives it that “modal” look on larger screens. Let’s say 600px sounds right. But, you want to make sure it doesn’t bust outside of its parent element. For example, avoid causing horizontal scrolling on a mobile screen.

How would you do that?

[element] {
  width: 600px;
  max-width: 100%;
}

[element] {
  width: 100%;
  max-width: 600px;
}

The answer: it doesn’t really matter, they are the same thing.

He demonstrates it with this reduced test case

See the Pen <a href='https://codepen.io/chriscoyier/pen/pbaQvG/'>No difference between these</a> by Chris Coyier (<a href='https://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='https://codepen.io'>CodePen</a>.

Read the full article here

Using Google analytics on Astro

Wed, 16 Aug 2023 00:00:00 GMT

If you’ve been keeping up with the extensive number of tools to build your website with; you may have come across Astro — the all-in-one web framework designed for speed.

Like a number of similar frameworks¹; Astro embraces the server-first approach by rendering HTML on the server making websites faster to load. This makes Astro perfect for content-focused websites.

I recently needed to add a Google Analytics tracking tag to a fun Astro project and this is how I did it.

All about the layout

I needed to add the script tags to the layout so they get rendered on pages using the layout. But rather than pasting the analytics scripts right into the layout template I created a component that gets rendered in production only.

---
import Analytics from "components/analytics.astro"
const isProd = import.meta.env.MODE === 'production';
---

...
<head>
  ... {isProd &&
  <Analytics />
  }
</head>

Analytics component

The component itself needed to be reusable so I extracted the tag ID to an environment variable named GTAG

---
const tagId = import.meta.env.GTAG;
---

<Fragment>
	<!-- Google tag (gtag.js) -->
	<script is:inline async src=`https://www.googletagmanager.com/gtag/js?id=${tagId}`></script>
	<script is:inline define:vars={{ tagId: tagId }}>
		window.dataLayer = window.dataLayer || [];
		function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());

		gtag('config', tagId);
	</script>
</Fragment>

You may have noticed the define:vars directive on the second script tag — this allows us to use server-side variables inside <script> and <style> tags.

We use the is:inline directive for the script to be rendered inline on the HTML.

You could alternatively pass the variables manually through data attributes data-* and then reading the values with this.dataset.[variable-name]

Cover photo: a red and white rocket ship flying through the sky — Andy Hermawan

Frameworks like GatsbyJs or NextJs ↩

Tabs

Thu, 14 Sep 2017 00:00:00 GMT

Tabs are one of those UI components that make it easier to access a lot of information on a single window compared to other approaches i.e. Scrolling, links to different screens/windows etc.

They are quite essential most UI frameworks include tabs as part of the package.

Some tabs from some of the popular frameworks

Bootstrap tabs

Zurb Foundation tabs

Semantic UI tabs

For the past few months my workflow has been moving towards having less dependency on third-party frameworks and libraries. This gave me more control on what goes into my codebase and hence reduce HTTP calls, overall file sizes and library debugging.

…less dependency on third-party frameworks and libraries…reduce HTTP calls, overall file sizes

While working on a project I needed to have a component that can display data on a tabbed container. With no support for HTML tabs element I decided to attempt making the simplest tab component I could.

The requirements

Clean semantic markup
Minimal style dependency
Supporting JavaScript for necessary interactions

With that I started working towards building the simple tabs

Marking up

The idea was to have a .tab wrapper containing .tab-header for links and .tab-content for the content.

<div class="tab">
  <div class="tab-header">
    <a href="..">...</a>
    <a href="..">...</a>
  </div>
  <div class="tab-content">....</div>
</div>

Styles

This was mostly done with Tachyons¹ with a bit of some custom bells and whistles. With that said; there’s not much to describe here as far as styling goes

Scripting

As mentioned earlier, I set out to write minimal JavaScript as possible². Essentially I had to break what’s needed into

Showing active tab content when links are clicked
Toggle active state for active link

After a few iterations, I arrived at this class structure

class Tabs {
  constructor(el) {
    // Initialize constants and initial call
  }

  bindClick(links) {
    // Binding click events to handler
  }

  activate(activeLink) {
    // Activate link based on activeLink
  }

  showTab(tabName) {
    // Display tab content
  }
}

Demo

Here’s everything put together on CodePen where you can play around with the code.

See the Pen <a href='https://codepen.io/talentedunicorn/pen/VzyMzg/'>Simple tabs</a> by Ezekiel (<a href='https://codepen.io/talentedunicorn'>@talentedunicorn</a>) on <a href='https://codepen.io'>CodePen</a>.

If you enjoyed (or hated) this article, do leave me a line below and please do fork the pen and share your version ;)

Tachyons uses semantic classes that describe styles…almost like writing inline css ↩
There’s “mushroom” for improvement of course ↩

Star rating component

Sun, 26 Aug 2018 00:00:00 GMT

Recently when working on a project I came across a design that included rating information on the interface. The UI included some “stars” representing the rating with the value shown as the colored in part of the star and the total rating being the number of stars.

Rating stars

First thing first, the markup structure of the indicator HAD to be semantic and accesssible before anything else

Markup

Rating indicators have been around for a while on the Internet but there hasn’t been much standardization of the markup used in these elements. I did some digging and found different methods used by current popular websites.

For example Airbnb uses svg inside multiple spans

Airbnb rating

<span role="img" aria-label="Rating 5 out of 5">
  <span><svg></svg></span>
  <span><svg></svg></span>
  <span><svg></svg></span>
  <span><svg></svg></span>
  <span><svg></svg></span>
</span>

While Amazon uses the <i> element with a <span> for the label

Amazon rating

<i class="a-icon">
  <span class="a-icon-alt">3.6 out of 5 stars</span>
</i>

But I needed something that would be semantic and accessible to users. I came across the <meter> element that had most of the semantic aspects; if you are new to the meter element it is described as “representing either a scalar value within a known range or a fractional value.”

Meter element represents either a scalar value within a known range or a fractional value.

The markup for the rating element would look something like this

<meter min="0" max="5" value="3.5">Rating 3.5 out of 5</meter>

By default, the meter element has a bar similar to the progress element.

Rating 3.5 out of 5

What we need is “stars” to represent our rating, we’ll get this done with the styles

Styling

The meter element is well supported across a lot of browsers (with exception of Internet Explorer at the time of this post). Styling the meter element is covered quite extensively on this article by Pankaj Parashar but I was not pleased with the number of vendor prefixes needed to change the look of the element.

In addition to consistent experience across browsers; maintaining semantics and accessibility is of high priority. According to the article; pseudo-elements for the meter element are only supported on webkit browsers so I decided to take a leaf out of amazon’s book and wrap the meter element in a <span> which resulted to the following markup:

<span class="meter" title="Rating 3.5 out of 5" style="--currentIndex: 3.5">
  <meter min="0" max="5" value="3.5">Rating 3.5 out of 5</meter>
</span>

Preparing the star graphic

For the stars, I found an svg which I had optimized and converted to a data-uri then used that as my background.

Binding the data to styles

To communicate the value between my markup and styles I used CSS variables with the rating value in an inline style attribute.

I would later on use that value to render the correct representation of the rating. Here’s how my styles looked like

/* Some variables */
:root {
  --size: 2rem;
  --max: 5;
  --inactive: gray;
  --active: yellow;
}

.meter {
  meter {
    display: none;
  }
  display: inline-block;
  width: calc(var(--size) * var(--max));
  height: var(--size);
  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    mask: left center/contain;
    mask-image: var(--star);
  }

  &::before {
    background: var(--inactive);
  }

  &::after {
    content: "";
    z-index: 1;
    background: var(--active);
    right: calc(100% - (var(--currentIndex) / var(--max) * 100%));
  }
}

I needed two “layers”, one for the base stars which I used the &::before pseudo-element and for the active state I used the &::after. Below is a pen demonstration:

See the Pen <a href='https://codepen.io/talentedunicorn/pen/qMBBdE/'>Rating with Meter element</a> by Ezekiel (<a href='https://codepen.io/talentedunicorn'>@talentedunicorn</a>) on <a href='https://codepen.io'>CodePen</a>.

Configure Auth0 JWT on CouchDB

Wed, 01 Jan 2025 00:00:00 GMT

CouchDB is an OpenSource NoSQL document database developed by Apache; it has built-in data replication which makes it great for offline-first applications.

Data replication allows users to continue using your application with a local copy of the database while offline — then once they are back online; their changes are automatically replicated (synchronized) with the remote database.

To replicate data securely users need to be authenticated on the remote CouchDB server. There are a few ways to do this;

Creating a user in the _users authentication database and using Basic Authentication or Cookies with each request
Using an extenal JSON Web Token (JWT)

Using external JWT tokens on CouchDB

You can use any JWT provider; in this example I will be using Auth0.

Firstly you need to have the following prerequisites;

An account on Auth0
An application on Auth0. See Quickstart guides for examples on how to create one.

After creating your application on Auth0 you should have a JSON Web Key Set url similar to this one

https://your-domain.auth0.com/.well-known/jwks.json

To find this on Auth0; navigate to the Advanced Settings section on your app and select the Endpoints tab.

Enable JWT authentication on CouchDB

Log into your CouchDB instance using Fauxton or REST API and enable JWT authentication by adding {chttpd_auth, jwt_authentication_handler} to authentication handlers

Set up public keys on CouchDB

Then add your public keys to the jwt_keys section of the configuration

[jwt_keys]
rsa:YOUR_KEY_ID = -----BEGIN PUBLIC KEY-----\n<YOUR_PUBLIC_KEY_FROM_JWK_SET>\n-----END PUBLIC KEY-----\n

Get the PEM format of your public key from the JWT key set url with the curl and openssl commands

curl https://your-domain.auth0.com/pem -s | openssl x509 -pubkey -noout

Get the key IDs from the JWT key set url using the kid value

{
    keys: [
        {
            kid: KEY_ID
        }
    ]
}

Your changes should be applied and you can make requests with a Bearer {jwt_token} in the Authorization header. You may need to restart your CouchDB server if you made the changes locally to the default.ini or local.ini files.

curl  -H "Authorization: Bearer AUTH0_JWT_TOKEN" https://your-couchdb-server/_session

If everything went well you should get a response like this

{"ok":true,"userCtx":{"name": USER_ID,"roles":[]},"info":{"authentication_handlers":["cookie","jwt","default"]}}

Authorizing access to a database

Since we may have multiple databases in our CouchDB instance we would want only authorized users have access to a database.

In CouchDB you can get authorized into either a member or admin class. To authorize a user add the USER_ID to either the member or admin fields. Alternatively you can define roles in your JWT provider and use those instead of individually adding usernames.

For Auth0, refer to the user_id field in the user details tab under Indetity provider attributes.

You should be able to make a request to the database and get a successful response

curl  -H "Authorization: Bearer AUTH0_JWT_TOKEN" https://your-couchdb-server/your-database/

That’s all for now.

Testing React applications with Github Actions

Sat, 16 May 2020 00:00:00 GMT

It goes without saying that code testing is beneficial for a variety of reasons. But most developers (me included) tend to skip testing when working on a project mostly due to the technical effort of setting them up ~~or pure laziness~~.

If you are super new to testing; the minimal setup would include a test runner and test coverage. There is a helpful article by JavasScipt January to get you started.

Test runners

These are programs that specifically run tests, they vary mostly in syntax and setup. Some of the most commonly used test runners on ReactJs are Jest, Mocha and Ava. We will be using Jest to do testing.

Test coverage

A test coverage / code coverage is a report of how much of the code has been executed when a test suite has completed. When writing tests, we need to know what pieces of the code to test. This is because the overall codebase includes dependencies (e.g. libraries) and your source code and therefore there needs to be a way to know if you’ve tested your source code.

Example application

The app we will build will have the following requirements:

To display the current status of GitHub website
To display the time of the status reported

Scaffolding the application

We will start with creating a basic React application using Create React App (CRA) by running the command npx create-react-app github-status.

After the process has completed, navigate to the folder github-status and start setting up tests.

Setup and running tests

As of the time of writing, CRA comes with an initial test and bundled with Testing library to help with DOM queries.

We can run tests using the command $ npm run test inside the root of our project. The results of the test would be displayed and are refreshed when there are changes to the code.

Note: To run tests with coverage run the command npm run test --coverage

Testing requirements

Before testing we mock the fetch API in the tests and reset after each test.

....
beforeEach(() => {
	global.fetch = jest.fn().mockResolvedValue({ status: 200, text: 'up' });
});

afterEach(() => {
	global.fetch = jest.fn();
});
....

And we will use waitForElement function to handle the async fetch function before we can assert results. waitForElement documentation.

Note: waitForElement is deprecated on testing library and is replaced by waitFor

Writing tests

We shall begin by writing tests for our requirements by adding two more tests to the file ./src/__tests__/App.test.js in our project.

To display the current status of GitHub website We will use a test id status to detect the status element

test("should display github status", async () => {
  const { getByTestId } = render(<App />);
  await waitForElement(() => getByTestId("status"));
  expect(getByTestId("status")).toBeTruthy();
});

To display the time of the status reported For the time we will use the test id status-time

test("should display github status time", () => {
  const { getByTestId } = render(<App />);
  expect(getByTestId("status-time")).toBeTruthy();
});

Running tests

After writing the tests, run the command npm run test and we can see the tests failing. We can now build the necessary code until all our tests have passed. See the codesandbox example for the code.

GitHub Actions

If you are not familiar with GitHub Actions, it is a way to execute workflows against code on GitHub. There is an article from CSS-Tricks about GitHub Actions that go in depth. Since November 2019 GitHub opened up Actions for free to public repositories.

Setting up the workflow

We will create a workflow that does the following on each push event to:

run our tests
build the code

To setup a workflow, we create a YAML file on the workflows directory .github/workflows/push.yml in our case we name it push.yml with the following content:

name: Test and build code

on:
  push:
    branches: [master, staging]
jobs:
  unit-test:
    name: Run tests and build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "10.x"
      - run: npm install
      - run: npm run test
      - run: npm run build

The file specifies actions to run the workflow when certain events occur on the repository through the on: key, in our case the push event. GitHub Actions documentation has a list of current supported event

We will run the jobs on the master and staging branches using the branches configuration. We defined a job with ID unit-test which will run on an ubuntu-latest container. The next line describes the steps to take:

Using actions/checkout@v2 a community action to checkout our code in the container.
Using actions/setup-node@v1 to setup a node environment on the container.

When we push the code, we are able to see under the actions tab on GitHub our tests and build running.

GitHub Actions running tests and build

We can view more details by clicking on the workflow, in this case the tests and build had been executed and completed successfully.

GitHub Actions running tests and build

This is just one example of GitHub Actions, you can create your own workflows or use something in the marketplace. Hope this was fun and informative.

The sass, the style & the ampersand

Tue, 08 Mar 2016 00:00:00 GMT

While browsing through my news feed I recently came across an article by Rich Finelli on the Sass ampersand covering neat techniques to using the Sass ampersand. I would recommend reading if you use Sass in development.

Among the examples given these are my favorite:

Overriding styles

To override styles on a selector you can add a parent selector with a suffix &

See the Pen <a href='https://codepen.io/talentedunicorn/pen/xVZvEY/'>Sass ampersand: Overriding styles</a> by Ezekiel (<a href='https://codepen.io/talentedunicorn'>@talentedunicorn</a>) on <a href='https://codepen.io'>CodePen</a>.

Adding modifiers to selectors

To add a selector .class-modified you can nest the &-modifier inside .class

See the Pen <a href='https://codepen.io/talentedunicorn/pen/qZbeoJ/'>Sass ampersand: Adding modifier</a> by Ezekiel (<a href='https://codepen.io/talentedunicorn'>@talentedunicorn</a>) on <a href='https://codepen.io'>CodePen</a>.

Using React useState with form inputs

Mon, 23 Sep 2019 00:00:00 GMT

As of React 16.8, ReactJs added hooks. State hooks is a way to have functional components and state at the same time (prior to this you had to have a class declaration if you needed internal state management in your component).

I won’t go into details about hooks but if you are keen, i recommend reading this article by Tyler McGinnis which covers the topic very well.

What I’d like to point out is something I came across recently when implementing state on a form input using the useState hook. I’ll skip some markup but here is a sandbox implementation of this use case you can play around with ;)

I start by declaring the state using useState hook:

  import React, { useState } from 'react';
  ...
  const [ username, setUsername ] = useState();

Then the markup looks like this:

<input
  name="username"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
/>

input’s value is initialized with a value of undefined if the hook is defined without a value

In a nutshell, the value of the username input should be updated to whatever the input target value is by setUsername function. When you try to edit the input you will get a warning like this:

React warning about changing uncontrolled input of type undefined

The reason this happens is because the input’s value is initialized with a value of undefined if the hook is defined without a value i.e. const [var, setVar] = useState(). This can be easily resolved by initializing the username to an empty string instead like so:

const [username, setUsername] = useState("");

After that change the warning will disappear and your input will work as expected. Hope this helps anyone facing issues implementing useState with controlled form inputs.

Where are you Form - Understanding forms on the web

Mon, 24 Aug 2020 00:00:00 GMT

If you have used a website in the last 10+ years you have most likely come across a form. They have been a vital part of how we interact with websites (in today’s case) webapps. The most common ways to send information across the Internet is through a form of some sort, whether it being sending emails, tweeting or taking a test online mostly you will be using a form.

The most common ways to send information across the Internet is through a form

There are even websites that are mostly a form ¹ yet most people who have had bad user experience on the internet was most likely using a form.

Even with newer technologies like augmented reality (AR) and virtual reality (VR) technologies adding on the the various ways we can interact with interfaces; forms still remain present in many products.

I made a small collection of some useful articles and resources while trying to understand forms

HTML Form element specifications a living standard of the HTML form element
Fun with forms by … all things forms by @justmarkup; my favourite was the use of form and formAction attributes
Adam Silver’s blog has great articles on form design

Most search engines are forms ↩

Notebook — Talentedunicorn

Changing author information on a git commit

Extra git tip: Rebasing the first commit of a repository

Culture Shock by Cultprint jolts Telawi back to life

Mockup resources and tools in web development

Coffee or Tmux

Changing the default prefix key

Panes

Copy and paste

CSS variables

Usage

Example

Default values

Common Gotchas

Footnotes

How width and max-width work

Using Google analytics on Astro

All about the layout

Analytics component

Footnotes

Tabs

Some tabs from some of the popular frameworks

The requirements

Marking up

Styles

Scripting

Demo

Footnotes

Star rating component

Markup

Styling

Preparing the star graphic

Binding the data to styles

Configure Auth0 JWT on CouchDB

Using external JWT tokens on CouchDB

Enable JWT authentication on CouchDB

Set up public keys on CouchDB

Authorizing access to a database

Testing React applications with Github Actions

Test runners

Test coverage

Example application

Scaffolding the application

Setup and running tests

Testing requirements

Writing tests

Running tests

GitHub Actions

Setting up the workflow

The sass, the style & the ampersand

Overriding styles

Adding modifiers to selectors

Using React useState with form inputs

Where are you Form - Understanding forms on the web

Footnotes