DEV Community: Brian Bartholomew

Your First 3 HTML Elements

Brian Bartholomew — Wed, 10 Feb 2021 15:45:39 +0000

TLDR

When starting to learn web development, I would focus more on javascript and CSS. To help with that, learn these three HTML Elements:

<div>
<button>
<input>

You should and will learn others. But this is a great place to start.

If you are a developer, as a challenge, try to build an accessible login screen with just <div>s.

FREE Course
Twitch stream

Bit by Bit

I am a self-taught software engineer, and I have helped hundreds of aspiring developers. The biggest challenge I have seen is that people try to soak in too much content too quickly. More often than not, the knowledge is lost, and time is wasted.

The funny thing is most people retain things that are not pertinent or retain them incorrectly. This is a typical problem in many boot camps. They turn on that hose and say good luck. Don't get me wrong, this works for some people but not everyone. To help with this I suggest learning three HTML elements: <div>, <button>, and <input>.

Why These Three?

Knowing these three will help you understand the structure and provide an introduction to user experience (UX) and accessibility. This will force you to learn more CSS and HTML attributes to write good UX and more accessible code.

To be clear, you should learn other HTML elements. This is for beginners, so they don't get overwhelmed and allows course curriculums to get to JavaScript quicker.

I Already Know These

If you feel you are beyond this in your journey, try to make a login screen with just <div>s. This means making an input that has focus ability and editability with a <div>. You learn some cool CSS and JS. Feel free to share your solutions in the comments. I don't intend this to be practical for production but educational. I hope that you will learn things you may have missed in your saga.

Learn With Us

Check out our FREE course if you want to build a tabletop RPG dice roller app with these elements. The app is not the most fantastic thing ever, but it is pretty cool for your first app.

Come check out our Twitch stream most weekdays at 11 am MST.

Photo by Michael Jeffrey on Unsplash

3 Tools to Build and Deploy a Web App for FREE

Brian Bartholomew — Mon, 08 Feb 2021 15:33:47 +0000

Photo by Hunter Haley on Unsplash

TLDR

If you are new to programing you don't need to download anything just need a chrome browser...

Make an account on Github. Free code storage.
Log into Codesandbox with the same GitHub account. Free online code editor.
Use the new GitHub account to log in to Netlify. Free web app hosting.
Take our FREE course to use these tools and build Dice Roller 9000.

Links: Github, Codesandbox, Netlify

Details

Github is facebook for developers, but instead of sharing stories and pics, we store our code there. Codessandbox is an online code editor. Netlify can pull our code from Github and publish it on the internet so anyone can see it. It takes less than seven minutes to set this all up and deploy a simple web page.

Check out our FREE course if you want to try these tools and build a tabletop RPG dice roller app! The app is not the most fantastic thing ever, but it is pretty cool for your first app.

Come check out our Twitch stream most weekdays 11 am MST.

Making a Timer in JavaScript

Brian Bartholomew — Wed, 18 Nov 2020 16:05:52 +0000

TL;DR;

Codesanbox link with notes
Twitch stream, twitch.tv/codesagas during your lunch break, 11 AM MST
Youtube
Twitter

This is Easy Right

As a coding educator, I have seen many developers make a timer in js like this

setInterval(function(){
  // Do my task every second...
}, 1000)

This will work in most cases but there are some cases that it fails. The main case is giving the user time to do a task. Like a timed test or take a turn in a game.

The issue is that they may get extra time because the action itself takes time to compute. Also, knowing when to stop is tricky.

The solution requires a tad bit more work but is simple enough.

Solution

Just do the interval more regularly. It is easy as a human to get stuck in thinking in seconds because we commonly do that in real life. Computers can handle much smaller time frames. We might have to do a bit more but it gives a better experience.

setInterval(function(){
  // Do my task every 50 milliseconds...
}, 50)

Come Watch

This post was explored in more depth during our Twitch stream, twitch.tv/codesagas during your lunch break, 11 AM MST. Come hang out and learn something new with us. We go over most things web development and try to keep it simple. Replays are posted on Youtube in their entirety. And don't forget to follow us on Twitter for more tips, tricks, and updates.

Cover Photo by Veri Ivanova on Unsplash