I’ve been doing a lot of coding on the front-end lately; actually I’ve been doing so much that I might need to create a quick primer about it. If you’re just like me and need a refresher or are just getting the hang of SQL and need a quick reference, you might appreciate this one. For this primer, I’ll use MySQL syntax.
I love designing websites and I’ve designed plenty of sites to start to realize there are certain CSS tricks I always keep on my master sheet to make my life easier. A lot of the time, if I’m building my CSS from scratch, they’re always a copy and paste. I’m not a pro by any means, so take my advice with a grain of salt.
master.css I usually have the following below.
font-family: <Font of Your Choice>;
Everything has their own padding and margin size and by simply setting your own padding and margin with box-sizing set to border-box, everything manually will allow you to perfectly align items better. Setting width & height of html & body to 100% will allow you to set a background wallpaper, without it seeming like a website from when the internet first came out. …
I’ve had my fair share of trouble implementing Google Maps in ReactJs using a
npm package. Hopefully this article helps you avoid the troubles I’ve gone through.
The trouble was mostly finding the best package with good documentation to follow through so that I can get my Google Maps on my page and going. The package I found best was
google-map-react by istarkov.
What was really nice of him to also do, was to also create a React.Js example project implementing
google-map-react. This way you can have real world application to see an example of.
He does a pretty good job getting you quickly started through his documentation, but I threw in this example just in case you wanted to copy and paste it immediately. …
Everyone who’s a web developer should understand how to make their website responsive to even the smallest extent. It’s expected that everything that is currently digitally available will be mobile friendly in some possible way or it seems like your site and skills are somewhat out dated. So I made a quick start guide on how to make your site minimally responsive by adding only two things to your CSS file.
The first thing to realize about Responsive design is to make sure your website is fluid. What that means is that your website components should scale with your screen size. The way you start to make your site fluid, is by using percentages for your height and width instead of static pixel sizes. …
Occasionally, I’d hear about linters, but never gave it much attention. I’d rationalize, I’m coding pretty well without a linter already, why bloat my coding experience?
Linters save time for you, by debugging your code before you even run your application. Additionally it makes sure you and your team are all following clean code practices. ESLint is quick and easy to setup and the benefits are too great to ignore.
You had a misspelled variable named
peopleand you run your code, then your projects breaks, you go on console, console says some arbitrary line number like error on line 43, then you go to line 43, see that you passed a variable named
This is a quick tutorial for if you already have a Github page and want to change your domain url from
customDomain.com. If you haven't already, buy a domain from Namecheap, I recommend it since you usually pay around $1-10 for a year and the UI is beautiful.
First, go to your Github Page repo and click on Settings, then scroll down until you see Custom Domain. In the input box, type the domain name you just bought to set your Github Page too, e.g.
Lets return to the Code tab of your repo, you should now see a new file created, named
Express + Node.Js is extremely simple to start serving things with. At times, I even had to ask myself if I was even doing it right. Hopefully this is post is just as simple to understand.
I do want to say a disclaimer that this isn’t your final version since you’ll be adding folders like
controllers, but its mostly to get you past the Node + Express intro hurdle. Another disclaimer, Node + Express is much more relatable to Sinatra then Rails.
Make sure you have the following installed.
$ npm i -g node express nodemon
We’ll create a directory for our project and them run the following. I use atom, but if you use another text editor besides for atom you can…
If you’re like me, you dread TDD because you it kind of feels like more work then it needs to be, but we all know that TDD can make sure you don’t forget what your project guidelines are if their put in place. If I wanted my project to have a single button on the screen and then ended up 3 buttons instead, test code I’ve written will remind me that I’ve got 2 more buttons then I had originally hoped for. Aside from when you’re solo, this is extremely beneficial to your team who will also be working on the project with you. …
I’ve usually used frameworks for CSS and didn’t really worry too much about having SCSS or SASS support for my React projects, but on a recent project of mine, I’ve decided that I’m going to build my own CSS framework and grid for myself, since I wanted some of my own tweaking flexibility. While building my own CSS framework, I’ve had so many redundancies in my CSS that I knew it was time that I just had to port to SCSS.