DEV Community: Rohov Dmytro

Friday Quick Tips — Use package.json As a Shortcut Holder

Rohov Dmytro — Fri, 29 May 2020 05:51:52 +0000

Really quick tip for today.

I've been programming using Node.js for quite a while now. Six, seven years? Damn. And only in recent projects I've started to «save» common scripts as a yarn «shortcuts». Damn++!

It's extremely simple. Simple as that:

Every morning it makes me a couple of presses away from a Carpal tunnel syndrome! Nice!

That's it. That simple tip.

Yours, truly, RG, on his way from consumer to creator.

Save the clicks for something more meaningful!

Mind Hacks — Being More Productive & Avoiding Pitfalls

Rohov Dmytro — Thu, 14 May 2020 09:57:11 +0000

I have my own way to deal with productivity. I was calling them mind hacks, personal slogans and other weird names.

When I'm feeling stuck, overwhelmed or finding myself in some «bad» pattern — I use those mind hacks.

Recently I've found an «official» name for i. It's time to share. :)

They are called «mottos».

I have a very special newsletter with deep information about productivity, mind hacks & better thinking. Boost yourself — join the force! 🤗

Welcome, Mottos

What the hell is a motto?

The motto is a short sentence or phrase chosen as encapsulating the beliefs or ideals of an individual, family, or institution.

Simple said:

Motto is a personal slogan.

When I find myself on a slippery road to breaking a good coding habit — I use a certain motto to help me out. And usually, its impact is enough to win the battle.

The Battle Of Optimization

I've coined the problem of pre-mature optimization into this phrase:

Do not optimize the future, optimize the past.

THIS wording works for me. It should not work for you. And that is the whole point. To remember certain rules with wording that works for you.

My attitude to pre-mature optimization is that. I want to optimize stuff that is already happened. On other words my optimization should be based on data. And data comes from the past. :)

The Problem of Choice

Choice is good. Choosing is NOT.

Having tons of frameworks, libraries, and options is cool. But making a perfect decision eats up way too much energy. And some cases it's valid, but in most it's not. Things change.

I simply try to avoid choosing.

The Problem of Tooling

Don't look for a better tool, seek for a better brain.

I've stopped mindlessly replacing my inner problems with better tooling and addons and seeking to improve myself first (at least trying), then seek for the tools.

Designing Your Own Mottos

We all have encountered different thoughts that move us. Thіs information is extremely valuable.

Shape it, support it, use it.

Shape it. Support it. Use it.

Be careful. Mottos are NOT about what you WANT to believe. They are about your current beliefs, not the future ones. Just be careful NOT to pick fancy stuff that looks nice but doesn't really click with you. Be honest with yourself.

Shape it

Identify what you strongly believe in and coin that into a short sentence.

It all starts with noticing.

Once I've noticed how important it is for me to build up positive momentum in the morning, I have zero doubts that it is my thing. It is my thing. It's important for me, period.

Mornings are about momentum.

Write down your strongest beliefs — things, that are deeply connected to you and have a real impact on your behavior.

If you're feeling like it — feel free to steal someone's phrasing, easily. It's yours if it's yours. Pay attention. When you consume content and a phrase strikes your heart — write it down.

Ready. Set. Go!

In the beginning, it's not THAT important how well they are articulated. It's what you put into the sentence, the personal meaning.

Support

What makes a motto more powerful is what it's connected to. Think Coca Cola putting billions of dollars into advertising to support its brand. You might also want to support your personal slogans. They should be deeply connected with your goals, beliefs, emotions.

Write that down.

Mottos are powered by both rational and irrational. Rational arguments and emotional coloring make a cool combo. In other words:

Can you explain your belief?
Does it excite you?

When you consume the content you might come across stuff that supports your motto. For example, when I've persuaded myself (made it an internal belief) that consistency is important I hear it from almost every person I follow. Consistently.

Use Them

Bring your motto to life and use it as a weapon contextually. It's your tool, your beliefs. Use accordingly.

Summary

It takes time to shape your worldview and find internal hacks, but it's totally worth it. Shape your beliefs concisely in order to use them effectively. Support them with internal and external evidence and you will become better, faster, and stronger.

Mottos are not a magic wand, but the world is complex enough so we can neglect what we actually believe. These reminders are a powerful mechanism to identify yourself and navigate life better.

Just do it.

And hey! I post some deep cool stuff on my newsletter. Join the 200+ mind hackers!

What is your motto and what is the background behind it?

#discuss What is your top 3 mindset hacks for being a more productive developer?

Rohov Dmytro — Thu, 07 May 2020 22:49:18 +0000

Mine Top 3

Asking myself: «What am I doing» (& switching focus back to the task :))
Loosen up my attitude to all that jazz like file organization, editor colors, plugins, naming convention.
Reminding myself that tools should serve me, not the other way

Yours?

10 Tips To Get Out Of Your Own Way And Start That Side Project

Rohov Dmytro — Tue, 05 May 2020 10:31:44 +0000

Let's START working on our «Dream Projects»!

My last 10 years of coding had its ups and downs. To have more ups I've implemented tiny habits to be more productive. It's time to share! If one of them will make you 1% more productive everyday — I am taking it!

Beware! Some of the tips might be silly (or against best practices). But in my personal experience they DO make me more productive. At least in my case.

And hey, ultimately, productivity is a speed of achieving our dreams. Let's do something about it!

How To Finally Start Doing Your Dream Project

I am defining the problem of starting as a problem of mental walls. Let me explain.

I have a medium size personal goal — to acquire 10 000 people to use my products that will help people to become MORE self-aware. THAT is my personal realistic dream.

But! I am not sure which tools exactly I will build (AND people will use). Not cool. And understanding yourself in not an easy task. But in order to figure out the tool to build I need to iterate on my ideas (and hypothesizes). And in order to iterate I need to... start and to... finish.

To start the WHOLE project and to finish the whole project. Daaamn. :)

I want my week to look like this:

And NOT like this (irony):

Hey, naming convention of my variables IS important (from some perspective). But while looking at a bigger picture there are more important problems I want to face. For example. Am I delivering real value to the people with my products?

Mental bottlenecks are the places we feel like we need to make a good decision but it might not be THAT important from a bigger stand point.

My opinion:

One the most most important meta-skills is the ability to start and to finish.

Cause overthinking is not fun. Momentum is!

And hey, hey, hey! I'm sharing my real-life experience. IF you are interested in building side projects that would challenge you to become better & stronger — join me, join my newsletter.

To the tips.

Tips

Picking The Idea

We need good idea. But good ideas does not come from nowhere. They should be based on something. So my current idea is not based on data. I simply don't have real-life product data. That's why my current idea is simply based on intuition (consider this as an inner source of data).

The idea is: tracking daily stuff in a fun way using... emojis.

And then I am telling myself:

Let's spend some quality time to find the perfect shape for this idea in order to test it in the wild.

Let your first idea be based on intuition. You will get experience and data later.

Naming is hard. Avoid it!

Naming a project is hard. But it should not be hard to name things while in active development. What I do is I give temporary technical names. For this project I chose the name «Trackerion».

Sometimes I name projects literally. My previous project was called: «habits-with-feelings».

And that is fine. You might have a perfect name while working or talking to people. Just don't get stuck with this initially.

Biggest Tip To File Organization

All I am starting is a single file — App.js. And only later — everything.js else on/demand.js. And that is fine. The structure will happen later.

And that's all.

Don't Stuck With Your Tools

I can easy imagine this conversation, happening in heaven:

— What was the last thing that you remember?
— npm install

Sometimes you can get older while installing all the android tooling or NPM packages. But there is a hack. Don't get stuck with your tools! Do other stuff in the context of the current task / project.

Visualize the problem
Plan the code
Priorities features

For example, while some script was spinning, I've started exploring uploading my app to the Google Play Store and this is what I've found.

This simple act won be a couple of days because I've realised that I need to upload my app as soon as I can.

Don't stuck with your tools. There is always something useful.

Expect The Unexpected Things

So I was at the peak of excitement during the development when my phone's screen got smashed. And I've just set up everything to develop with it.

Yikes!

How to win in this situation?

The win is to put as least attention to the bad news and keep going.

Found my very old phone, set up everything again, send my broken phone to the fastest repair service.

Feeling sad, feeling bad, accepting life, moving on.

Minimise Style Fapping

This one is golden. I think this rule is one the biggest time saver for me. This rule saved me DOZENS of hours.

Don't. Play. With. Styles.

I've stopped tweaking paddings, margins, colors etc. For some reason I was doing this during the active development.

No-no-no-no.

Instead, I have this rule:

Put UI blocks onto their places.

Minimising time to tweak styles, tweaking. Focusing on building a clear screen/page structure.

color: green is fine, color: red is fine.

Resist The Urge Of Upgrading To The Latest & Greatest

Upgrading to «latest and greatest» is... tricky. Cause you ofter run into some compatibility issues...

Upgrading feels good, dealing with issues takes time.

Landing Page — Just Find The Reference

To complete a basic version of the landing app I usually go with some clear reference.

You can transform doing a landing page into a rocket science, it is important. But you are fine to start having the basics.

Done is better than perfect.

Have a Distraction Paper

When I write on a piece of paper solving a particular task, I always get somewhat irrelevant thoughts. They feel good, but they are distracting. The solution is to have a «distraction paper». That paper where you write «everything else».

It really, really, really helps.

Manage Technical Challenges

This one is a big one.

I've noticed a tendency to look for technical challenges. Yeah, learning as a programmer is fun. But here is a tricky part: it is not nesesarry helps you to finish. If you have a clear goal to learn something new — that is fine. But otherwise it's not wise.

While you are some fancy term shared by a speaker who was solving a $ 100k business problem, time goes by.

Every step can contain a challenge that can take weeks or months. And that is a lot of time!

Build The Everyday Momentum With Some Sweet Stuff

Most of the time I am quite strict with myself in terms how I spend my time. But! If you have a bad mood... If things don't go so well... If it's an early morning and one cup of coffee was not enough...

Gain momentum with some soul healing refactoring.

or...

Play with styles. A little bit!

Cause we are all human beings.

The End.

This is part of the series. I have multiple ideas for the next articles! If you are interested in some of them — let me know in the comments.

How to overcome the middle launch crisis during the development. About restoring the faith in your project if it starts upsetting you. Basically, it's about a meta-skill of finishing. :)
Why coder will NEVER launch a good product. This one is about different roles (hats) we should use to move forward with our personal projects. And a high price I've paid to understand that.

Let me know in the comments! And if my words are relevant to you, follow me somewhere (or everywhere).

Cheers!

P.S. What stops you from starting?

#discuss Would you consider an external help (guidance) for your side project? In order to MAKE IT HAPPEN

Rohov Dmytro — Tue, 17 Mar 2020 17:01:12 +0000

I've been working as a programmer for 10+ years. And switched my current area of interest to dancing, teaching, blogging.

I still do code, but now it's all about my personal projects that I personally need.

And now I have this idea that inspires me SO much.

To guide people while they are trying their side project happen.

Call it coaching, call it mentoring.

The idea is simple. Helping people to overcome perfectionism. And make sure the project will be accomplished.

Also, providing some perspective how to grow this side project into a bigger thing.

Would YOU be interesting in this type of guidance?
Would it be suitable for you to have a weekly chatting & guidance about your side project?
Would you pay for this type of mentorship?

What is your overall impression on this offer?

Thank you in advance for your point of view!

A Life Changing Hobby For a Programmer You Should Try

Rohov Dmytro — Mon, 25 Nov 2019 14:55:54 +0000

Online is great. Condensed human knowledge in just some clicks away. But what about human experience?.. This is what my post about. A way to balance an IT lifestyle.

Hello, beautiful people! I am working as a programmer for more than 10 years. And more than half of that time I have a hobby I want to describe to you and suggest to try out.

It's called: Lindy Hop.

And here is a social demo:

Generally speaking, it is a very pleasant way to spend your time. Let me share some of the reasons for it is a good idea to give it a try from a perspective of IT life.

#. It's an Opposite To Sitting

We sit a lot. Sitting for a day is okay. Sitting for years is not. As IT-people we have lots of hours sitting.

And dancing is definitely a physical activity. It can be demanding as you wish. You can dance to faster tempos or to slower one. Also you can be more lazy or more crazy.

#. Dancing is... fun.

It is just fun. It puts a smile on your face.

Dancers were found to have higher levels of serotonin, known to boost moods in humans. ©

When coding is more about brain, dancing is more about body.

#. Learning is... fun

For me this is a big deal. The process of «figuring out» is a whole journey! Learning to dance is fun. Usually classes happen once or twice per week.

Believe me, it is very different from staring at somebodies code. It makes your brain work in a totally different way. Which is gooood.

#. It's Easy

You figure out the basics, you are ready to rock. It's up to you when you feel ready to nail at the dance floor.

#. It's Challenging

It is also a challenge you are facing. It's putting yourself out there. Expressing yourself. «Dancing like nobody is watching».

#. It's a Worldwide Community

There are hundreds (thousands?) of communities all around the world. And there are social events. Being part of the community means you have an additional purpose while travelling. And there are small and huge events across the globe. You can fly there, you can learn and party there. It. Is. Amazing.

#. It's Parties

This is what's it's all about! I like to put it like this. Lindy Hop, for me, is a celebration of a human being. If this article resonated with you — consider giving it a shot.

I believe to truly share everything it would be billion of reasons. I am doing this for more than 7 years. And hey! You should check my Instagram account. 🤗

See you on a dance floor!

[*] Photo credits go to Eric Esquivel. The dancers are Audrey Da Sois and Aurélien Lesdos.

How To Become a Better Programmer And Unblock Your Inspiring Ideas

Rohov Dmytro — Thu, 06 Jun 2019 09:19:08 +0000

A powerful insight of mine about hacking perfectionism, feeling better, more productive and unblocking myself to get things done.

Idea ⇒ Inspiration ⇒ Perfectionism ⇒ Block

For example, you want to create a new web-service, you want to start a blog, youtube channel or write and article. It seems fun and exciting! But then «brain happens», nothing is done and you feel «blocked» or paralysed. Maybe this pattern happens too often and happens within years?

Why so?

Here is mine insight on why this is happening! At least in my case.

Mood represents the momentum. The momentum allows actions to flow. Perfectionism tends to change that mood, kills the momentum and makes doing a struggle.

Let’s unwrap it.

But before I would kindly suggest you to check out my blog. There's some nice stuff over there!

Mood As An Engine

Once I’ve read a powerful opinion about the science of mood. And an insight I’ve experienced was this:

Mood represents the momentum. Momentum leads to actions.

Momentum is like a wave you can climb and ride. It’s just so easier when it’s fun and joyful. It’s a really nice friend to accompany your actions.

And it clicked for me.

The mood is not only nice to have. The mood is quite a requirement.

You can definitely ignore it and fight through. But it’s totally different strategy.

Perfectionism as a Mood Killer

My experience from a perspective of mood and momentum: perfectionism is their biggest nemesis!

The most common end result of perfectionism is a struggle to act

Recognizing The Tradeoff

It’s extremely hard for me to combine «perfect» and «fun». Fun vs perfect is a tradeoff I have to negotiate about with myself.

Recipe for productivity

Recognize the power of mood on actions
Protect the mood

Question yourself

Should you do stuff if you feel like shit doing it? Is it a path of becoming a better human or beating yourself until you break? Maybe it’s both?
How does execution of the idea influence your mood?
It is possible to combine having fun and perfectionism?
What kills your mood?
What about bad mood and momentum?

Let the mood be with you!

Please, consider checking out my website for more insights. You might find it valuable.

How To Improve Your Newsletter Subscription Flow (A Little Bit)

Rohov Dmytro — Thu, 23 May 2019 14:53:52 +0000

I like the idea of 1% regular improvements. In this post I will add describe how I've made a small improvement to my subscription experience in a Gatsby blog (with an open source plugin for you to use).

This post is part of 10x Better Gatsby Series. Go check it out!

The Idea

Let people know that somebody is already trusts you. Lets show our credibility and authority by displaying current number of our newsletter subscribers.

This is an example of what I am talking about:

Even a small community of readers is a community.

Open Source

I've open sourced a really small plugin @rogovdm/gatsby-source-mailchimp you can use to automate this task in a Gatsby blog. Usage is pretty straightforward (and is described in README).

Like I said, it's a subtle change but those changes add up with time.

Strong Will to Own Your Content in Era of Platforms

Rohov Dmytro — Wed, 22 May 2019 12:17:22 +0000

Do anyone strongly willing to have a personal website owning all of content and how it displays?

I do want to. Something inside of me constantly resists to go all in on social media websites. I have hard time realizing that most of the content will be buried forever in a couple of days.

Do anybody can relate to what I am saying?

And the problem is that it's hard to compete with popular platforms for readers attention.

What do you think about this topic?

10 Things I Have Learned Open Sourcing A React Hook Without Going Crazy

Rohov Dmytro — Tue, 21 May 2019 13:21:07 +0000

This is my 10 gotchas how I spend tons of time open sourcing 100 LOC. And my attitude to swap frustration with just enough motivation to become 1% better. All of that while sharing some value with the world (via this post and an open source package).

So.

I had an idea to add a MailChimp subscription form to my blog via hooks. I thought it would be nice to isolate it into an open source package. 60 LOC for a hook and another 40 LOC for sloppy tests took surprisingly big amount of time.

This post is part of my personal journey you can join and learn for free from my mistakes.

Intention

Resisting perfecting of every step to increase practicality and allowing myself to move forward, faster.
Overcome rising complexities with reasonable amount of frustration.
Document my discoveries.

The result

This is an usage example of react-use-mailchimp hook to embed a MailChimp form into a React app:

export const Form = () => {
  const url = 'URL_YOU_CAN_OBRAIN_FROM_MAILCHIMP_UI'
  const [{ loading, error, data }, subscribe, reset] = useMailchimp({ url })
  const [email, setEmail] = useState('')

  return (
    <form
      onSubmit={e => {
        e.preventDefault()
        subscribe({ EMAIL: email })
      }}
    >
      <input onChange={e => setEmail(e.target.value)} onFocus={reset} />
      <button type={'submit'}>Submit</button>
      <div>
        {!!loading
          ? 'Loading...'
          : error
          ? 'Error during subscription'
          : data && data.result === 'success'
          ? 'Subscribed!'
          : null}
      </div>
    </form>
  )
}

My gotcha's

Here is a list of my «gotchas» and takeaways during development.

#1. Configuring Jest

From the beginning I've decided that I will have some tests, at least medium quality ones. Without thinking too hard I've checkout out open source code to see how people do their tests. What I found is a config that works for me:

jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.js$': 'babel-jest',
  },
  setupFiles: ['<rootDir>/jest.init.js'],
}

jest.init.js

import '@babel/polyfill'

This quickly allowed me to skip the docs at least for some time and move on to get stuff done.

#2. Testing with react-hooks-testing-library

First I've installed react-testing-library. But soon discovered another option to test react hooks — react-hooks-testing-library.

Usage example:

import { renderHook, act } from 'react-hooks-testing-library'
import useCounter from './useCounter'

test('should increment counter', () => {
  const { result } = renderHook(() => useCounter())
  act(() => result.current.increment())
  expect(result.current.count).toBe(1)
})

No additional components for wrapping up hooks manually. Neat!

Other big deal about react-hook-testing-library is that it allows to handle asynchronous nature in your react hook. With a small caveat. More on that later.

#3. Fighting with `npm link`

This was quite... annoying one. npm link command can be used to test your package in local development without publishing it to npm registry. Sweet, convenient, did not work out of the box for me.

React was throwing error about having two React instances in a same application. The reason was is some woodoo magic in npm linking.

The solution was simple, ugly and necessary.

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder.

Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

I assume it would be resolved in future versions of npm / react.

#4. «Better `npm publish»`

«Better npm publish». This title stuck with me some time ago. I have never check it out but doing a quick google search revealed a tool called np to automate package publishing process.

package.json

{
  "scripts": {
    "publish": "np"
  }
}

Using this tool adds some amount of safety without adding much complexity. Sweet!

#5. Fighting myself annoying bug

In order to be honest I need to say that this bug was a significant part of pain while writing 100 LOC. Just because of a silly bug that was successfully hiding from my attention. For an hour, or two, or...

Here is a line of code with a bug:

jsonp(url, opts, callback)

Yeap, that simple line of code. But url was a real URL but not the one that I need. Naming is important, and so is sleeping enough.

#6. Fighting async nature of a react hook

If there is some async stuff happening in your hooks you may wonder how to test. There is a simple way.

Here is a part of test:

act(() =>
  /* this one makes a http request */
  result.current[1]({
    EMAIL: EMAIL,
    NAME: '',
  })
)
/* checks loading before request */
expect(result.current[0].loading).toBe(true)
/*
        sweet part.
        this one «waits» until there state of a hook will change.
    */
await act(async () => {
  await waitForNextUpdate()
})
/* checks loading after request */
expect(result.current[0].loading).toBe(false)

But in order to follow that way I had to spend two hours realizing that I need to use alpha version of React.

package.json

{
  "peerDependencies": {
    "react": "^16.8.6"
  },
  "devDependencies": {
    "react": "16.9.0-alpha.0",
    "react-dom": "16.9.0-alpha.0",
    "react-test-renderer": "16.9.0-alpha.0"
  }
}

During development in order tests to work you need apha version of react. But in order to use it you can leave ^16.8.6 as a dependency.

#7 Let's steal an API from react-apollo

At first my state for holding data looked like this:

const [{ status, message }, subscribe] = useMailchimp({ url })

Then I remembered that react had a nice API to work with requests. And what they come to was something like:

const = () => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
        /* ... */
    }}
  </Query>
)

I though it was better. API of my hook would be similar to something in the wild. And also I would not expose string variables.

So I've converted an API into:

const [{ loading, error, data }, subscribe] = useMailchimp({ url })

Bonus: data holds an original JSON representation of an API response from MailChimp.

#8. I need a reset() action

I need to decide what API my hook exposes. Using this hook by myself I realized that I do need a reset functionality for hook.

Done!

const [state, subsctibe, reset] = useMailchimp({ url })

#9. Zero config, many builds

Digging into open source libs I've stumbled upon microbundle.

The zero-configuration bundler for tiny modules, powered by Rollup.

package.json

{
  "scripts": {
    "build": "microbundle -o dist/ --sourcemap false --compress false"
  }
}

Oh, that nice feeling then zero config means minimal effort from your behalf!

#10. Exposing your work teaches you

Final lesson.

Although tasks seems to look quite easy it steal manages to eat surprising amount of time. In that case I am trying to remember that it is partially because of me and partially because of the freaking complexity of reality. :) This mindset leaves just enough pressure on me to improve but does not make me overwhelmed or frustrated too much.

As you can see you can learn a bunch of stuff by doing an open source job. Also you can skip learning some stuff which is good to keep personal momentum and make job done.

Open Source

All of this is packed into react-use-mailchimp package we can enjoy in any of our react application.

If there was any value and you want to get some more — go check out my blog. The good stuff is waiting for you!

How To Add Responsive Cover Images To Gatsby Blog Posts

Rohov Dmytro — Tue, 14 May 2019 09:14:43 +0000

In this post I will describe how to add a full size image cover to your blog posts.

Nice thing about Gatsby that we can handle this very nicely with plugins while not taking care about manually serving different images for different screen sizes. Each device will receive it's optimized version of the cover. Neat!

This post is a part of «10x Better Gatsby» series where I share my personal experience on tuning, boosting and tweaking Gatsby. I will post more good stuff about tuning Gatsby. Check it out!

Assumptions

I will assume that you've already have your markdown set up. This means that you've got this plugins being installed and configured:

gatsby-source-filesystem
gatsby-transformer-remark

Instruction

#1. Editing Config

Make sure plugins are set up in your config.

// gatsby-config.js
module.exports = {
  /*
    ...
  */
  plugins: [
    /*
    ...
    */
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 620,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    /*
      ...
    */
  ],
}

#2. Updating Markdown file

Put your image near your markdown file and update your markdown file (in my case it is post.md) to point cover field to an image.

---
title: 'How Failing With Pomodoro Technique Made Me 2x Better Programmer'
date: '2019-03-27'
cover: './cover.png'
---

Now lets update our GraphQL queries.

#3. Updating GraphQL query

blog-post.js

const query = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        cover {
          publicURL
          childImageSharp {
            sizes(maxWidth: 2000) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`

Now you can edit your components code.

#4. Updating React Component

Make sure you have a gatsby-image installed. This is a component that will handle all the responsive magic.

yarn add gatsby-image

In order to display image full size I am passing cover data to my Layout component

<Layout
  location={props.location}
  title={siteTitle}
  cover={data.frontmatter.cover}
>
  {/* ... */}
</Layout>

And then I am displaying that data in my Layout component.

import Img from 'gatsby-image'

Component usage is quite simple. This is how I do it in my Layout.js:

!!cover ? <Img sizes={cover.childImageSharp.sizes} /> : null

The result

Example of a result you can get with this simple steps.

Now you can be happy with your cool looking cover that is optimized to load fast for every device.

Hey! This is just one piece from «10x Better Gatsby» series. Let me share you what you will appreciate, check it out!

How To Add Draft Posts to A Gatsby Blog

Rohov Dmytro — Thu, 09 May 2019 09:25:36 +0000

I need to exclude specific posts from displaying in production in my blog build with Gatsby and mark them as drafts during development. I will describe how to achieve this goal (manually or via an open sourced plugin) so you can do this too in less than 5 minutes.

This post is a part of «10 Better with Gatsby» series where I share my personal experience on tuning and tweaking Gatsby. I will post more good stuff about tuning Gatsby. Check it out!

The End Result

List of posts in development:

List of posts in production:

Requirements

Show all posts in development
Hide draft posts in production
Render released and draft posts differently in development
Mark post as released automatically if its date is after build time
Mark post as released manually in md files.

I found a plugin but could not achieve everything I needed. Mine open sourced solution can be found here:

gatsby-plugin-released

It allows you to add release functionality via config and skip part of this article. Also there are additional options you can use. Visit plugins README to learn more.

Overview

Step #1. Adding new fields to GraphQL

We will add a field called released based on:

date field from markdown file
released field from markdown file
process.env.NODE_ENV
timezone
build time (a moment in time when the build happens)

Also we will add a field called releasedNotForced. Similar to released but with process.env.NODE_ENV been ignored.

This step is abstracted into gatsby-plugin-released.

Step #2. Update GraphQL queries to respect the released value

We should exclude drafts from building and displaying.

Step #3. Update components to render drafts differently.

To have a nice visual distinction and feel good about it. :)

Execution

Step #1. Adding new fields to GraphQL

The goal of this step is to add fields to node.frontmatter.fields to use via GraphQL. Gatsby offers a special API for this. What we need is to modify gatsby-node.js file.

We will add two fields:

released field
releasedNotForced field that act just like released but ignores the process.env.NODE_ENV variable.

Why adding two fields?

Just in case you are wondering.

In development mode we may want to force posts to be rendered without editing any GraphQL queries. It is done by forcing released to be true based on process.env.NODE_ENV. Thus in a development mode we loose the original value we may want to use in a component code to have a visual distinction between drafts and released posts.

The way to preserve this is to always set the released field in a markdown file. But it was so nice to have this value be calculated automatically based on date.

That is why I've added a releasedNotForced property — to preserve that value while forcing released to be true.

Remember, if you don't want to mess with your config just use this plugin.

Here is a function we use to calculate releasedNotForced value.

    // gatsby-node.js
    const moment = require('moment-timezone')
    const getValue = ({ node, options }) => {
      const { fieldName, timezone } = options
      if (!node.frontmatter) {
        return false
      }

      if(node.frontmatter.hasOwnProperty(fieldName)) {
        return node.frontmatter[fieldName]
      }    

      if (!node.frontmatter.date) {
        return false
      }

      const dateNode = moment.tz(node.frontmatter.date, timezone)
      const dateNow = moment().tz(timezone)
      const value = dateNow.isSameOrAfter(dateNode)

      return value
    }

Then let's add released and releasedNotForced fields to node.frontmatter.fields. What we need is to use the onCreateNode function.

     // gatsby-node.js
    const onCreateNode = ({ node, actions }) => {
      const MD_TYPE = 'MarkdownRemark'
      const options = {
        fieldName: 'released',
        fieldNameNotForced: 'releasedNotForced',
        timezone: 'UTC',
        force: process.env.NODE_ENV === 'development',
      }
      const { createNodeField } = actions
      const { fieldName, fieldNameNotForced } = options

      // Skip modifications for non-markdown files
      if (node.internal.type !== MD_TYPE) {
        return
      }

      const value = getValue({ node, options })

      createNodeField({
        node,
        name: fieldName,
        value: options.force === true ? true : value,
      })
      createNodeField({
        node,
        name: fieldNameNotForced,
        value,
      })
    }

Step #2. Update GraphQL queries to respect the `released` value

We need to exclude drafts from a build step in file gatsby-node.js and respect the released value from blog pages such as index.js.

In both cases the query will look something like this. Pay attention to a filter property.


    const query = graphql(
        `
          {
            allMarkdownRemark(
              sort: { fields: [frontmatter___date], order: DESC }
              filter: { fields: { released: { eq: true } } }
            ) {
              edges {
                node {
                                id
                }
              }
            }
          }
        `
      )

Step #3. Update components to render drafts differently

This step is totally up to yours component tree. The key point is to request necessary fields via GraphQL query.

    const query = graphql`
      query {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          filter: { fields: { released: { eq: true } } }
        ) {
          edges {
            node {
              id
              fields {
                slug
            released
            releasedNotForced
              }
            }
          }
        }
      }
    `

Conclusion

So we have a single GraphQL query for production and development, released field is calculated automatically and draft posts can be rendered differently. Cool!

And be warned! There are drafts in my «10x better Gatsby» series! :) So go check it out to stay tuned!

DEV Community: Rohov Dmytro

Friday Quick Tips — Use package.json As a Shortcut Holder

Mind Hacks — Being More Productive & Avoiding Pitfalls

Welcome, Mottos

The Battle Of Optimization

The Problem of Choice

The Problem of Tooling

Designing Your Own Mottos

Summary

#discuss What is your top 3 mindset hacks for being a more productive developer?

Mine Top 3

10 Tips To Get Out Of Your Own Way And Start That Side Project

How To Finally Start Doing Your Dream Project

Tips

Picking The Idea

Naming is hard. Avoid it!

Biggest Tip To File Organization

Don't Stuck With Your Tools

Expect The Unexpected Things

Minimise Style Fapping

Resist The Urge Of Upgrading To The Latest & Greatest

Landing Page — Just Find The Reference

Have a Distraction Paper

Manage Technical Challenges

Build The Everyday Momentum With Some Sweet Stuff

#discuss Would you consider an external help (guidance) for your side project? In order to MAKE IT HAPPEN

A Life Changing Hobby For a Programmer You Should Try

#. It's an Opposite To Sitting

#. Dancing is... fun.

#. Learning is... fun

#. It's Easy

#. It's Challenging

#. It's a Worldwide Community

#. It's Parties

How To Become a Better Programmer And Unblock Your Inspiring Ideas

Mood As An Engine

Perfectionism as a Mood Killer

Recognizing The Tradeoff

Recipe for productivity

Question yourself

How To Improve Your Newsletter Subscription Flow (A Little Bit)

The Idea

Open Source

Strong Will to Own Your Content in Era of Platforms

10 Things I Have Learned Open Sourcing A React Hook Without Going Crazy

Intention

The result

My gotcha's

#1. Configuring Jest

#2. Testing with react-hooks-testing-library

#3. Fighting with npm link

#4. «Better npm publish»

#5. Fighting myself annoying bug

#6. Fighting async nature of a react hook

#7 Let's steal an API from react-apollo

#8. I need a reset() action

#9. Zero config, many builds

#10. Exposing your work teaches you

Open Source

How To Add Responsive Cover Images To Gatsby Blog Posts

Assumptions

Instruction

#1. Editing Config

#2. Updating Markdown file

#3. Updating GraphQL query

#4. Updating React Component

The result

How To Add Draft Posts to A Gatsby Blog

The End Result

Requirements

Overview

Execution

Step #1. Adding new fields to GraphQL

Why adding two fields?

Step #2. Update GraphQL queries to respect the released value

Step #3. Update components to render drafts differently

Conclusion

#3. Fighting with `npm link`

#4. «Better `npm publish»`

Step #2. Update GraphQL queries to respect the `released` value