DEV Community: Rose

Tutorial: A Gatsby Photo Blog Powered by Flickr

Rose — Tue, 16 Jun 2020 16:28:43 +0000

🤓 What this tutorial covers

Setting up a paginated feed of photos in Gatsby, sourced from Flickr
You can see the finished project here and You can see its source code here

🙅‍♀️ What this tutorial does NOT cover

Making it look nice
Handling rebuilds when new photos are added to Flickr
Optimizations such as using environment variables for Flickr API key, "load-up" of images for better performance, or any other nice-to-have you can think of. This is bare-bones. The expectation is that you'd use this tutorial to get started, then tidy it up and make it exactly how you want it 💖

🤯 Huh what who? Where am I?

Gatsby is a very popular framework for building static websites. I chose it for this tutorial because of its popularity. Popular frameworks = more resources to learn from and available plugins to use. And this tutorial will provide more value if it's something many people use!

Flickr is a photo hosting product. I chose it because I have nostalgic fondness for Flickr and they do allow you to embed their photos, as long as you follow their terms.

🧐 Are you an expert?

NO! I am a JavaScript developer and I do know React, but otherwise all the technologies in this tutorial are pretty new to me.

I built out this project over a couple of hours. I've dabbled in Gatsby but don't really know it all that well. Same goes for GraphQL. I've never used the Flickr API before. So if I can fumble my way through this and then live to write a tutorial, so can you 😃

🥳 OK let's get started.

You're going to need a few things right off the bat:

You'll need to sign up for an account on Flickr (free plan available)
You'll then need to get your own Flickr API key
You'll want to make sure you have the Gatsby CLI (command line interface) installed

👩‍💻 Start a new Gatsby Project

Got all that? Ok let's get down to it.

We're going to use the Gatsby CLI to create a new site. I ended up using their basic Hello World starter as my base template, because it really contains the bare minimum.

gatsby new photo-blog https://github.com/gatsbyjs/gatsby-starter-hello-world

We then want to navigate into this directory

cd photo-blog

And now that we're there, we'll want to install gatsby-source-flickr which is what we'll be using to access the Flickr API. And this is the benefit of working with an established framework like Gatsby: Someone else has already done all the heavy lifting for us!

Depending on if you're using yarn or npm you'll add this differently. Here it is if you're using npm:

npm install --save gatsby-source-flickr

Now all we're going to do is follow the setup documentation for gatsby-source-flickr. We need to open gatsby-config.js and configure our Flickr API key as well as the user ID on Flickr we want to get the photos from. gatsby-config.js should look something like this now:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-flickr",
      options: {
        api_key: "INSERT YOUR FLICKR API KEY HERE",
        user_id: "INSERT YOUR FLICKR USEER ID HERE"
      }
    }
  ],
}

💁‍♀️ Hot tip: Once you have everything working as a proof-of-concept, if you want to use this in real life I'd advise looking into environment variables for these values, instead of saving these values directly in the config file.

❓Need help finding your API key? You should have been given it after initial set up, but if you need to go back and find it, you can go to the app garden on Flickr and click the link that says "Apps by you" on the right hand side.

❓ Need help finding your user ID? If you navigate to your photo stream and look at the URL bar, the URL looks something like this: https://www.flickr.com/photos/USERIDHERE. Grab that last value after /photos/!

Now we can run

gatsby develop

and then use our browser to navigate to http://localhost:8000/___graphql. I love this view because it gives you an overview of all the data available to you. Once Flickr is properly configured, it means we can play around and see what kind of information we can fetch from the Flickr API!

For a feed of multiple photos, the interesting data is in allFlickrPhoto You can click around to see what kind of data is available there and then decide what you need. Or you can just keep reading to see what I ended up using 🙃

✍️ Let's set up some pages!

Gatsby has a tutorial on adding pagination which is a good starting point. It's not Flickr-specific though, of course, so some tweaks need to be made. I also found this tutorial useful for the previous/next links in pagination.

Open up gatsby-node.js This is where we'll define all our page paths.

We need to know how many pages to generate. To do this we can query Flickr with our "number of photos per page" (aka 'limit') and then get the pageInfo which contains a handy page count.

query {
      allFlickrPhoto(limit: 10) {
        pageInfo {
          pageCount
          currentPage
        }
      }
    }

Once we know how many pages there are, we can loop between 0 and totalPages and generate a path for each page. In the end, gatsby-node.js should look like this:

const path = require('path');
const postsPerPage = 5; // change this value if you want a different number of posts per page.

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;
  const result = await graphql(
    `
    query($limit: Int!) {
      allFlickrPhoto(limit: $limit, filter: {media: {eq: "photo"}}) {
        pageInfo {
          pageCount
          currentPage
        }
      }
    }
    `
  , {limit: postsPerPage});

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);
    return;
  }

  const numPages = result.data.allFlickrPhoto.pageInfo.pageCount;

  Array.from({length: numPages}).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve('./src/templates/flickr-photo-list-template.js'),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    });
  });
}

You'll noticed that I moved limit into a variable to make it easier to change and have that change cascade nicely.

I also added a "filter" param so that we're only getting photos, not videos and other media.

Next up we need to set up './src/templates/flickr-photo-list-template.js', which is referenced here but doesn't actually exist yet.

🧙‍♀️ Create that file in the appropriate directory.

🚮 You can also delete pages/index.js if you're following this tutorial, as I set the route of / to be page one of the Flickr photo list, so we don't need a default index page.

On this flickr-photo-list-template.js template we'll define the basic rendering of the data, as well as a GraphQL query for getting the information from Flickr we need in order to render that data.

The query will look something like this. "Skip" is for pagination (If you are having 5 photos per page and you are on page 2, skip would be "5". Page 3, skip would be "10" etc. This value was passed in when we set up gatsby-node.js, go check it out if you missed it.)

query ($skip: Int!, $limit: Int!) {
    allFlickrPhoto(limit:$limit, skip: $skip, sort: { order: DESC, fields: [dateupload_date] }, filter: {media: {eq: "photo"}}) {
      edges {
        node {
          id
          title
          url_m
          description
          photo_id
        }
      }
    }
  }

Then we can use the data we receive to render each individual photo by looping through them via map -

render() {
    // get photos from response
    const photos = this.props.data.allFlickrPhoto.edges;

    // call `renderPhoto` method for each photo via map
    return (
      <div>
        {photos.map(renderPhoto)}
      </div>
    );
}

renderPhoto looks at an individual object in the array of results and displays its title, image, and description. You can tweak this to your heart's desire, and if you need different attributes, you can update your GraphQL query and then reference it here -

function renderPhoto(item) {
  let photo = item.node;
  let flickrPhotoURL = `https://www.flickr.com/photos/[YOUR FLICKR USER ID HERE]/${photo.photo_id}`;
  return (
    <div key={photo.id}>
      <h1>{photo.title}</h1>
      <a href={flickrPhotoURL}>
        <img src={photo.url_m} alt={photo.title} />
      </a>
      <p>{photo.description}</p>
      <p>
        <a href={flickrPhotoURL}>View on Flickr</a>
      </p>
    </div>
  );
}

Add some pagination information and the entire file looks like this:

import React from 'react';
import { graphql, Link } from 'gatsby';

function renderPhoto(item) {
  let photo = item.node;
  let flickrPhotoURL = `https://www.flickr.com/photos/[YOUR FLICKR USER ID HERE]/${photo.photo_id}`;
  return (
    <div key={photo.id}>
      <h1>{photo.title}</h1>
      <a href={flickrPhotoURL}>
        <img src={photo.url_m} alt={photo.title} />
      </a>
      <p>{photo.description}</p>
      <p>
        <a href={flickrPhotoURL}>View on Flickr</a>
      </p>
    </div>
  );
}

export default class PhotoList extends React.Component {

  renderPagination() {
    const { currentPage, numPages } = this.props.pageContext;
    const isFirst = currentPage === 1;
    const isLast = currentPage === numPages;
    const prevPage = currentPage - 1 === 1 ? "/" : (currentPage - 1).toString();
    const nextPage = (currentPage + 1).toString();

    return (
      <div>
        {!isFirst && (
          <Link to={prevPage} rel="prev">
            ← Previous Page
          </Link>
        )}
        {!isLast && (
          <Link to={nextPage} rel="next">
            Next Page →
          </Link>
        )}
      </div>
    );
  }

  render() {
    const photos = this.props.data.allFlickrPhoto.edges;
    return (
      <div>
        {photos.map(renderPhoto)}
        Page {this.props.pageContext.currentPage} of {this.props.pageContext.numPages}
        {this.renderPagination()}
      </div>
    );
  }
}

export const photoListQuery = graphql`
  query ($skip: Int!, $limit: Int!) {
    allFlickrPhoto(limit:$limit, skip: $skip, sort: { order: DESC, fields: [dateupload_date] }, filter: {media: {eq: "photo"}}) {
      edges {
        node {
          id
          title
          url_m
          description
          photo_id
        }
      }
    }
  }
`

If you now navigate to http://localhost:8000 you should see a feed of your photos. You have successfully set up a very basic Flickr powered photo blog! 🎊

It's up to you where you take it from here 🙂 And thanks very much for sticking with me for this long!

❗️I already mentioned this at the beginning but I think it is worth re-iterating: If you set this up and run gatsby build to have this running in the wild... And then add photos to Flickr, it will not dynamically update whenever you upload a new photo. It is a static site. You'll need some kind of re-build process to handle this. You could check Flickr's documentation to see if Flickr has any kind of 'new photo' webhook and use it to trigger a re-build, for example.

🤓 Hopefully you found this useful and informative. Comment and let me know if there's any areas you think could be explained more thoroughly and I may tweak this post for future readers.

Fixing a bug on my open source project: From start to finish.

Rose — Wed, 10 Jun 2020 18:49:29 +0000

🥰 Hello! Long time no see! I am currently on maternity leave with my second child and writing code is basically impossible to do right now, especially with the COVID situation preventing us from taking advantage of childcare.

However, I did have a small amount of free time recently and I decided to spend it fixing an issue reported on an open source tool I maintain. And then, as a companion to my Debugging in JavaScript for Beginners: How I approach things article I wrote, I thought I’d write this little real-life walkthrough of a bug I fixed.

I wrote this one-handed while simultaneously patting a baby's bottom rhythmically in an attempt to get her to sleep, so please forgive any quality issues 😳

The library

I don’t do a ton of side-coding outside my job but I do have a small library that converts content from the Draft.js rich text editor to markdown and vice versa.

The issue

Someone opened an issue on the GitHub repo reporting that a link at an end of a block of text was not being converted correctly.

The issue was first reported in May -

When people put effort into reporting issues or opening pull requests I like to try to acknowledge them somehow, even if it might take me awhile to follow up in any concrete way -

The approach

When I actually went to dig in to this issue, my first step was to try to re-create it. My repo has a gh-pages branch that is just a demo of the code in master running (you can see it here)

My attempt to re-create failed. I tried a simple block of text with a link at the end and it converted correctly:

I tried a few different things (inside a blockquote perhaps?) but no luck re-creating. I returned to the issue and left a comment asking for more details, as well as sharing what I had tried.

In case you are wondering: how did I manage to get the “raw drafts object” from the page I was testing on?

I have defined a few tools on the window so that I can quickly access them from the console. That, combined with the React Developer Tools extension:

Allowed me to grab the data using my browser's console tool.

Here's the code-snippet where I define some useful methods on window so I can quickly use them -

Here's me making sure that the right component is selected so I can access it with $r in the console:

And here I am getting the editor state and using the convertToRaw method so that I can copy and paste it into the GitHub issue:

OK so that's all great but I still don't know how to re-create the bug. So now I just wait to see if I get a reply. If I had tons of time I could be more proactive and keep trying different things, but as noted: I have no time 🤭

Luckily, a few days go by and I get this:

Here is where being a more experienced developer has some advantages, and I apologize to beginners that I don't have some super magical advice here except that, "Huh I have seen bugs like this before."

I actually remember an old boss and mentor (hi Jason Webster) sending me JavaScript has a Unicode problem many years ago and it has been... a very useful article in my career. I guess I deal with a lot of strings at my work? haha.

It's a great article and I totally recommend you read the whole thing, but for our purposes: Basically the issue is that sometimes if you have a string in JavaScript that contains certain unicode characters, it doesn't "count" them the way you might expect. From the article:

>> '💩'.length // U+1F4A9 PILE OF POO
2

As the article explains, a way around this issue is to use Array.from

>> Array.from('💩').length // U+1F4A9 PILE OF POO
1

So somewhere in my code, I theorized, I was falling into this .length trap.

OK so now we're onto something!

Solving the bug

My issue reporter handily included an example of a failing case, so I decide to write a new test with this failing case. That way, when I run the tests I will first see it fail, and once I have fixed it, I will see it pass. A really gratifying way of knowing that you have fixed the bug!

And here's the test failing:

Next up: Opening draft-to-markdown.js, which is where all the conversion code exists. I can tell by the appearance of the failed test that the closing tag of the final link is what is failing. It just dies off after the opening tag and the link text.

Error: Expected '🙋 [link](https://link.com) [link' to equal '🙋 [link](https://link.com) [link](https://link.com)'

So I look through the code to see where links are closed. I actually haven't worked on this project in ages so I kind of forget how it all fits together. I see this chunk of code:

var EntityItems = {
  'LINK': {
    open: function open(entity) {
      return '[';
    },
    close: function close(entity) {
      return "](".concat(entity.data.url || entity.data.href, ")");
    }
  }
};

"Hmm ok," I think, "So there's the snippet that handles link open/close."

So I do a file search for EntityItems[ to see every spot where it is being used and see if I can find a place that looks like a likely culprit.

Again, being an experienced developer probably helps here, but this stood out to me as I went through the search results:

  // Close any remaining entity tags
  block.entityRanges.forEach(function (range, rangeIndex) {
    if (range.offset + range.length === block.text.length) {
      var entity = rawDraftObject.entityMap[range.key];

      if (customEntityItems[entity.type] || EntityItems[entity.type]) {
        markdownString += (customEntityItems[entity.type] || EntityItems[entity.type]).close(entity);
      }
    }
  }); 

// Close any remaining inline tags (if an inline tag ends at the very last char, we won't catch it inside the loop)

The comment is helpful too:

Close any remaining entity tags

and the one beneath, which is actually for a different bit of code but still provides context for the part I was working on:

// Close any remaining inline tags (if an inline tag ends at the very last char, we won't catch it inside the loop)

HMM this is code specifically for the last item, and it references EntityItems and .close AND I see a spot where text.length is being used directly. Could this be it???

I make a small change, can you spot it?

// Close any remaining entity tags
  block.entityRanges.forEach(function (range, rangeIndex) {
    if (range.offset + range.length === Array.from(block.text).length) {
      var entity = rawDraftObject.entityMap[range.key];
      if (customEntityItems[entity.type] || EntityItems[entity.type]) {
        markdownString += (customEntityItems[entity.type] || EntityItems[entity.type]).close(entity);
      }
    }
  });

OK let's run my test again:

NAILED IT.

I was lucky, this bug fix went so amazingly smoothly. Trust me, they are not all like that.

My only final step was to write some nice commits explaining the cause of the bug and open a pull request to fix it:

You can see the pull request right here

THAT IS IT!

Thank you for reading! I have to run now, if you notice any major errors or typos or whatever, please comment and I'll try to fix. Like I said, I threw this together under a bit of pressure, so there's bound to be a few things 💕

Do you think ageism in tech is improving?

Rose — Wed, 27 May 2020 20:58:47 +0000

There's often been talk in tech communities about how there's a degree of ageism involved in hiring in software development that is worse than in a lot of other professional industries, i.e. young people get hired, old people do not.

As the industry continues to grow I hear less about ageism in tech and I'm wondering if it's evolving and is less of an issue now than it was 10 years ago, and if it will continue to improve.

Or am I way out of touch and it's still a rampant issue?

Debugging in JavaScript for Beginners: How I approach things.

Rose — Mon, 16 Dec 2019 22:13:29 +0000

📝 Note: Using Chrome, although most browsers are fairly similar so you can probably use this article and tweak slightly for your preferred browser.

🤓 There’s lots of great in-depth articles out there about how to use Chrome to debug JavaScript, or opinionated articles telling you what NOT to do when it comes to debugging. This is neither of those things. Instead, it’s a quick overview of some of the early steps I take when looking into a problem.

My hope is that it is a nice auxiliary to the more in-depth articles to give you a better feel for the “flow” of debugging in JS as a normal human being trying to figure out what the hell is happening with something breaks 🙂

Scenario: Clicking a button doesn’t have desired outcome

I expect when I click a button on a page that I receive a JavaScript alert. But when I click my button nothing happens 🙁 What do I try first?

Easy first thing to do: Check for errors in the console

Sometimes this is all it takes. I open the dev console (On Mac, Chrome: cmd-option-j. Safari: cmd-option-c. Firefox: cmd-option-k. Someone missed the memo on trying to keep shortcuts consistent 🤪.)

I look to see if there’s any JS errors that pop up when I click the button.

Hmm, aler is not defined, eh? Oops! Looks like I spelled alert wrong. Easy fix!

Try turning on “pause on caught exceptions”

If there’s an error happening but it’s not showing up within the console, it might be because the error is happening within a try-catch block (or a promise with a catch that doesn’t properly handle the exception) It can be helpful to go to the sources tab and turn on “Pause on Exceptions” as well as checking off the “Pause on caught exceptions” check box. Then try clicking the button again.

So in this case the promise is being rejected, but the alert only happens once the promise resolves (promise.then a few lines down)

Unfortunately, this promise is being rejected by a very realistic reject(‘foo’) 😳 So the alert never happens. OK I can fix that! Turn that reject to a resolve and we’re fine (note: IRL it’s probably not quite that simple 😛)

There’s another use for this sources tab too: Sometimes the error in the console might not give you enough information on its own, even if it is showing up.

Maybe an error is saying that a variable is undefined but you can’t figure out why the heck not.

In this case you can turn on “Pause on Exceptions” but you don’t need to turn on the “Pause on Caught Exceptions” bit, since you can SEE the error, you just don’t quite UNDERSTAND the error. Yet.

Oops, it looks like I accidentally overwrote the global methodToUse within the scope of the event listener and that’s why it’s not defined here. I can see this by looking on the right hand side "scope" section which shows you all the available variables in the scope of that method, and what they are. On the left I see the actual code, and luckily the line setting the variable to undefined is glaring in my face, so it's an easy thing to find and fix.

But sometimes there’s no error at all and none of this is helping so far!

Here you have a few options. My fav approach is to identify each moving part of a button click, and adding a console.log to every part to see how far along we get before something isn’t called. This helps me to narrow down WHERE the point of failure is.

Example of my console.log set up:

What I see in the console when I click the button:

HM, ok so the first two methods get called but the final one doesn’t. Why not?

If I can’t figure it out just by looking at the code I may throw in a debugger and try again.

Once the debugger line is hit, everything will “pause” and I can go to the console and play around in the current scope of the function, so I can access all the same variables and functions that it can with ease.

Maybe I’ll try calling showAlert myself here from the console and see what it returns.

OHHHH it’s returning a function and not calling alert right away. What a dummy I am. I need to call it like this:

showAlert()() which seems utterly absurd but this is just my weird fake example everyone, calm down. Let’s try it:

… 🎉 It worked!!

Thanks for reading

A short read with some absurd bugs but hopefully for those of you who have read the literature on JS debugging tools but aren't yet adept at actually using them, this gives you an idea of how/when to try things.

If you work as a dev for a product team, what's it like?

Rose — Wed, 11 Dec 2019 19:24:35 +0000

I feel so sheltered! I've worked for the same SaaS product for about 8 years, and I don't live in a place like SF where it seems like everyone is "tech tech tech tech" all the time, so I really only have experience in this one place. I'm curious about culture, how legacy code is handled, team size, management style... Just anything/everything, really 🙂

I always find it a bit tricky to talk about my work TOO much because I always wonder where the line is when it comes to over-sharing the details of your employer? Are there unspoken rules about that kind of thing? I don't even know 😳 But here's a little snapshot of my work situation to get the conversation started.

My employer is remote-first at this point, although when I was first hired most people were local and worked out of the office. Over time things have changed, people have moved away but continued to work for us, and remote people have been hired. I quite like the remote lifestyle and I don't think I could go back to a regular 9-5 in office anymore!

We don't have set working hours but people tend to work anywhere between 8am and 5pm in their respective time zones. Sometimes people work weirder hours if it makes sense for them (a co-worker was in Japan for a month and decided to start their workday at 6am Japan time, for example) We chat online and use conference calls for when something face-to-face feels like a better fit. Sometimes we fly people into town for IRL team bonding.

The devs are really dedicated to building things properly and thinking a feature through holistically before writing any code, but it can sometimes be a struggle between development and product managers, trying to find the balance between doing something carefully/properly and shipping something by X date. I imagine this is fairly common in the industry. We have crunch times where things get hairy and we have downtimes where things feel a little smoother for the devs.

We are a small team, so during crunch times, juggling bug fixes, support requests, "can you quickly squeeze in this small quick feature" (lol) as well as working on whatever our current "big long-running feature" is, can sometimes be very daunting, and we're always trying to find ways to manage this workload better, but I don't think we've found the magic bullet yet. Has anyone???

Our dev process is also quite loose: We have a weekly planning meeting where we go around and each dev talks about their progress, how the week went, and what is up for the next week. We take notes each meeting and upload them to a "meeting minutes" repository on github. We also use a task manager to track assigned work. Sometimes I wonder how/if this could be improved. I like how simple it is but I don't think it works perfectly either. Does anything work perfectly??

Dev team is split by platform

API (back end)/devops: Rails, Elixir, any devops-y infrastructure work needed.
Front end: Single page web app so a lot of JS needed. Plus CSS of course. Front end team also manages an electron app.
Mobile: iOS/Android devs.

Rarely do devs contribute "full stack" although it's not entirely unheard of. Recently we had a front end dev move to our API team because they wanted to grow their skillset, which is awesome and I'm so glad we were able to accommodate that.

I used to grow a lot technically due to the the people above me being excellent mentors, but more recently as I've become more senior I've found this to be harder. Now I find I need to go outside of work and read articles/try to do side projects to explore new technologies. I don't feel like I'm super great at this and I wish I was better! Since I am managing people I think it's partly my responsibility to research and bring things back to the team that I think could be good for us. An area for me to improve for sure.

I find the culture here to be very good. Management has historically cared deeply about employees and their lives and making sure people are supported, which is really nice.

Ok your turn! How is your job different, or the same??

Women in tech: Being a developer and a mom 🤪

Rose — Thu, 07 Nov 2019 00:29:10 +0000

Warning: I wanted to write about being a mom in tech but I didn’t really know exactly how I wanted to approach it so I thought I’d just start writing and see what happened. This is what happened. It’s a thought dump. I feel like I’ll have to go back and revise it one day to be less of a literary disaster. But I am a mom so I have no time so I'm just going to go ahead and post as-is. Have fun. 😈

🙋‍♀️ Hello! I am a professional developer - I have been writing software for a living since 2011 and for many years before that I was a hobbiest web developer 🙂 I am very passionate about my work and loooove what I do ❤️

🤰I am also a mom! I haven’t been a mom for my whole career of course, but I became a mom in early 2018 and I am expecting baby number 2 in a couple of weeks.

I have never worked with another mom. I have worked with a handful of other female devs, but I guess due to the mixture of “not many women in tech” + “lots of people in tech are relatively young” … no other moms.

SO IF YOU ARE A MOM AND YOU ARE A DEV AND YOU ARE READING THIS: HI 😊😊😊😊

For any working mother, no matter the industry, I think there are a lot of challenges that come with the territory. Things that I was sort-of aware of before having kids, but have become more and more cognizant of now that I am living it.

I know that there’s a big push for gender equality in parenting but we have a very, VERY long way to go. A simple example: My husband is a great partner and dad, but when I ask him to take time off work because our kid is sick or has a doctor appointment he gets super stressed out and claims he can’t possibly request time off from work for something related to parenting. So it often falls to me. Because I am the mom, and someone has to do it, and it’s the mom’s job, right?

Luckily my work is amazing and no one has ever given me a hard time for needing to step away for this kind of stuff, but it’s still still stressful and frustrating knowing that there’s this expectation that I have to be the one to make sacrifices. And it’s not just my husband’s “fault” …it’s society’s fault. He’s probably right that his work would raise a lot more eyebrows at him than they would at me. (And to his credit he’s been a lot better about this recently after switching to a new employer that is more family friendly)

Another example: A co-worker dad I know talks about staying up late to get extra work done. OK obviously in this industry we have a general problem with people working themselves to death, so let’s just ignore THAT part of his comment for now and think about this: I cannot. CANNOT. Work long hours. ever. I barely get enough sleep to survive, I’m up with my toddler at all kinds of crazy hours. There is no way in hell I can stay up late to do extra work, I’d probably die from exhaustion. I GO TO BED AT 8:30PM EVERY NIGHT JUST SO THAT I CAN SURVIVE THE NEXT DAY.

I am fortunate again that my employer is great and this hasn’t posed a problem for me, but it still haunts me knowing that if I were to ever need to apply for a new job, I’d have to say very firmly “I can’t do overtime. I have to pick up my daughter from daycare at 4pm on the dot. I am not flexible. Please hire me even though that eager 20-something I’m competing with has no family and is willing to work whenever and wherever.”

As baby number 2 approaches, I also have a lot of fears for the future. I feel like having 1 kid is… tough, but 2 or 3 is when your career can really start to feel the impact of all that maternity leave. And in an industry where things change quickly technology wise, it is scary being away and “missing out”/“falling behind”. And while I know some people might scoff and tell me that if I’m so worried, I should take less maternity leave, that is not something I am willing to do. Giving birth sucks. Babies suck. That first year can be absolutely hellish and I don’t even know how some women manage to go back to work after only a few weeks. I was a mess for MONTHS. Plus as much as I love my work, I don’t want to feel obligated to sacrifice my personal life and family. I WANT to enjoy those early months and spend that time with my new baby.

So that’s all my “working in tech as a mom is scary and here's why." thoughts.

Here’s a couple of perks with my current employer that have saved me and I would look for in any other job, so if you are an employer and want to be inclusive of mothers, consider this stuff!

We are a remote-first company. So I work from home! A lot! And that means on my lunch break I can throw in a load of laundry or quickly shower or whatever. Get stuff done that I never seem to have time for otherwise. My husband is out of town this week so my lunch break is my ONLY time to get anything done where I am not also watching our toddler. Having that flexibility is so so so wonderful.
We also don’t micromanage people’s time. We trust that people work hard and do their best. If I tell my boss I need to leave at 3:30pm to get my daughter for 4pm because that’s when daycare closes, he’s like “that’s great, family comes first.” And that’s it. No questions asked. No secret doubt about my work ethic. Family comes first.

I also think it’s important to be aware and supportive of what a difficult role motherhood can be, and how hard it can be to juggle both work and kids. I’m sure some people reading this will argue with me, but in my experience with every mom I know: We take on more parenting responsibility than dads. We bust our butts. And when you’re also working full time, it’s a LOT. So be kind to us 😛

More experiments with form animations ✅

Rose — Sun, 03 Nov 2019 00:45:47 +0000

A sort of follow-up to this post .... a few more form animations.

Not totally happy with the execution in some cases (eg: Why does Firefox require that I use a setTimeout for the transition in example 1 to work correctly? I thought just using something like requestAnimationFrame would suffice but it does not.). , nor with my artistic direction (I feel like someone else could really figure out how to make these "pop" in a super-cool way.)

But they're kind of fun. Enough to show off I guess 🙂

For the first: Using transitions on transform and utilizing getBoundingClientRect to calculate where the dot needs to move to. Works well for this simple case but if you wanted to use it IRL with a bunch of relatively positioned elements etc it would probably need some better positioning logic.

For the second: a SVG with a bunch of little circles that scales in size and fades out, so it looks like a little burst of dots. This one was inspired by something on dribbble (https://dribbble.com/shots/6440021-Card-Theme-Switch) that is way cooler than my attempt to "do something similar but not totally copy"

Draft.js: Simple Content Manipulation

Rose — Sat, 02 Nov 2019 00:52:36 +0000

Hey it’s part 5 of the series! I hope you are enjoying playing with Draft.js so far.

Today, I want to talk a bit about inserting content into the editor.

Some examples of when you may want to do this:

(simple) emoji picker: Maybe you want to let people click an emoji icon and have it automatically insert that emoji character
(simple) mentioning: Maybe you want to have an icon you click that inserts the @ mention trigger character
(more complicated) markdown: Maybe you want to be able to insert markdown characters under certain circumstances, or wrap text in markdown characters (eg maybe highlighting a word and hitting cmd/ctrl b wraps it in ** instead of actually bolding)
(more complicated) find-and-replace functionality

Let’s look at a simple example first 🙂

Here is what the finished product will look like

Simple example: Emoji Insertion

⁉️ For this example we’ll just be inserting the emoji characters into our editor when you click on them. If you are doing some real-life emoji work with your editor, you may want to look at something like This Draft.Js emoji plugin which converts emoji into their own custom Entity and provides a lot more flexibility for styling in-editor, as well as swapping out emoji assets for non-native assets if you want to.

The Modifier Module

We’re going to be using Draft.js’s Modifier to insert content into our editor.

What we want to do is insert the emoji at whatever location the user’s caret is currently at (their current “selection”) . We also want to replace content, if they have a range of text selected.

For this we’ll use Modifier’s method replaceText which takes:

The editor’s current ContentState
The text to be replaced, as indicated by SelectionState (this provides a range so the editor can say “ok I need to replace the content that currently exists between location X and location Y”. You could provide any range you like, provided content exists in that range, but for this simple case we just want to insert text where the selection already is, so no need to specify anything custom)
The text to be inserted.

What it returns is a new instance of ContentState that contains this change.

However, we still need to get this change into our EditorState and we can do this by using EditorState.push

EditorState.push takes

The editor state to apply changes to
The content state to apply (so we want the result of Modifier.replaceText here)
What kind of change you’re making, also known as an EditorChangeType. We’re doing insert-characters

EditorState.push returns a new instance of EditorState.

So with this in mind I wrote this small insertCharacter helper function:

function insertCharacter(characterToInsert, editorState) {
  const currentContent = editorState.getCurrentContent(),
        currentSelection = editorState.getSelection();

  const newContent = Modifier.replaceText(
    currentContent,
    currentSelection,
    characterToInsert
  );

  const newEditorState = EditorState.push(editorState, newContent, 'insert-characters');

  return  newEditorState;
}

It takes the character you want to insert, as well as the current editorState. It applies the modifications needed, then returns the new editorState.

We’d then need to apply this.setState with the new editorState to ensure we are actually using it, so the code that calls it would be something like:

const newEditorState = insertCharacter('💖', this.state.editorState);
this.setState({
  editorState: newEditorState
});

For my example I wanted to make some little emoji buttons, so I added this to my render method:

<div className="emoji-picker">
  <h2 className="toolbar-title">Insert Emoji:</h2>
  <button
      className="emoji"
      onMouseDown={(e) => e.preventDefault()}
      onClick={this.onEmojiClick}
      data-emoji="🎊">
        <span role="img" aria-label="confetti">🎊</span>
  </button>
  <button
      className="emoji"
      onMouseDown={(e) => e.preventDefault()}
      onClick={this.onEmojiClick}
      data-emoji="💖">
        <span role="img" aria-label="sparkle heart">💖</span>
  </button>
  <button
      className="emoji"
      onMouseDown={(e) => e.preventDefault()}
      onClick={this.onEmojiClick}
      data-emoji="🌼">
        <span role="img" aria-label="yellow flower">🌼</span>
  </button>
</div>

Then I defined onEmojiClick like so -

  onEmojiClick (e) {
    let emoji = e.currentTarget.getAttribute('data-emoji');
    this.setState({editorState: insertCharacter(emoji, this.state.editorState)});
  }

In other words, exactly what we talked about 🙂

There’s one other little gotcha here. You may notice that if you click the button when the editor doesn’t have focus, an emoji is inserted but the editor remains unfocused, which is likely not your desired behaviour.

If you like, you can ensure focus by using EditorState.forceSelection and update your insertCharacter method slightly:

function insertCharacter(characterToInsert, editorState) {
  const currentContent = editorState.getCurrentContent(),
        currentSelection = editorState.getSelection();

  const newContent = Modifier.replaceText(
    currentContent,
    currentSelection,
    characterToInsert
  );

  const newEditorState = EditorState.push(editorState, newContent, 'insert-characters');

  return  EditorState.forceSelection(newEditorState, newContent.getSelectionAfter());
}

This will make sure that after you insert the character, the selected state will be immediately after that character. (Official forceSelection documentation here)

So there’s our little intro into making modifications to your editor’s content. I will follow up in my next post with some trickier content replacement 🙂 (I would have done it all in one but I think shorter articles are a bit easier for people to consume, plus it makes it easier for me to publish updates more frequently 🙃)

Thanks (as always) for reading 💕

On being a dev team manager: Lessons learned from different managers I have had

Rose — Wed, 30 Oct 2019 03:08:34 +0000

I’m not huge on clickbait lists of “Top five habits of good managers” and this post is a little bit… like that…. so I am sorry 😬. But I’m writing it because I am a manager of people and I have also been managed by a variety of people and I often think about what I learned from each of them and how it has shaped me as a leader, or just changed how I think about leadership in general.

I also imagine that different people with different experiences would have a completely different list! So I’m curious, after reading this, if you agree or disagree or think I missed out anything super important. And tell me in the comments!

On coaching new developers and setting them up for success with their first projects.

I’ll never forget when I started a new job as a fairly inexperienced developer and for my first task, my boss carefully laid out for me

what I needed to build
exactly how it needed to behave
what files I should take a look at before I got started
a general overview of how the app worked and what the hierarchy was, file-wise

It was the perfect mix of hand-holding without micromanaging. There was enough room for me to solve the problem on my own, but enough structure that I wasn’t floundering.

As I grew over time, their approach with me changed, and I slowly got less and less direction and more and more autonomy to make my own decisions on how to architect solutions.

I think their approach was fantastic and it’s something I try to emulate when we hire junior developers.

Forget about blame, focus on solutions

I once caused a major bug on production. I was horrified. My boss looked chagrined and said, “Yes it sucks but I’m even more to blame than you, because I didn’t catch it when I reviewed your work, and I’m supposed to be the experienced one.”

I definitely took this to heart and feel the same way with any of the developers that I manage. We all are responsible for making sure production is stable, and no mistake lays on one person’s shoulders.

When something goes wrong, in my opinion it’s best to completely avoid mentioning who you feel like should be blamed (and yes, we are all human, it’s easy to roll your eyes and want to blame the person who wrote the code. RESIST THE URGE. In addition to not being solely responsible, they are also already beating themselves up internally.), and instead just focus on the problem itself and how to fix it/make sure it doesn’t happen again.

Celebrate successes by name

The opposite of blame! My absolute favourite thing to do is to post in our company chat whenever something ships, and make sure I include the names of the people involved in building it. If you are a manager and you were also involved, in my opinion you should downplay your own role. Celebrate your developers, there’s nothing to be gained by trying to upstage them.

It’s ok to redo work. It’s good for improved quality, and it’s good for learning.

I was once asked by my boss to re-write a feature 3 different times using 3 different approaches.

It was a complicated feature that could be solved in many ways. The first attempt was my own solution, the second was a solution that we came up with together, and the third was when my boss looked at how I had interpreted our “solution” and was like, “um that’s not exactly what I had in mind when we discussed this.” And so I had to then re-do the third time.

It was frustrating having to scrap and start over, but I was extremely proud of the finished product in the end, and it still works quite well to this day, many years later!

Saying no and saying yes

I once had an engineering manager who was very scrappy and more than happy to push back on anything that they felt was a bad decision from a performance/technical architecture point of view. I liked it because it made me feel very protected, knowing that my boss was keeping the designers and product managers from forcing us to build “bad” things.

Then I had a manager who was a bit more pragmatic. “One thing some devs do,” they told me, "is to say no too often. Almost anything is possible, you just need to think about it carefully and find the right solution.”

I think about this a lot. Whenever I’m asked if we can build something that intimidates me, I don’t generally say “no” up front. Instead I say something like, “Interesting, let me think about how we might build that and get back to you.”

Sometimes, in the end, even if it’s possible, it’s not advisable given time (or other) constraints. But it’s always worth considering and thinking through. I’m actually surprised by how often something that seems scary at first ends up being 100% doable, given more serious consideration. And often even if the original proposed feature doesn’t make sense, by thinking it over you can usually come up with reasonable alternatives that make everybody happy.

Kindness is so important

I have had a lot of terse and intimidating dev bosses. I have had bosses who were generally very happy with me and my work, but occasionally left cutting code reviews that would be so harsh I’d go home and cry that night. Don’t get me wrong: I liked these bosses. They were smart and organized and capable, and generally we got along very well! We’d go out for beers after work and had genuine friendships. But they were not warm and fuzzy.

Then one day I had a boss who was the total opposite. Compassionate and thoughtful. They instituted a culture of one-on-one chats in which we focused on how I was doing, how I was feeling, what I needed, what my concerns were.

It was a total 180 from what I was used to, and it taught me a lot about the value of kindness in a manager.

You can provide constructive criticism and be kind at the same time.

My favourite bosses are the ones who seem like they are in control

I want to trust that I can rely on my boss and not worry about them dropping the ball. I want to feel like they know what they’re doing, they know what the team is doing, they understand the big picture, and they aren’t asking anything of the team that is beyond what is possible for that team. I like bosses that seem calm and even-keel. If there’s a huge deadline looming, I feel a lot better if my boss seems zen about the situation. Zen doesn’t mean apathetic or disengaged. Just capable of keeping calm and focused and not causing the team needless extra stress during a stressful time.

You don’t have to be a closed book

I am a big believer in being candid and open with my team. The only thing that I think is off-limits is speaking poorly of others on the team/at the company. And of course not talking about anything that is confidential 😛

You can make mistakes, just own them

Apologize to your team when you mess up. Then move on and do better next time.

Be an advocate for your team

The people on your team are your responsibility, and should be your number one priority. Be loyal to them.

Fin. For now. Until someone comments with another great point that I forgot 😁

Reading this over it actually makes me think: These are all the qualities I try to embody as a manager, but I know there are areas where I fall short sometimes. Sometimes I am a better manager than other times. I find when I’m feeling overwhelmed I begin to slip and not be the kind of manager I want to be.

A better manager than I can probably compartmentalize this and continue to be excellent. Maybe that’s something I can strive towards in the future.

But I also think it’s ok to show a little self-compassion. We are all human. We are not perfect. Be the best you can be, and take care of yourself too.

CSS variables, input[type="color"] and form animations

Rose — Sun, 27 Oct 2019 20:52:47 +0000

I was contemplating not sharing this because I was like "Meh it's pretty simple, anyone can do it" but then I reminded myself that the word "simple" is very relative, and there was a time in my life when this would have made me 🤯

(this is a good thing to think about for anyone who hesitates on writing blog posts! Just because you think "everybody knows this stuff" doesn't mean it's true. Lots of people do NOT know this stuff.)

Anyway, I was just in the mood to play around with checkbox/radio button animations and as I went along got carried away and added customization. Here we are:

Quick stuff to know about

Checkbox "x" animations use CSS gradients for the progressive "growing" of the x/"filling" of the box
The x elements themselves are ::before and ::after pseudo elements rotated on an angle so that they form diagonal lines, crossed over one another.
Radio buttons use "scale" transition animation for the circle to grow-in/shrink-in
<input type="color"> is how you get that color picker input
CSS Custom Properties (variables) are how you easily have the user pick a color.
I found this little colour manipulation library so that after someone picks a colour, I can find lighter/darker versions.
🐛 Safari is annoying in that when you change the accent colour, it doesn't seem to properly update already-checked items that used a gradient animation, so you have to uncheck and recheck. Chrome/Firefox seem to update correctly.

You can of course view the source to see all the nitty gritty 🙂

Draft.js introduction: Custom styles (highlighted text!) and have formatting buttons show whether they are “on” or “off”

Rose — Sat, 26 Oct 2019 18:23:09 +0000

Hello!

I can’t believe we’re already on #4 of this series 😱

Today I wanted to cover 2 fun topics that I think are useful to know about:

Defining custom styles (in my example we’ll be adding a “highlighter” option to the editor)
Detecting what styles/blocks are currently active based on the selected text or cursor position. This can be useful for things like showing an “on” and “off” in state in the formatting buttons.

🚀 This is how the finished product will look at the end of the post

Defining custom styles

Draft.js makes this very simple 🙂 We need to define a "style object" and pass it in to the editor.

I liked the idea of letting users highlight certain blocks of text, so that’s the style I thought we could add for this demo.

We create an object that we’ll call styleMap that has the key for the style’s name, and the value is another object that defines the CSS we want to use to style that item. So if bold didn’t already exist the key would be BOLD and the value would be {'fontWeight': 'bold'}

But bold does exist of course, so here’s our little custom style for highlight:

const styleMap = {
  'HIGHLIGHT': {
    'backgroundColor': '#faed27',
  }
};

(🤓 Newbie hint: If you want to define multiple custom styles, they can be comma-separated here, so after the closing } for HIGHLIGHT you could add another style definition).

Then we need to pass in our styleMap to the editor component itself, as customStyleMap -

<Editor
  customStyleMap={styleMap}
  placeholder={"Start typing!"}
  editorState={this.state.editorState}
  onChange={this.onChange}
  handleKeyCommand={this.handleKeyCommand}
  keyBindingFn={keyBindingFunction}
/>

🌼 So now the editor knows about the highlight style and knows what to do with it, but that’s not much use if we don’t expose anywhere for the user to toggle it.

As taught in this previous series post I’ll add a keyboard shortcut (cmd [or ctrl] + shift + h) for highlighting text, and I’ll also add a button to my inline style buttons.

I’d go back and read that post if you need the full block of code to jog your memory, but for the keyboard shortcut, I’ll be adding to my keyBindingFunction the following if statement:

if (KeyBindingUtil.hasCommandModifier(event) && event.shiftKey && event.key === 'h') {
  return 'highlight';
}

And then in the handleKeyCommand function I’ll add this:

if (!editorState && command === 'highlight') {
  editorState = RichUtils.toggleInlineStyle(this.state.editorState, 'HIGHLIGHT');
}

And now the keyboard shortcut to highlight text should be functioning!

Adding the button should also be fairly straightforward. Since I have an array defining all my inline styles which then uses .map to render the buttons, I just add a new item to that array:

const inlineStyleButtons = [
  {
    value: 'Bold',
    style: 'BOLD'
  },

  {
    value: 'Italic',
    style: 'ITALIC'
  },

  {
    value: 'Underline',
    style: 'UNDERLINE'
  },

  {
    value: 'Strikethrough',
    style: 'STRIKETHROUGH'
  },

   {
    value: 'Code',
    style: 'CODE'
  },

  {
    value: 'Highlight',
    style: 'HIGHLIGHT'
  }
];

And we’re done. Highlighting functionality complete ✅

Detecting active styles and blocks

The editorState instance contains everything there is to know about your Draft editor at any given moment, and this includes knowing where your cursor (selection state) is.

Draft.js also provides a couple of handy helper functions to use this knowledge to tell you exactly what styles are active, and what block element is selected.

To get the current inline style - in other words, bold, italic, code, highlight, etc, you can call this.state.editorState.getCurrentInlineStyle()

This returns an Ordered Set of the currently active styles. If you aren’t familiar with immutable.js’s Ordered Set you can check out that link if you like, but the thing we care about right now is that it has a method called has to check for the existence of a key.

We can use that to search for things like .has('BOLD') to get a true-or-false response.

Here’s my updated renderInlineStyleButton method that uses this check and then conditionally sets an active class on the button if .has returns true for that style type:

renderInlineStyleButton(value, style) {
  const currentInlineStyle = this.state.editorState.getCurrentInlineStyle();
  let className = '';
  if (currentInlineStyle.has(style)) {
    className = 'active';
  }

  return (
    <input
      type="button"
      key={style}
      value={value}
      className={className}
      data-style={style}
      onClick={this.toggleInlineStyle}
      onMouseDown={preventDefault}
    />
  );
}

We’re going to do something similar with our renderBlockButton but instead of using editorState.getCurrentInlineStyle we’re going to use a helper method on RichUtils

⁉️ I have no idea why two fairly similar functionalities are found in two different parts of Draft.js 😬

Draft only allows you to have one block type at a time, so instead of getting a set of values, we’ll just be getting a single block type.

The method we want to use is RichUtils.getCurrentBlockType which takes editorState as an argument and returns a string of a block type as a response. So if we were checking for a blockquote we could do something like RichUtils.getCurrentBlockType(this.state.editorState) === 'blockquote'

Here’s my block button render method with the additional conditional active class:

renderBlockButton(value, block) {
  const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
  let className = '';
  if (currentBlockType === block) {
    className = 'active';
  }

  return (
    <input
      type="button"
      key={block}
      value={value}
      className={className}
      data-block={block}
      onClick={this.toggleBlockType}
      onMouseDown={preventDefault}
    />
  );
}

And then you’re basically done. The only thing left is to add some CSS so that toggling the active class on and off actually has some visual effect.

Here’s the simple CSS I used if you want something to get started:

.toolbar input[type="button"] {
  border: 1px solid #eee;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 2px;
  margin-bottom: 2px;
}

.toolbar input[type="button"]:active {
  transform: scale(.95);
}

.toolbar input[type="button"]:not(.active):hover {
  background-color: #eee;
}

.toolbar input[type="button"].active {
  background-color: turquoise;
  border-color: transparent;
}

🎊 Another tutorial complete! Again, you can check out the finished product of this tutorial here.

I’m hoping next time to step away from some of the basics and jump into a post about an interesting problem I had to solve recently that required some more complex manipulation of content. So stay tuned for that if you’re finding these posts a little too easy for your skill level 🙂 But also, don’t worry! If you like the simplicity of these posts, I have some more beginner-friendly ideas up my sleeve too. 💕

Draft.js: Common Questions and Answers

Rose — Sat, 26 Oct 2019 01:57:35 +0000

☀️ Welcome back to my series on Draft.js

Before continuing with more code-stuff with this series, now seems like a good time to hit pause and answer a few questions that I have seen come up fairly often on the Draft.js Slack Group (Disclaimer: I don’t actually spend a ton of time lurking there, I am not some super contributor who is always chatting. But I am a member and sometimes I read stuff.)

What is the best way to save the contents of a form to my database after someone submits the form?

You can do this in different ways, and there are pros and cons to each way 🙂 Below I’ve listed 3 popular options with pros and cons. It’s really up to you to decide what makes the most sense for your situation.

💻 You could convert to HTML and save as HTML

There are several libraries out there that will do this for you. The most popular ones are probably
- draft-js-export-html and
- draft-js-import-html
👍 Pro: Easy to later render elsewhere outside of the editor
👍 Pro: Not locked in to any proprietary Draft.js conventions if you later switch to a new editor.
👎 Con: Have to convert back and forth from HTML to a Draft.js format if you want to edit it later. Not a big deal but there does run the risk of conversion bugs where things don’t convert perfectly.

🖋 You could save as a raw draftjs object

Draft.js provides a couple of utility functions: convertToRaw and convertFromRaw which take your Editor’s ContentState and makes it an object that you can easily save on your database. You can also easily re-convert to a ContentState back from the object.
👍 Pro: No risk of conversion bugs because you’re saving Draft.js’s exact state
👎 Con: You will need to find some way to render that content outside of the editor, if that’s a functionality you need.
👎 Con: If you ever decide to switch to a different rich text editor, you need to write something to convert all your existing saved data to a new format supported by the new editor.

🖍 You could save in another format, like markdown

Similar to HTML, libraries already exist for this.
- draft-js-export-markdown and
- draft-js-import-markdown
- markdown-draft-js (shameless, as I maintain this one)
👍 Pro: Easy to later render elsewhere outside of the editor
👍 Pro: Not locked in to any proprietary Draft.js conventions if you later switch to a new editor.
👍 Pro: If you want to let people toggle between markdown and non-markdown mode seamlessly when editing text, this could be a good use case for saving as markdown.
👎 Con: If you plan on rendering the content in HTML or some other format outside of the editor, you have to take the additional step of converting the markdown.
👎 Con: Markdown behaves a bit differently from “normal” plain text, in that it strips multiple newlines. This may cause problems - if someone has ten empty lines between paragraphs, markdown by default will strip them so people won’t see EXACTLY what they saved. There are work-arounds but 🤷‍♀️
👎 Con: Same as HTML: Have to convert back and forth from markdown to a Draft.js format if you want to edit it later.

What is the best way to render the rich text (eg in a comment feed, if the form is for writing a comment) after someone submits a form?

If you are saving the raw object and need a way to then convert it to HTML for rendering purposes, this library exists: draftjs-to-html

There’s also a library for rendering in react native here: react-native-draftjs-render

How do I get the placeholder to work like a normal placeholder in an input?

You can pass in placeholder=“Your placeholder text here" to the Editor component just like you can with a regular input or textarea, but as you may have noticed, by default it doesn’t really behave the way you’d probably like it to.

My go-to for this is to use a bit of CSS.

Set to position: absolute so it doesn’t take up any space
Set to pointer-events: none so that it doesn’t block you from click-to-focus on the editor
Change its colour to something a bit more placeholder-y.

Here that is in CSS:

.public-DraftEditorPlaceholder-inner {
  position: absolute;
  color: #ccc;
  pointer-events: none;
}

There's another little problem though with the placeholder: If you insert a blockquote or an ordered list, the placeholder hangs around 😧

My solution to this problem is to toggle a class on the parent element to detect if there's some block-level style in place, and add a hide-placeholder class if so.

The CSS -

.hide-placeholder .public-DraftEditorPlaceholder-inner {
  display: none
}

The JS -

const contentState = this.state.editorState.getCurrentContent();
let showPlaceholder = false;
if (!contentState.hasText()) {
  if (contentState.getBlockMap().first().getType() === 'unstyled') {
    showPlaceholder = true;
  }
}

Then further down, when rendering, you can do something to dynamically update the className, either using a tool like classnames or just hardcoding the logic:

<div className={`my-little-app ${!showPlaceholder ? 'hide-placeholder' : ''}`}>

Are there any places where I can find a list of useful tools and extensions for Draft?

There are tons of useful tools that people have written. nikgraf/awesome-draft-js is a good resource for finding many of them 🙂