I'm a Salesforce and web developer based out of Vancouver, B.C. 

About a year ago, a coworker recommended a productivity app to me. I was already using all kinds of productivity apps that hadn't actually manifested in any increased productivity, so I ignored him. However, yesterday he was vindicated, because I decided to actually give the one he recommended a fair shot, and so far, I love it. 

Notion is an app that's "more than a doc, or a table", to quote their marketing headline. I'm assuming their actual pitch, and actual value, is more geared towards enterprise teams, but they use a freemium model that allows you to sign up for free as a single user, which is what I did. 

So it's more than a doc, or a table, but what is it, actually? Basically, in my opinion, it's like a very nicely organized version of Google Drive that makes it easy to navigate around between different types of documents. There are a ton of different templates you can use to set it up however you want. For me, I used the Personal Home template. I'm using it for work, but I liked all the different document types it had, and I was also scared of the professional templates. 

Originally what put me off Notion was the amount of work it seemed to take to set up. I don't know why - some days are lazier than others, I guess. This time, I simply typed the words "how to set up notion tutorial" into the search engine, and this extremely helpful youtube video popped up. 

It took about thirty minutes to get it set up how I wanted, pick out all the graphics, and develop a slight obsession with William Morris wallpaper prints. Here's how it looks: 

I've only had Notion for a day, but if anything happened to it...

So far, I really love the To-Do lists, the Kanban boards, and the tables with all my different notes. Notion blends the project management tools with document storage really well, and while I was working yesterday I found it really easy to navigate between my different lists and notes and tables. For example, I found a course on Algorithms I wanted to do, so I stored that in my Content list, and then when I started it, I added a link to my Notes, created a new Notes record, and was able to take notes, including screenshots, links, and re-ordering. Basically, I'm a fan. 

I know there's a ton more you can do with it (the integrations and widgets seem super interesting), but for now, I'm happy to just keep exploring...and changing the William Morris wallpaper covers. Seriously, why did I ignore these in my Art History course when they are clearly the best thing to come out of England aside from Downton Abbey. 

I finally started making a new site! I was really excited with the combination of prismic.io, nextjs and netlify. However, as is tradition, I first had to overcome some build failures.

I used this introduction to next & prismic tutorial to get started - you may in fact notice it bears a strikingly resemblance my current website - and set up the deployment using parts of this tutorial about how to deploy a nextjs site to netlify in 5 minutes. If I had read it better maybe I wouldn't have spent 20 minutes deploying my site, but I'm older (by 20 minutes) and wiser now. 

I set up a git repo for this site's code and then connected that to my netlify account. I had an old gatsby repo connected to my domain and taking up space, so I was really pleased that it was simple to swap out the repo connections to my new site and trigger the build. 

Unfortunately, that's when the build failures started.

failed during stage 'deploying site': Invalid filename 'documents/en-us/XFGkzBAAACAARSzM=#=XFGkzBAAACAARSzN=#=blog_home=#=XFGkzBAAACAARSzO=#=en-us=#=y.json'. Deployed filenames cannot contain # or ? characters

I was worried about it, but in case anyone looks up the error and finds this: delete the files in the document folder. It's fine! They were old documents from the demo site I cloned.

This one faked me out because the build was successful, but when I went to the live site there was a big 404 error there. 

So I perused this thread, enjoying the 'help me you idiots' vibe the original poster was giving, and learned that:

netlify does this when it can't find an index.html file

running 'next build' doesn't make you an index file

this is because nextjs can be both static and dynamic so it doesn't automatically make you an index file (I think, someone correct me if I'm wrong)

Halfway through the thread a lovely person did post the answer on how to resolve it, which was to create a netlify.toml file with the following:

[build]
    command = "npm run build && npm run export"
    publish = "out"

Then to add this to the package.json file:

"scripts": {
    "export": "next export"
},

(.toml is a configuration file type that netlify & other projects use. It stands for "Tom's Obvious, Minimal Language". Thanks Tom!)

Unfortunately I still had one last problem, which was that my build would exit because it didn't want to run the next export command. The reason was this line of code in my project:

export async function getStaticPaths() {
  const documents = await queryRepeatableDocuments((doc) => doc.type === 'post')
  return {
    paths: documents.map(doc => `/blog/${doc.uid}`),
    fallback: true,
  }
}

To be totally honest, I'm not sure why, and maybe I'll update this post when I do learn why. There are some articles that seem promising if you want to read them yourself... something about dynamic server rendering versus static site and path routing... anyways, this is definitely just a static site, so I set my fallbacks to false & then redeployed. 

...
    paths: documents.map(doc => `/blog/${doc.uid}`),
    fallback: false,
...

Hope this helped if you also had some issues with this & good luck with your projects!

Deployment Debugging with Netlify, NextJS and Prismic

Every once in a while you find yourself doing something weird - in my case, trying to debug SQL import errors. I wrote this trial up for posterity and in case I would ever struggle with this again.

Maybe it's because I don't much about SQL, but the server error cracked me up.

MySQL said:
#2006 - MySQL server has gone away.



Anyways, what it means is the database is timing out trying to import the file. Rather than trawling through StackOverflow using that as a search phrase, instead I decided to try everything else.

First I tried a bunch of stuff that didn't work for me, but may work for someone else struggling.

I changed the file extension from .gz to .sql.gz

I checked that the character encoding was set to UTF8

Finally I had some success by tinkering around with the actual MAMP configuration files.

Editing my.ini (also known as my.cnf) in the bin files so that my max_allowed_packet = 64 MB and the wait_timeout = 1000 & then restarting.

In the top-level of phpMyAdmin, there's a tab called Variables. In that tab there is a big table of variables (I know, shocking). From there, edit max allowed packet to a bigger number.

After doing that, I restarted the servers and finally I had the sweet satisfaction of my database uploading.

IMPORTANT. I can't guarantee any of this, especially for live servers.

Anyways, hopefully this will help others, or at least be a handy reference when I have to reimport a database and get stuck again.

Ever been to a website and noticed the highlight color was different from the standard blue highlight? Here's how they did it.

::selection {
    background: #000000;
    color: #ffffff;
}

Is simply changing that not enough for you? These are some other effects you can add to your text.


.atrocious::selection {
    background-color: green;
    color: pink;
    text-shadow: 2px 2px 6px black;
}

Unfortunately (and probably because the W3C has common sense), you  can't stack more pseudo-selectors or pseudo-classes onto your selection.  For example, super-atrocious:nth-of-type(even) won't yield a beautiful checkerboard of highlights. It also doesn't seem to support more advanced background properties like images or gradients.

However, as shown, you can give classes their own ::selection styling. Why? Why not, I guess. 

Change your website's text highlight colour

Nicola Codes

hi@nicola.codes

Getting Started with Notion

Deployment Debugging with Netlify, NextJS and Prismic

Debugging Wordpress SQL Import Errors

Change your website's text highlight colour