Forem: Agney Menon

Please don't overuse optional chaining

Agney Menon — Fri, 21 Aug 2020 20:11:58 +0000

This post is small rant on optional chaining and it's usage.

If you don't know, optional chaining allows you to use shorten your object reference chain by returning undefined when it sees a non existent reference in the chain.

Consider a scenario where a person has his country name specified in the chain: person.location.address.country.name. Now what if the person doesn't have to specify a whole bunch of this? Location is optional, address is optional if that is present country is optional and so on. You are now either left with shielding your code with lots of if or && 🛡 or lodash get 🎣 or catch the error yourself 💣.

Optional chaining understands this pain and can shorten it to:

const countryName = person.location?.address?.country?.name;

This will not hit an error and will just return undefined if the chain fails. Also, it works with TypeScript 🎩.

Docs

This is obviously a welcome feature, I do use it myself a lot. But sometimes, we see that it is overused. I have overused it in the example itself, country?.name

Is there a scenario where there would be a country but the name is not present? A country without a name?

If there is not, then it should be written as:

const countryName = person.location?.address?.country.name;

It's true that you are skipping an error in some case when there would be an error and country name is not present. But then, you might just be delaying the inevitable.

const coordinates = location?.coordinates;

// eternities later
plotMap(coordinates);

If it is mandatory for location to have coordinates, what you are doing here is to move the impact of the error as far from the origin of it.

When Sentry (error tracking system) says that there is an error in centerMap function, you know have to trace back till the roots to figure out there is something wrong with your code. Otherwise, it would have straightforward told you that it cannot get coordindates of undefined.

If you don't run into an error, the UI is still going to be messed up and you will have the privilege of having to explain to the user that it works on your system because you aren't looking at the cause, just the effect of it somewhere else.

In other words, TypeScript or use Optional Chaining responsibly.

Counting React Children

Agney Menon — Wed, 24 Jun 2020 19:29:57 +0000

Children.count() and Children.toArray().length have different outputs. We are going to explore how and why.

Consider a React component:

import React, { Children } from "react";

function Wrapper({ children }) {
  const count = Children.count(children);
  const countArray = Children.toArray(children).length;
  return (
    <section>
      <p>
        <pre>Children.count:</pre>
        {count}
      </p>
      <p>
        <pre>Children.toArray:</pre>
        {countArray}
      </p>
      {children}
    </section>
  );
}

export default Wrapper;

Now, to render this component we are giving it:

<Wrapper>
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
</Wrapper>

Now, both counts listed in the UI would point to 2. What about if we change the Wrapper children to:

<Wrapper>
  <h1>Hello CodeSandbox</h1>
  {false && <h2>Start editing to see some magic happen!</h2>}
</Wrapper>

Now, Children.count will report 2 while Children.toArray().length will report 1.

This is because Children.count is counting the number of slots that children has. Whether it be false, null or undefined, it's still a slot and Children.count does a good job of counting it. From the docs:

number of times that a callback passed to map or forEach would be invoked.

Children.toArray on the other hand, converts Children it receives to an opaque structure containing only the elements that JSX can render. That's how it reports that there is only a single child inside Wrapper, the other one is conditionally false.

You often see people try to weed out invalid children using this property. For eg. Chakra UI

/**
 * Gets only the valid children of a component,
 * and ignores any nullish or falsy child.
 *
 * @param children the children
 */
export function getValidChildren(children: React.ReactNode) {
  return React.Children.toArray(children).filter((child) =>
    React.isValidElement(child),
  ) as React.ReactElement[]
}

Here's a Children.count usage example from Ant Design:

componentDidUpdate(prevProps: CarouselProps) {
  // If the number of Children (even if something was conditionally rendered) has changed, then go to the first slide.
  if (React.Children.count(this.props.children) !== React.Children.count(prevProps.children)) {
    this.goTo(this.props.initialSlide || 0, false);
  }
}

I write a once a month newsletter about catching up with the Web and it's ever evolving developer experiences. Feel free to browse the archives and of course, subscribe

Tailwind CSS & Svelte on Snowpack - Svelte Preprocess

Agney Menon — Tue, 23 Jun 2020 05:41:31 +0000

Snowpack is a tool for building web applications with less tooling and 10x faster iteration. Tailwind CSS is a utility-first CSS framework for
rapidly building custom designs. Let's explore how to combine both of them. Svelte is a radical new approach to building user interfaces.

This article talks about how to use them in combination. This will also interest you if you want to add svelte-preprocess when using a Snowpack app.

Template

Premade template is available on Github. You can use the template with command:

npx create-snowpack-app dir-name --template @snowpack/app-template-svelte

Setup Svelte and Snowpack

Snowpack provides an official template for svelte that can be initialised with:

npx create-snowpack-app dir-name --template svelte-tailwind-snowpack

Template Source

Svelte Preprocess

If you wanted to add PostCSS to your Svelte application, svelte-preprocess would probably be the plugin you think of. It functions as an automatic processor for PostCSS, SCSS, Less and a lot more.

But since we are using Snowpack's custom plugin, none of the usual loaders would work. Luckily, snowpack plugin has a secret hatch to push in plugins. It's a config file named svelte.config.js. You can create one in your root folder and export your pre-processor.

module.exports = {
  preprocess: () => console.log('Preprocess Script'),
};

To add svelte-preprocess, you would need to install it with:

npm i svelte-preprocess

Modify the svelte-config.js with:

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  // options to preprocess here
});

module.exports = {
  preprocess,
};

Configuring PostCSS

As suggested on Tailwind docs, we will use Tailwind CSS with PostCSS. To add this to preprocess:

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      // Plugins go in here.
    ]
  }
});

module.exports = {
  preprocess,
};

Adding Tailwind

Tailwind is available as a PostCSS plugin, you can add it with:

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('tailwindcss')
    ]
  }
});

module.exports = {
  preprocess,
};

After installing tailwindcss package ofcourse.

and you are good to go. You can find the complete template on Github:

agneym / svelte-tailwind-snowpack

TailwindCSS with Svelte and Snowpack v2

Svelte with TailwindCSS - Snowpack

✨ Community template for Svelte and Tailwind.

Create a new project with:

npx create-snowpack-app dir-name --template @snowpack/app-template-svelte

Uses svelte-preprocess

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.

View on GitHub

It is also listed on the page for community templates on Snowpack website.

Have Fun 🎉

Conditionally spread into Object/Array - Javascript

Agney Menon — Thu, 11 Jun 2020 19:01:32 +0000

There comes a time when we want to add more fields/elements into an array or object when it satisfies a certain condition. This blog is an exploration of how and why.

Spreading into an Array

isWinter is a boolean variable and you need to add winterEssentials if it's true and nothing otherwise.

const essentials = ['phones', 'book', 'cap'];
const winterEssentials = ['sweater', 'thermals'];

const isWinter = true;

const tripEssentials = [
  ...essentials,
  ...(isWinter ? winterEssentials : [])
];

We need an empty array at end because we cannot spread undefined or null into an array (they are not iterables). Spreading an empty array into another just keeps the array intact.

const initialArray = ['a', 'b', 'c'];
const resultingArray = [...initialArray, ...[]];
console.log(initialArray, resultingArray); // Have the same elements.

Spreading into an Object

Rest spread into object is a Stage 4 ECMA proposal and is implemented in most browsers.

It mimics the behavior of existing Object.assign operator.

const hacker = {
  hoodie: true,
}

const isHacker = true;

const person = {
  firstName: '',
  lastName: '',
  ...(isHacker && hacker)
};

console.log(person);

You will notice here that resorting to a conditional operator isn't necessary. This is because rest spread for objects tries to wrap any primitive it finds to an object.

console.log(null); // {}
console.log(undefined); // {}
console.log(0); // {}
console.log('abc') // {0: "a", 1: "b", 2: "c"}, well an array is also an object

Guide to Type Coercion in JavaScript

So the expression (isHacker && hacker) returns undefined which our spread operator converts to {} and spreading an empty array into an object results in nothing.

That's conditional spread.

The Web in May

Agney Menon — Sun, 31 May 2020 14:47:58 +0000

This content is from my monthly newsletter about the Web. Go here to subscribe

May I?

Catching up on remote work, this month saw several large tech companies plan for remote work in the long term. These include the likes of Twitter, Square, Shopify and Facebook. Facebook's announcement included plans to cut down on the salary because these engineers did not work in the saturated Silicon Valley anymore and let to much discussion. Should engineers be paid by location?

Twitter decided to censor some of tweets of Donald Trump this week and has ensured a expected furore. US has come up with plans to stifle or take away this freedom from Twitter and ensure that it's government property as well. But considering that this does not work out, can we trust a social media company to be a single arbiter of truth?

Releases

Chrome 83 - Chrome 83 comes with some form look and accessibility improvements done with the help of Microsoft team. While some of the elements are debatable, the date picker is rad.
Microsoft Build saw many interesting announcements including Terminal v1, Window package manager and improved Powertools. But Microsoft is honing in on improving Office as a platform introducing Office Blocks, which might just get rid of the file. Also, this Airtable competitor - Lists
Nix - Nix is Shopify's dependency manager and more.
Github Satellite - Github's major annoucement was Github discussions introducing a platform alongside issues where users could discuss. This was expected long time from Spectrum's takeover.
Increment Magazine - 13 - Stripe's Increment magazine is out and all the articles are a must check out.

What am I building?

A recording utility in the Browser - https://reco.agney.dev/
A Slack bot for reading ad-free articles inside Slack - Open Source Repository

Tutorials

Fastest way to load Google Fonts - Harry Roberts on his research to load Google fonts the fastest. Spoiler: self hosting is still the winner, but you also get tips to use the Google CDN faster.
Getting Started with React - MDN - MDN has a page on React now.
Realistic CSS Art Hacks - This tutorial dives into some of the tricks to those elusive CSS magic portraits.
Use React memo wisely - You might think you can plug memo anywhere and get performance improvements (well, at least once you learned to use it). And then, you would be wrong.
Tracing User Interactions with React - Kent C Dodds talks about Profiling with the Profiler in devtools.

What am I watching?

Rick and Morty is back and it's amazing. Hulu's nice little clone of R&M named Solar Opposites is also a little gem although it isn't Rick and Morty (obviously)

In Other News

Second Guessing the Modern Web - This asks What if everone's wrong about the web. We have been wrong before.
Facebook Redesign - Facebook on their learnings redesigning the interface the Internet is now familiar with.
How Khan Academy Successfully Handled 2.5x Traffic in a Week - With everyone stuck at home, online education has seen a great surge. How did free websites like Khan Academy handle it?
EU improves on it's GDPR spec - Websites cannot place cookie walls before users see any content on the page and scrolling does not constitute consent anymore.
This Meme does not exist - AI Meme generator, enough said.

This content is from my monthly newsletter about the Web. Go here to subscribe

The Web in April - Newsletter

Agney Menon — Thu, 30 Apr 2020 06:32:59 +0000

This is from a monthly newsletter I write about the web. If you like what you are seeing, you can subscribe to the newsletter here

April is ending and the world is still in quarantine. Hope this email finds you healthy is now the default first line in any email.

Everything I said about remote working during a pandemic still stand, but remote work is certainly gaining momentum in at least some of the companies. TCS, an Indian service company employing 0.5 million people have announced that 75% of their workforce will be going remote by 2025. FYI has published a report analysing The Future of Remote Work estimating by 2025, 70% of the workforce will work remotely at least five days in a month. In other news, Uber CTO is leaving the company and they might lay off 20% of their workforce.

The release for is-remote got people in JavaScript community talking. This library is a one liner that determines if a variable is a promise or not. Everything was fine until one day the maintainer made a minor release for supporting ES Modules for new NodeJS update and broke a whole lot of packages. Apps that broke include Serverless and create-react-app. People have been talking about the heavy reliance of third party libraries and how the number of dependencies can kill your app when maintainers make mistakes. There is a post mortem for incident on Medium which is an interesting read.

Releases

Last Python2 version - End of an era.
Github is free for Teams - A Microsoft enterprise is waiving off all fees for teams. While this is indeed great for indie programmers there are growing concerns that Github might lose their way with only enterprise customers paying for the product.
Gatsby - Incremental Builds - As the number of pages increases, it used to becomes painful to build a static app, every page has to get rebuild even if there is only small change. With Netlify's build minutes, this was a question on everyone's minds. GatsbyJS is now introducing a beta into incremental builds on their platform offering 1000x build speeds.
GraphQL Playground - Prisma donated Playground to GraphQL foundation and now they are combining GraphiQL and Playground.

My Content

If you are looking to learn some computer science during the pandemic, I have a list of free courses for you.

Effective Remote Communications - I wrote about keeping up with meetings.
10k and reflecting on Stackoverflow - I have reached a 10k reputation milestone on Stackoverflow and I wrote about things I learned along the way.
TailwindCSS on Snowpack - I tried out Snowpack and then learned how to do TailwindCSS with it.

Tutorials

CSS Doodle - A web component for drawing patterns with CSS.
When debugging attitude matters - Julia Evans talks about the right attitude for debugging and I can't agree more.
Animating Complex SVGs - Alex Trost has lots and lots of tips in here that will help you learn a thing or two about SVGs.
Integration Builder - Stripe - Is this an ad for stripe? Am I talking sponsorships from them? Click on the link and find out how awesome this tutorial is.

What am I watching?

Women of React happened last week and it was amazing. The live stream is still up on YouTube. The talks from Maggie Appleton on React Mental Models and Anusree Subramani's talk on React Developer Tooling are absolute favourites.

In Other News

Bootstrap dropping IE support for v5 - The sizes will fall by almost 10%, but the debate is still hot on this is a good decision (on HackerNews ofcourse)
The right side for a Macbook charger - USB C meant that you could charge the Macbook on any side. But did you know it had a right side?
Agile’s early evangelists wouldn't mind watching it die - Agile went from being a manifesto and a corportate bandwagon of keywords really fast. Builtin speaks to Mary Poppendieck on Agile's future.
Fake Elon Musk on Zoom - First came the Zoom backgrounds. Now, deepfake has a hold on the faces. Nothing is real on Zoom anymore.
It has number of views in the title - Tom Scott is one of my favourite YouTubers for the topics he picks. This video has the number of views on it's title, literally.

This is from a monthly newsletter I write about the web. If you like what you are seeing, you can subscribe to the newsletter here

Tailwind CSS with Snowpack

Agney Menon — Sun, 19 Apr 2020 20:30:15 +0000

First resource we come across is on the site for Snowpack:

Tailwind works as-expected with Snowpack. Just follow the official Tailwind Install Guide. When you get to step #4 (“Process your CSS with Tailwind”) choose the official Tailwind CLI option to generate your CSS. Import that generated CSS file in your HTML application.

But this misses an important part of Process your CSS with Tailwind step on the Tailwind website:

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS.

So it's only for simpler projects or may be even trying out Tailwind.

What are we missing with Tailwind CLI?

Tailwind CLI currently does not remove unnecessary classes from Tailwind. This means that without using any of classes required for Tailwind, you would be stuck with a file of size above 1MB.

Tailwind recommends handling this by adding a PurgeCSS PostCSS Plugin.

Steps to add PurgeCSS

Process

There are several ways/plugins for PostCSS that can be used. For build tool we are using, there is even a Rollup plugin for PostCSS. But the reason we are using Snowpack is to get rid of tooling, not to add more of them. So, it would make sense to add PostCSS as it's CLI tool and also run it in production only.

Snowpack Init

First, to start of a normal snowpack project:

npm init -y
# Snowpack and a dev server of choice
npm install --save-dev snowpack servor
# Tailwind CSS. Because.
npm i tailwind 
npx snowpack

You can find full guide for installing snowpack on their site

Now, for our developer tools:

# Our postcss tools
npm i --save-dev postcss-cli @fullhuman/postcss-purgecss
# ease of setting env variables and running npm scripts.
npm i cross-env npm-run-all

Tailwind Init

Setting up tailwind:

Add a src/style.css file with Tailwind necessary CSS:

@tailwind base;

@tailwind components;

@tailwind utilities;

Create tailwind.config.js by running:

npx tailwindcss init

You can edit the file to change theme or add plugins to Tailwind CSS.

Find full guide to installation on Tailwind site.

Add an HTML file to connect CSS to the HTML.

In index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Snowpack - Simple Example</title>
    <link rel="stylesheet" type="text/css" href="/src/output.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/app.js"></script>
  </body>
</html>

NPM Scripts for development

There are two things we want to do on development:

Start dev server
Use Tailwind CSS to convert our style file to CSS.

In package.json:

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development run-s dev:*",
    "dev:server": "npx servor --reload",
    "dev:css": "tailwindcss build src/style.css -o src/output.css",
  }
}

This pretty much takes care of the development setup. For development, you can run:

npm run dev

Setup PostCSS

Add a postcss.config.js file at root which we will be using as configuration for PostCSS:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './index.html',
    './src/**/*.js',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

We are adding tailwind and purgeCSS in our PostCSS configuration and has setup PurgeCSS to run only on Production. (We are using PostCSS only on production so it's not like it's doing anything, simply following Tailwind docs on the same.)

NPM Scripts for Production

We will run the same processes for production:

{
  "scripts": {
    "build": "cross-env NODE_ENV=production run-p build:*",
    "build:styles": "npx postcss src/style.css -o src/output.css",
    "build:module": "npx snowpack --optimize --clean",
  }
}

For production, you can run:

npm run build

You will find that I'm building source and development version of CSS to the same file. This is intentional. It is possible to add a dist folder and move assets and styles and build files into the folder and fix other issues that happen with it. Feel free but remember the reason you chose Snowpack was to lighten tooling.

agneym / tailwind-snowpack

A simple Tailwind Snowpack starter

Tailwind - Snowpack Starter

Find complete blog on How to setup Tailwind CSS with Snowpack.

Subscribe to my monthly web newsletter.

View on GitHub

10k and Reflecting on Stack Overflow

Agney Menon — Sat, 18 Apr 2020 05:07:41 +0000

About 5 years ago, as I started out on Stack Overflow, I was simply looking for a way to keep track of answers that I see. Then, one day it felt like I could use some validation. If I could get out there and answer few questions from others, I could somehow prove a better developer than them.

It took few days of sifting through hundreds of questions, I arrived at a JavaScript question I could answer. But then, each time someone else answered it better than me. It is very often through those experiences that I learned that things that sound obvious in my head are not exactly the ones that made sense for everyone.

Today, after over 350 answers and a reputation of 10,000 there is more of a sense of calm in my approach to answers. Here are a bunch of things that I learned along the way:

Explain the answer
I'm sure we can all use consistent naming and functions to decorate our codebases. But the case is not the same for someone looking at your answer. If you are only providing a code snippet, them and everyone else looking at it are bound to be confused. Explain what you are doing differently from the OP and why.
Link back to the docs
This ties in with the sound of that's obvious in our heads. Very often, these things are not obvious at all. The documentation would provide upto date examples and explanation of all the options that the user can take in case of changing things up, instead of trying to over explain everything from the docs, quote the important part and link back to the page.
Runnable Snippets
Whenever the question or the answer had a runnable snippet, a resolution was reached much faster than the one without it. Nobody likes to read code and it is some sort off validation to see the code actually working. As a web developer, I often relied on platforms like codepen, codesandbox and stackblitz for my live demos. While this approach surely works and is mostly easier, it starts to wear down on you with time. There are hundreds of snippets that are halfway done, some linked to answer, some not that I have lost track. In case you delete some of these for space, some of your older answers would be broken and cannot help others. Stackoverflow has an in build snippets tool for web developers and while it is sometimes a pain to create, it's much easier to maintain.
Not all worthy questions
Sometimes the questions are either duplicates or caused by simple typos. While you can go ahead and answer them, may be rack up a few reputation points, it is often unfair both to the person who asked the question and StackOverflow as a platform. There are flagging and closing options for questions, use them wisely. StackOverflow guide to How to write a good answer is a good starting point.
Admit that you may be wrong
Your large reputation or years of experience does not make you all-knowing. There are chances that others might come upto you and make suggestions or sometimes tell you that you are wrong. Being patronising/condescending towards them does not serve your purpose. Evaluate their comment, if you are wrong admit it, learn from it and move on.

Today, it is no longer that sense of validation that I seek from StackOverflow. Answering a question does not make me a better developer than they are. It is often the bravest thing to do to face a crowd and admit that you don't know the answer and the internet only makes it harder. Cheers to everyone who keeps learning 🥂

Free Computer Science Courses and Certifications in time of COVID-19

Agney Menon — Mon, 13 Apr 2020 08:51:14 +0000

The pandemic has everyone stuck at home and it seems like we have a little more time on our hands.

Lots of companies have come forward offering free courses and certifications during this time and I have been making a list.

https://www.notion.so/07d80644a8d8485f97cf893bfcd25638

Hope it can be of help :) Happy Learning.

Effective Remote Communication

Agney Menon — Mon, 06 Apr 2020 16:29:34 +0000

A lot of people are taking to remote for the first time because of the pandemic. While doing software engineering remote is well and good enough for most people, it's the communication that they struggle with. If you do not see the other person what techniques can we use to get our thoughts through?

The points in discussion are very valid even for in-person communication. We are just discussing how to make them better in context of Remote.

1. Meetings

The hardest hit of these are meetings. When there is nobody to laugh at the jokes, how do we measure the impact?

1. Make sure you need a meeting

Many meetings happen because they can. If you are not getting feedback from people in the meeting, not allowing them to build off each others ideas, then the meeting could have been an email.

Atlassian has published a guide to check if your meeting is necessary.

2. Make sure all the attendees need to be in the meeting

Many a time we tack on people for meetings, but at the end don't invite the most necessary people. As Julie Zhuo writes in Making of a Manager, if the design team has a meeting to push backward all the dates for engineering team, the result is disharmony. But if representatives from the engineering team themselves are invited and a decision is made with suggestions from both parties, then it gains trust from both departments.

Harvard Business Review has a calculator for finding the cost of each meeting

3. Always write an agenda for your meeting

It might seem wasteful on the part of the manager.

Oh! I'm going to meet them in person in a few hours, I will explain it then.

But do remember that springing surpises on people isn't the best way to get feedback from anyone. Everyone takes some time to actually understand the graphs and bullet points that are spread on a PowerPoint presentation.

If you give people an agenda on what is to be discussed:

They are aware that this is a meeting they should attend
Allows people to catch up on what has been discussed even in between action items
Actually prepare points to discuss.
A prepared person can beat group-think.

NoteJoy has examples and templates for you to write an effective meeting agenda

3. Make sure results of the meeting are understood for all attendees.

As a meeting host gathering feedback, it is possible that you understand what the results of the meeting are. But if you do not communicate that with the attendees, then the meaning and ownership are lost on them.

Meeting results are to be actionable.
Each meeting result has to be under the ownership of a person
It should be documented through email or any other note service used.

It doesn't have to be immediate. Time can be spent after the meeting to calculate costs of alternatives discussed during the meeting and included in the results to reach an effective solution.

2. Slack/Teams

Or some other software where employees are divided into channels and predominantly text/image based communication happens.

1. Use channels

Channels are very useful for general questions. This is primarily because:

Anyone can answer your query
Other people might have same query as yours in the future.
The project manager can collect common questions and add it to documentation FAQ.

So many companies outright ban personal communication for work and prefer channels for all communication.

Arkency has a guide explaning why their teams are asked to stick to channels

But also know that this is helpful only when the teams are divided into very small channels. Assume the case where an employee wants to discuss if confirmation has to be added in his secuity design. To communicate this in a channel with all employees, they would have to explain the entire context in anticipation that even other employees should 'get' where the alert box is. If it gets too big, no one reads, the only person who could answer in the first place also gets confused. When this happens, you would see that all communication in the channel has been striped down to Can I have a call? which is more harmful that the original intention of the rule.

2. Long form communication

Remote Teams communicate mostly through written text (if you don't then, aspire to communicate through written text). This is because unlike videos, text is indexable and searchable for all the employees. Even if you don't show up during a specific time, you can provide feedback to an RFC or go through all the comments as they happened.

Basecamp Guide to their Internal Communication is a great primer on this.

3. Praise in public, criticise in smaller groups.

Often times we 'see' people only when they make a mistake. Because of the channel rule, this often leads to pointing fingers in a public group. While this is fine, it is a criticism with some feedback, it is still important that it is kept to the people who need to hear it. If you have feedback for a person in the design team, add it to the respective channel, would the others in the company be interested in it? Probably not.

However the opposite holds true when you want to praise an employee for their work. Choose the largest channel where it does not get annoying and offer praise. It inspires other employees to do better and let's project managers, HRs, business executives to notice the employee.

3. Over-communicate

Remember that the CEO cannot see you in the elevator ask you about work. People can forget that you are working there unless you tell them.

4. Intentional Watercooler

Sometimes you can have anyone can join team meetings/watercooler moments to keep your yourself close to your collegues. Remote companies don't have watercoolers, cafeterias or free gyms. To see other employees, to feel part of a company sometimes, it helps to meetup (virtually) in some zoom coffee shop background.

You could also have Basecamp (or similar) software setup to ask all the employees social questions so they can communicate amongst themselves on common interests.

Olark talks about their watercooler zoom chats

Practice Social Distancing and Stay Safe Everyone.

I write a monthly newsletter on web development. Also checkout my blog

The Web in March - Mindless Newsletter

Agney Menon — Tue, 31 Mar 2020 18:08:34 +0000

Taken from my monthly newsletter. Subscribe to receive in your inbox every month.

March is coming to an end and it seems like every month is one upping the other on disasters.

I'm not going to waste talking about flattening the curve because there are so many people who are doing it better than I can.

But let's talk about something that has left me wondering. The effects of this on the remote working landscape. Absolutely all of the IT service sector companies have gone remote now and it is said that it will help drive more companies remote after this crisis. Well, not so much.

A lot of people are feeling negative with the current work scenario which not just puts them remote but also barrs them with social interaction.
Companies and Managers who have no experience with remote are putting out severe restrictions on people and I have heard friends who are afraid to move from the computer screen for lunch.

I wonder if more people will associate remote work with the loneliness that they experience now and seek to move away from it. People have been trying to help though:

Cultivating Empathy in times of Coronavirus
DHH gave their Remote: Office not Required book for free
Shopify have their employees 1000$ to setup their home systems.

Even though these companies would not go fully remote, I'm thinking there would be employees that are currently doing remote who realise the option and decide to go remote when they start their own companies. I'm actually excited at the prospect.

When the month started, Zoom won everyone over (well, not everyone). People compared it to where Skype stood and how Zoom has taken over. It has been used for online clases, work, meetings, conferences, family talks and even a G20 summit. But then came the (slight) blip! Zoom was sharing data with Facebook and of course your employer and you had no control over it. Lots of alternates in discussion and it seems Jitsi and Whereby stand clear winners.

People even go fired on Zoom!

Custom backgrounds for your messy remote room

Releases

Linux 5.6 - Features
Everyone released a COVID-19 visualiser. You might not even be a developer if you haven't tried. Here's Google, Apple, Microsoft.
Acrobat on the Web - Adobe now has a version of Acrobat reader on the web powered by Webassembly - At 865kB main module Gzipped that's pretty impressive.
NPM is joining Github - NPM is joining hands with Github and by extension by Microsoft. Microsoft now has VS Code, TypeScript and NPM. Some wild azure extensions with Github and NPM are coming very soon.
Apple Macbook Air 2020 - After iPad with a keyboard, Apple comes with a product that closely resembles, the Macbook Air. The Air is a product that has held strong after a 7 years of neglect, even after Apple on stage admitted buying a Pro would be better. Like most of the new Macbook products, there is nothing new about it, but hey! at least the keyboard is older.
Prettier 2.0 - Prettier launched 2.0 with trailingComma: es5 and singleQuotes: true as default. I can finally use zero-config
Wikimedia is adopting VueJS - After lots of discussion, they have settled on VueJS, while we won't be seeing Wikipedia soon, other stuff could be ported over.

Libraries

I managed to put out two libraries this month.

React Avatar - For some easy avatars and avatar stacks.
Ionic React - Imperative Toast - Easier toasts for ionic and react integrations.

Tutorials

Perils of Rehydration - There are things we miss when write Server side/static rendered react applications. Why does the console say a class name is different and why does it care?
CSS Landscape - Out of this world.

My Content

[Introduction to MDXJS] - MDX has been a magic component powering my blog for sometime now. Accidentally while pitching an advanced topic on MDX, I got to write the introduction for it and here is it on CSS Tricks.
Theming with Styled Components - Tools and Techniques to use for theming your application with Styled Components.
How things can easily go out of the window with CSS Grid - Using Grid, I learned something crucial, 1fr does not always mean that.

What am I learning?

Don't know, not sure. Do you have something interesting you think I would like? Let me know by replying or tweeting at me at @agneymenon

In Other News

Glitch - Remote work - Glitch wrote a guide for remote work as well as many other people, but this looks good.
Great Impractical Ideas in Computer Science - Powerpoint Programming - I watched this guy program on Powerpoint for an hour and was absolutely mindblown!
CoreJS maintainer goes to prison - The guy who was always asking for a job in your terminals is now in jail and the community is pondering over who is to maintain CoreJS from now.
Free courses - With Coursera and EDX helping out with COVID, there are lots of free courses out there are interesting, you just have to look. Meanwhile some of the free services like Khan Academy are asking for donations because their servers are at 250% normal load. More people learning is a good thing I suppose.
Dark mode on Stackoverflow - SO finally gets in on the act with their most upvoted feature ever. Not as good as I thought, but definitely a good start.

What am I doing?

I watched Promised Neverland this month. It's about a group of young kids who escape an orphanage only to find life outside isn't as rosy as seems. Comes with my highest recommendations if you like dark stories.

I have been rewatching The Community and I have to say, I'm still impressed by the ingenuity that Russo Brothers and Dan Harmon showed in some of these episodes. I mean, look at Remedial Chaos Theory - who else does that?

What are some interesting stuff you are reading/writing/watching/building? Let me know your suggestions/improvements by replying to this newsletter or find me on Twitter

Until next month,

Agney Menon

Taken from my monthly newsletter. Subscribe to receive in your inbox every month.

Ionic React & Imperative Toast Messages

Agney Menon — Sat, 28 Mar 2020 05:55:17 +0000

A toast notification is a long standing custom in mobile application used to notify the user of something happening within the system. Sometimes it even has buttons for interaction.

Here is how to use one (straight from the docs):

function ToastExample: FC = () => {
  const [showToast, setShowToast] = useState(false);
  return (
    <IonToast
      isOpen={showToast}
      onDidDismiss={() => setShowToast(false)}
      message="Your settings have been saved."
      duration={200}
    />
  )
}

Well, this is easy 😁I can do that.

But I normally thinks of toasts more imperatively than this. It might be because of libraries like react-toast or ant.design who have these imperative toast messaging systems, or it could even be that Ionic's own Angular part of design has an imperative toast.

Also, if I needed to a success toast and an error toast, I would need multiple IonToast components rendered or have states definining toast state.

In Angular Ionic, you would:

const toast = this.toastController.create({
  message: '',
});
toast.present();

That's pretty cool 😎. What if we could do this?

We could utilise a React Context and a hook to achieve this functionality at with ease. I wrote out a custom package which does exactly that.

import { ToastProvider, useToast } from "@agney/ir-toast";

// Wrap you App.tsx with ToastProvider
const App: FC = () => {
  <IonApp>
    <ToastProvider>
      // ...rest of your application 
    </ToastProvider>
  </IonApp>
}

// In your component 
const RegisterForm: FC () => {
  const Toast = useToast();
  // ...

  function validate() {
    const toast = Toast.warning('Passwords don\'t match');
  }

  function submit(data) {
    try {
      const response = await api.register(data);
      Toast.success('Registration Successful');
    } catch() {
      Toast.error('Request failed');
    }
  }
}

This allows you have to have error messages with a one liner:

Toast.error('Error message');

The ToastProvider also takes a value property that allows you to define defaults for all toasts created in it's children.

The package also enables creating toast messages with the same Angular API as:

function Component: FC = () => {
  const Toast = useToast();

  const handleClick = () => {
    const toast = Toast.create({ message: 'thing' });
    toast.present();
    // When you want to.
    toast.dismiss();
    ...
  }

  // ...
}

To install the package:

npm i @agney/ir-toast

Note that it has a dependency on both React and Ionic React.

agneym / ir-toast

Imperative Toast Component for Ionic React

Ionic React Imperative Toast 🥂

This packages enables the use of imperative Toasts as in Angular.

Usage

import { ToastProvider, useToast } from "@agney/ir-toast";
// Wrap you App.tsx with ToastProvider
const App: FC = () => {
  <IonApp>
    <ToastProvider>
      // ...rest of your application 
    </ToastProvider>
  </IonApp>
}
// In your component 
const RegisterForm: FC () => {
  const Toast = useToast();
  // ...
  function validate() {
    const toast = Toast.warning('Passwords don\'t match');
  }

  function submit(data) {
    try {
      const response = await api.register(data);
      Toast.success('Registration Successful');
    } catch() {
      Toast.error('Request failed');
    }
  }
}

Installation

npm i @agney/ir-toast

Requires react 16.8…

View on GitHub