What if you don’t want to expose all of your store’s fields?

Image for post
Image for post
Photo by Jose Fontano on Unsplash

A MobX store is a powerful tool for observing changes in React. Being able to react to any field and set any field without the boilerplate of setter methods is a breeze.

But what if you don’t want to expose all of your store’s fields? With just a few changes, we can successfully hide away some of the fields of your store.

Unintended Use Cases

Consider the following example (runnable CodeSandbox samples at the bottom of the article!):

This code represents a counter that can be incremented and decremented. Looks great! But there’s a problem that can sneak into your team’s codebase. What if someone accesses and changes count directly? …


Get out of here flex and margins — let’s rebuild Trello’s UI using only CSS Grid

Image for post
Image for post

I love CSS Grid — you can build almost any layout you can dream up with it! Today I want to deconstruct Trello’s main user interface and rebuild it using CSS Grid as the main foundational component.

Normally, I develop using React and styled-components, but to allow this guide to be as portable as possible, I’ll be using just plain divs and CSS classes!

Breaking Down the Interface

To start off, let’s break down a screenshot of the main user interface into the main divs that make up the overall structure. Let’s start off with a div that takes up the entire viewport:

At the highest level, we have two major sections: the top-level header and the board section. …


Image for post
Image for post
Photo by Headway on Unsplash

Developers have their own exclusive language. You’ve heard it, I’m guilty of it— you’re in the middle of a meeting and you’re discussing a task when suddenly the developers turn to each other and say,

“Don’t we have the API key hard coded in that endpoint?”

“No, we’ve deprecated that endpoint. I can show you the diff later. If you don’t have it in your branch, try merging master.”

And you say,

“So… yes? No? Are we good?”

Non-developers are often left out of development-related tangents in conversations because sometimes it’s just easier to talk amongst ourselves and try to translate afterwards. …


Image for post
Image for post
Photo by Nick Fewings on Unsplash

Even if you’re a top-tier developer, a solid understanding of the more practical side of English grammar can help you really stand out. There’s quite a few tasks in a software developer’s daily life that rely on high quality communication:

  • Communicating via email/messaging
  • Code reviews
  • Writing documentation
  • Writing blog posts
  • Writing sections of your LinkedIn profile
  • Writing resumés and cover letters

You don’t need to be a professional author to ace these tasks: with a small toolbox of practical English grammar tips, you can really step up your communications game!

What Is Grammar?

Luckily, software developers are already quite familiar with grammar:

Grammar is the set of structural rules governing the composition of clauses, phrases and words in a natural…


Image for post
Image for post
Photo by Alex on Unsplash

So you just finished learning all about JavaScript Promises and you go to strut your stuff among the web development elite on your team when someone says, “Do you use async/await too?”

Uh oh. You play it cool and run back to your laptop and pull up this article. Good move.

Luckily for you, if you understand Promises, you’re already 80% of the way there to understanding async/await . If you don’t, take a look at my article on JavaScript Promises for a detailed rundown as well as a cheat sheet here before continuing!

Without further ado, let’s dive into async/await ! …


Who uses the cursor anyway?

Image for post
Image for post
Photo by Courtney Corlew on Unsplash

Latest and greatest frameworks and design patterns are cool and all, but let’s get down to what we developers really care about: keyboard shortcuts.

There are few things in life that are quite as satisfying as the moment you learn a new keyboard shortcut and realize that your life will never be the same again. Let’s dive in.

Note: For completion sake, for Macs, ⌥ refers to the option key and ⌘ refers to the command key. As well, the Ctrl key on the Mac may also be denoted by a ^ character.

Selection

The following shortcuts are for becoming a wizard at selecting exactly what you want to without hitting shift and the arrow keys a million times. …


Image for post
Image for post
Photo by JJ Ying on Unsplash

It’s time, friend.

Maybe you’re new to web and trying to pick up the latest front-end tech, or maybe you’re a season web developer, but just have been putting off fully understanding promises. async/await is a fresh take on asynchronous JavaScript, but it’s built upon promises, so it’s well worth understanding promises before getting into async/await .

Promises truly aren’t complicated but it can be hard breaking into them.


Image for post
Image for post
Photo by Nik MacMillan on Unsplash

You know you have a good idea. I know you have a good idea. But others don’t seem to be convinced — maybe you get passed over in the meeting room, or your project proposals go unread.

But no more! Let’s explore some reasons why your ideas may not be gaining traction and how you can sharpen up how you share them with your team.

Is It Actually A Good Idea?

The first step to getting any project or idea actioned is it actually being good. While it’s definitely possible to get a bad idea on a roadmap, that’s of course not your goal. …


Image for post
Image for post
Photo by Toa Heftiba on Unsplash

The golden rule is simple:

“Whatever you wish that others would do to you, do also to them” — Matthew 7:12a

This of course differentiates itself from the negative so-called “silver rule” that states “don't do to others what you wouldn't want them to do to you.” The golden rule calls for action rather than inaction.

With that out of the way, there's a very interesting argument that is sometimes given when the golden rule is brought up. You may have heard a conversation about the golden rule that went something like this:

Person A: “So then you should, for example, still be kind and considerate to someone even if you don't like them, since that's what you'd want them to do to you.” …


Image for post
Image for post
Photo by Amy Lister on Unsplash

There are a plethora of methodologies to employ during software development with no shortage of ones with names with “first” or “driven” in them: test-driven development, mobile-first development, API-first development and, hilariously, YOLO-driven development.

Each of these methodologies describes what should be a top priority — one that shapes all other priorities at a certain point in the development process. Test-driven development can be applied at all levels of development (the actual coding part), while API-first development is more of a macro methodology that describes the order in which a development team should address tasks. …

About

Joshua Saunders

Senior software developer at Klipfolio. I love writing about all things dev and faith. linkedin.com/in/jksaunders to connect!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store