DEV Community: sajrashid

CSS Hover style all your buttons/links in one line

sajrashid — Fri, 23 Jul 2021 02:02:49 +0000

Let's add a few buttons

  <button class="primary">OK</button>
  <button class="secondary">Cancel</button>
  <button  class="accent">Delete</button>

Add some styles

.primary{
 background:steelblue; 
}

.secondary..
.accent..

.primary:hover{
   background:blue;
}

Nice, but how about this ?

a:hover, button:hover{
  opacity:0.8;
}

Great now we only need a single css class for all our buttons and our links, but, but but... opacity dims the element, so how do we make it brighter without dimming either the base or the hover?

🥁 🥁 🥁 Enter the brightness filter

a:hover, button:hover {
  filter: brightness(1.75);
}

🆒 CSS filters Cool, but often overlooked.

EDIT: As suggested in the comments it's not cool to do this everywhere & it's certainly not meant to be a direction to do so... read the comments below for more

Creating a editable dynamic JSON table in React part 2

sajrashid — Thu, 22 Jul 2021 01:12:19 +0000

Part 2

This articles is part 2 of a series, part 1 is here

NB: We're using craco to help with our builds as we can use Tailwind to locally test our table

Clone this branch

git clone -b boilerplate https://github.com/sajrashid/React-Dynamic-Json-Table/tree/boilerplate

Install node modules
Yarn

Run the app using
Yarn start

You should see the homepage. Have a look around it's a modified boiler plate template built from create-react-app.

Folder structure has been setup, src/npm-component/react-dj-table is where the table will live, a Tests folder that replicates the same folder structure and some mock data.

A word about complex state

Managing state using the useState hook is fine for small components, for a component with complex state we need to utilise the useReducer hook.

Whenever state values change that depend on other states values, you're getting into the realms of managing complex state. For anyone that's tried reducers are a game changer.... redux anyone ?

ℹ️ info- Did you know, under the covers useState actually calls useReducer!

Setting up the reducer

in the src/npm-component/react-dj-table/reducers folder

create a tablereducer.js & actions.js file

add the following code to actions.js

export const ACTIONS={

    TESTSTATE:'teststate'
}

and to tablereducer.js

import { ACTIONS } from './actions'

export const TableReducer = (state, action) => {

    switch (action.type) {
        case ACTIONS.TESTSTATE:
            state.testValue ++
            return { ...state }
        default:
            return state

    }
}

So far we have set-up the reducer, with a single ACTION, that increments a value and save that value to state, pretty straight-forward.

in the react-dj-table folder create a file called table.js

Here we need to set-up initial state and the reducers dispatch function.

add the following code to table.js

import React, { useReducer } from 'react'

import { TableReducer } from '../react-dj-table/reducers/tablereducer'

const Table = (props) => {

    const initialState = {
        testValue: 5 
    }

    const [state, dispatch] = useReducer(TableReducer, initialState)

}

export default Table

take a moment to digest the above code, self explanatory so far hopefully.

..... ready ? , it's time to call the reducer via dispatch

dispatch({ type: ACTIONS.TESTSTATE })

We need to call the reducer and supply the Action name from the actions file, we don't need to use defined actions & they don't need to be called action either. It's just a conventions & preferences thing.

ℹ️ Tip - It does help while learning as you'll get less typo's.

Update our table.js file

import React, { useReducer } from 'react'

import { ACTIONS } from '../react-dj-table/reducers/actions'
import { TableReducer } from '../react-dj-table/reducers/tablereducer'

const Table = (props) => {

    const initialState = {
        testValue: 5
    }

    const [state, dispatch] = useReducer(TableReducer, initialState)

    const buttonClick = () => {
        dispatch({ type: ACTIONS.TESTSTATE })
    }

    return (
        <div>
            <button onClick={buttonClick}>Increment</button>
            {state.testValue}
        </div>
    )

}
export default Table

We have a added a button with a click funtion that calls the reducers dispatch functions passing in an action.

Add the table (ok, it's not really a table but we can pretend for testing purposes) to the src/pages/home.js page

import React from "react";
import Table from '../npm-component/react-dj-table/table'

const Home = props => {
  return (
    <div className="flex justify-center w-full h-full mt-4">
     <Table />
    </div>
  )
}

export default Home;

Go to your page click the increment button.

Awesome we have a working reducer!!!

🤓🤓🤓

In the next part we're going to add some data, build our rows, cells and perhaps add a sort. Then maybe accelerate the pace ?

The completed code is in part2 branch

⭐⭐⭐ The repo here

Demo site

✌️✌️✌️ Talk to you in part 3, bye for now.

What is Given, When Then in agile stories & why ?

sajrashid — Wed, 21 Jul 2021 18:40:25 +0000

Why do we use given, when then

You might be surprised how many engineers, scrum masters and general agile people use given when then, in some form or another, but may not be able to clearly explain why.

A simple user story

Given that I am a user, When I click the update button, Then the button should turn green.

Some may say it makes stories easy to understand, that would be true, but lot's of language styles can do that, so why ?

Ask around ? let us know in the comments

First clue

Given
When
Then

We have three items, where else do we have a similar conceptual flow ?

If you've twigged it already, you're a genius, (yeah I didn't either)

Second clue..

Arrange
Act
Assert

Anyone ?

Map the story to the test

Story	Test
Given, that I am user	Arrange, test in the context of a user
When, I click the update button	Act, create button click test
Then, the button should turn green.	Assert, the button colour is actually green

See how the story maps to the test, it makes it crystal clear what the ask is, bearing in mind it's not acceptance criteria it should stay high level.

The developers & the testers are able to break the story down relatively precisely into tasks.

Hopefully you now understand the all encompassing why, at least as far as given when them goes anyway 😮😮😮.

🤚 Bye for now.

^{Drop me some feedback please, helps decide what to write about next!}

Creating a editable dynamic JSON table in React

sajrashid — Wed, 21 Jul 2021 04:26:54 +0000

^{This articles is part of a series, part 2 is here}

A couple of years ago I created a dynamic JSON table, I always wanted to make it editable, yeah I can hear what your thinking..
So mid pandemic I get laid off. Great new jobs are at all time low.

While I'm on the hunt for a new role, wouldn't it be great to do that project I've had in the back of my mind .. hmmm.

Don't get me wrong, there a lot's of great tables out there, some need a tonne of boiler plate code other just don't have some of most basic feature you might expect.

So why not make one, tables are easy or should be, try adding sorting, filtering, paging and then make it editable, it's quite a challenge.

What I'd like to know is how many of you would be interested in a fairly detailed breakdown. I think it might be hard going for newcomers but for mid level developers, it could be good ?

So what would we cover

General overview (initial project setup)
Reflection, Dynamic types, efficient inferring
Managing complex state
Detailed guide on how to use the reducer hook
CRUD operations
Jest - Testing Coverage, Unit, Snapshot
NPM Publishing
anything else you might want

Take a look at the demo's and examples, source, drop me some feedback & I'm ready to write a series.

Bye for now.

Update

So the ask is to create an editable JSON table, what else?

CSS agnostic, must be style-able with any library
Output a ‘proper’ semantically correct HTML table
Recognise and display correct types (bools, numbers, dates, strings)

Warning spec's ahead 🤨🤨🤨

Developer defined options

Row Selection – return selected row
Identity columns
Label columns – custom columns names
Icon columns – display font or SVG icons in the table headers
Hide columns
Date columns – configurable date formats with localisation
Custom column cells – HTML/CSS, support images
Checkbox columns , show bools as checkboxes as default, or as string value, optionally
Footer – display messages and any HTML/CSS
Sortable
Pageable, client side pagination (for now)
Filtering, basic if possible advance search
Edit – smart pager, intuitive buttons, must guide the user

Phase 2 Developer defined options

Custom pagination
Custom editor buttons
Support for external filters on any column
Server side paging
Expose dispatch, call reducer actions
Expose state

Much of phase 2 is available such as exposing dispatch

Phase 3 Plugins TBD

Add support for developer defined components and libraries, date pickers, etc.

Phase 3 is in a very early R&D state

now that we have the boring part out of way time to write some code...

^{This articles is part of a series, part 2 is here}

👊👊👊