Forem: Matt Shirlaw

React: Neatly hide conditional DOM elements 👀

Matt Shirlaw — Sat, 26 Oct 2019 10:38:01 +0000

If you are anything like me you always cringe a little bit when you come across something like this in a React project 😬

The more conditionals that you have, the worse it gets and the as people add more and more code over time it just gets worse and worse.

To solve this I always end up building a tiny wrapper component to hide this logic away. I'm sure other people do this sort of thing as well so I built a little npm package which will let you do this

If you are interested you can get it on NPM. It certainly won't save you a heap of time but hey, a minute saved is a minute saved right 😜

Attack of the bots: The deeper you dig the more there are!

Matt Shirlaw — Thu, 24 Oct 2019 10:45:40 +0000

I always knew that there were bots on Twitter but I am not sure I had truely gathered just how deep this network goes 🤦

I've been trying to debug a pretty weird issue with one of my own bots on and off for the last week or so and I couldn't work out what was going on.

While it doesn't do a whole lot (it essentially justs retweets storm information to warn people who follow it that there might be storms in the area) this particular bot is relatively popular so I try to keep it somewhat functional.

Recently I noticed that another account was spamming some of the key words that the bot retweets with conspiracy theories. Usually this isn't much of an issue as the Twitter API allows you to filter out tweets from specific users with a query like q=-from:user

I updated my code to exclude the user who was spamming and I expected it would solve the problem pretty much instantly.

Unfortunately, over the next few days I kept seeing tweets from this user showing up in my bots feed 🤔

At first I thought I had messed up my query string but after digging into the logs a little more I could find no tweets from the user that I was trying to exclude at all yet they were still showing up in my bots feed 🤯

After a bunch more testing and a few wtf moments I worked out that somehow tweets from other users were appearing in my bots feed as if my bot had directly retweeted the spam account.

It turns out that my bot was retweeting other users who had retweeted the spam account. Each time I blocked a new user it would immediately be replaced by another retweet and it didn't take long for me to realise that there was a massive network of bots all retweeting the original spam account and my bot had inadvertently joined in on the party.

The eventual solution was pretty simple. All I needed to do was add -filter:retweetsto my query string but it took a whole lot longer than it should have to arrive at that realisation.

Hopefully this little story prevents someone else from heading down a similar rabbit hole in the future 👍

UI/UX design for engineers

Matt Shirlaw — Thu, 12 Sep 2019 10:55:06 +0000

Like many other software engineers who work in web development, I feel quite comfortable writing JavaScript and have lots of experience with frameworks such as Angular or React but I'd love to brush up on my user interface design and CSS skills.

This seems to be a common theme amongst engineers so I thought it would be good to share resources aimed at those who don't have formal training in UI/UX design. Have you found anything worth sharing recently?

To kick it off I'll start with some resources that I have come across thanks mostly to browsing twitter & especially Sarah Drasner who has an amazing amount of content on her personal site, github & codepen 🙏🙏🙏🙏

I'll keep it updated as I come across new content from time to time:

Resources 🔗

CSS Tricks A great site with a huge amount of content
Design for Developers A course by Sarah Drasner on Frontend Masters
Where do you learn HTML & CSS in 2019 An awesome article by Chris Coyier
Figma and Learn with figma An awesome online design tool & plenty of accompanying resources
UI patterns Common solutions to common problems in interaction design
BEM 101 A good introduction to the reasons why you might adopt the BEM CSS naming convention

Books 📚

Refactoring UI by Adam Wathan & Steve Schoger
Design Systems by Alla Kholmatova

DEV articles 📖

CSS Grid: illustrated introduction

Mustapha Aouas ・ Sep 12 '19

#css #webdev #tutorial #beginners

DEV users 💻

Sarah DrasnerFollow

/sarah_edo

Chris CoyierFollow

Writing at [CSS-Tricks](https://css-tricks.com), podcasting at [ShopTalk](https://shoptalkshow.com), co-founder of [CodePen](https://codepen.io).