I’m building some web apps for fun but not super willing to pay for fancy custom domains (yet).

So when I came across this article, I was very excited and immediately proceeded to get > 5 domains.

(I also tried registering for covid19.tk, but such domain names were already taken. Fastest fingers win).

After getting the domains, the next step was to update the nameservers. I basically followed all the steps above in the article.

Now we get to the interesting part where the real troubleshooting begins (since everything until this point, someone already wrote an article on the how-tos for configuring nameservers and whatnot)

I primarily use Netlify for hosting all my frontend projects — pretty great.

Up to this point, I’ve no issue with using their generated subdomains (usually in the form of xyz.netlify.app).

Since I’ve a few custom domains now, I needed to find out how to configure my external DNS provider (in this case Cloudflare) to work with my Netlify hosted sites.

Here are the steps I took:

1. Head to Domain Settings in your Netlify dashboard.
2. Click on Add Custom Domain.
3. Add your custom domain and add one more with www.
4. When done and saved, click on Check DNS configuration. (for my case, I did not do anything with the information that showed up in the dialog)
5. Login to your Cloudflare dashboard and click Add record under the DNS tab.
6. You should see a new row with some input fields. Under Type, select CNAME from the dropdown. Under Name, key in your custom domain url. Under Content, copy over your Netlify generated domain. Leave the other fields as is. Save the row.
7. You just need to add another new record, repeating step 6, but this time, under Name, key in www only.
8. Save the additional new record.
9. It might take a while (it took a few minutes for me) for the changes to propagate.
10. Make a cup of coffee while waiting.
11. Go forth and be happy!

There are definitely other ways to get around this, but I feel like this is the most straightforward solution for me (until I decide to not feel lazy and try other approaches).

I took references from https://stevepolito.design/blog/configure-cloudflare-dns-to-work-with-netlify/ and https://serverless-stack.com/chapters/custom-domain-in-netlify.html.

Some links I thought were useful —

• Rails: rake db:create:all (could not connect to server) psql works fine
• Setup Ruby On Rails on Windows 10 - GoRails

and https://medium.com/@colinrubbert/installing-ruby-on-rails-in-windows-10-w-bash-postgresql-e48e55954fbf

https://www.facebook.com/notes/kent-beck/mastering-programming/1184427814923414

I didn’t want to dive straight into the design as it was important to sort out the requirements of the website and it’s intended goals, audience, etc.

For a head-start on exactly how and where to begin, I am going to refer to Brad Frost’s guide when he redesigned the Pittsburgh Food Bank, haha. For one, it’s a nonprofit as well. Secondly, he laid out his timeline and steps very clearly on his website on the whats and whatnot to do.

Let’s go!

My first step is to-

Decide what should be prioritized for the website — because we want to know what should be the most prominent menu items, I did some URL mapping.

URL mapping — as the site has has existing Get Involved, About , and Our Services Page, I will keep those as the main pages to redesign, alongside the home page.

They have a Donation subheader, but I noticed that it was a static page with just an embed donation form in pdf. To make the Donate Now CTA more outstanding, I have decided to dedicate a separate page to it as well as a section as part of the home page (more on that below).

The final mapping of URLs look like

/donate-now

/about-us

/our-services

/get-involved

The next step — doing wireframes with style guides and content layout in mind.

For this, I am using Axure to prototype (but I have done until the index.html page only, due to lack of time :( ).

For the index home page, I featured 3 main thumbnails from each section: News, Our Services, and Events for equal showtime and to reflect updated content, as I felt that dedicating the home page to one main section would be pretty unfair.

For the Donate Page, I added a Donate button in the home page as a CTA. This is then redirected to the Donate Page where users can just fill in their desired donation amount.

That is just about what I had managed to do within the past 2 weeks or so, from deciding what to redesign, looking through references, and determining what layouts to adopt.

What I’d learnt:

That it is really important to plan in modular steps. What I mean is things like page structures, what components are appropriate, and the styling of the components should be planned early on. Otherwise, you would end up like me who decided to change the fonts of the body at the last minute.

This has been a good practice for me as I learn more about web design principles and semantics as well.

Feedback welcome! More on github.com/jlin95/Lab1Assignment.

Learning about querying the right items from a table/tables, joining two and more tables, and different data types.

One interesting thing I came across in SQL is how precise it has to be. For example, in data_type = text, there’s a few kinds, like:

text where it denotes a string of any length. No restrictions in general!

char(n) where a string has specifically n characters.

varchar(n) where a string has up to n characters.

1. Went to Six Flags, took the world’s tallest rollercoaster, sat on a wooden rollercoaster, convinced a friend to take a super high vertical drop coaster, and still made it out intact. Definitely satisfied my adrenaline rush.
2. Shaved my head out of pure will and want. Got both confused looks and compliments and a shake of disapproval from the salon lady who was probably relived that it was not her daughter who was being so reckless. Oh!~
3. Visited San Francisco (the lovely West Coast), hiked Twin Peaks on my own, navigated around the area and not get lost.
4. Biked around Brooklyn, got a bruise, made it back alive.
5. Won a hackathon, won some cash out of it, feelz good.
6. Coded a heck lot of stuff.
7. Have an idea to pitch for that I am pretty psyched by.
8. Visited the Niagara Falls and managed to soak in some of the holy mist. Haha. It was awesome.
9. Attended a yacht party and things happened. :)
10. Went out with colleagues just to chill and laugh.

I will miss all this.

So TC17 surprised me. I was on board, had good teammates, got to see firsthand what it’s like to really build an end to end system within 24 hours, got to actually try PubNub’s API and have it work (wow), and tossing out code.

And witnessing true marksmanship at work when my group mate had to code a feature in the last 20 minutes before our presentation.

I have so much more to learn. There were good ideas, ideas that I did not know why they won (but hey, it’s 60 seconds on the stage, 60 hours off it right?), ideas that could have won, and I think I went home totally not regretting my decision to attend this hack.

It kind of sparked my desire to build and hack again (gasp!).

Want to learn that Flask framework to put together an idea you have? Go ahead! Have free, unlimited API usage? The world is your oyster.

Just don’t sell your idea short by abandoning it. The best ideas are still the ones that the makers feel an ownership to.

(I must admit I miss the rush of having your code to work because you actually stayed up to look through it, until you realize it’s 6am and you should really take an hour’s sleep. Fun times.)

Ta.

A couple of weeks ago while editing the CSS for a page, I reused a style for a component, while forgetting to rename the class.

CUE APPLAUSE.

But yeah, do not ever do that! Overriding and shit.

Seriously.

Sara Bareilles’ music

Booking trips off the beaten path

and eating lovely food, made with love :)

So a little bit of SOF said to hit CTRL REFRESH F. And it worked.

Be careful of deeply nested CSS :)