jacwynn.com

App Developer

Building a Clock – Day 2 Javascript Challenge

Welcome to Day 2.  This project is involves creating a functioning clock that displays the time.  The code we are given is just the make up of the clock with the seconds, minutes and hours hand.  It’s our job to animate the hands so it works as a real clock.  Some of things to be familiar with in this project is the Date object Javascript provides us with (this is so the clock knows the real time), and how to transform elements with CSS.  So lets go over what these do before getting into the project.

 

Javascript’s Date object gives us a lot of options that allows us to do different things regarding dates and time.  The MDN website says that this object represents a single moment in time.  A cool fact about this is the Date object is based on a time value that is the number of milliseconds since January 1, 1970.  Regarding this Clock project, we are going to need the seconds, minutes, and hours for the current time in order for the clock to work.  The method to get the current time is .now().  This is used on the Date object.  In order to get the seconds, minutes, and hours we will call the getSeconds(), getMinutes(), and getHours() function.

 

 

Now that we are familiar with the Date object, we have to animate the hands so that it works like a real clock.  In order to do this we are going to use the CSS property transform.  And on transform we need to rotate the hand.  Since the transform-origin default property is set to 50%, that makes it rotate in the middle instead at the end like how we want it.  So all we have to do is set transform-origin to 100% to achieve what we want.

 

One last thing we can’t forget to talk about is the setInterval method.  This repeats a given function at every given time-interval.  For this project, we have to set the time to 1 sec.  This will run the code (rotating the hand) every second.  This will give us the ticking functionality and make our clock functional.

 

To conclude, we learned about Javascript’s Date object and setInterval method.  And we learned how to rotate elements using the transform CSS property.  Make sure to stick around and what’s next for Day 3.

 

Here is the source code for this project and link to see the finished project.

Source Code

Finished Project

Building a Drum Kit – Day 1 Javascript Challenge

It’s the first day doing this Javascript Challenge I learned the other day.  I’m excited to be able to sharpen my skills and improve as a programmer.  Hopefully these challenges can help other people with their programming journey as well.  I will try to be as clear as possible, but this is new to me so bear with me!  So let’s begin.

 

The first challenge is creating interactive functionality for a Drum Kit.  Basically I need to play a sound whenever a corresponding key is pressed and add a yellow highlight around the box.  In order to do this, I’m going to have to understand the addEventListener() and querySelectorAll() function, data attributes and audio tags for HTML5, and how to loop through the list the querySelectorAll function returns.  Reading this post will give you an idea on what those things are.

 

What is addEventListener() function?

The addEventListener() function attaches an event handler to a specified element.

Syntax: element.addEventListener(‘event’, function(), useCapture(optional))

Basically you add this function to an element whenever you want to listen for some kind of event.  An event could be keypress, click, or mouseover.  Click here to see the rest of events.  A situation you would use this is when you have to add multiple events to an element.  With onclick it is not possible to add multiple events so it is best to use addEventListener whenever you need more than one event on a element.  Be careful though, addEventListener isn’t compatiable with IE browsers.  Instead use the attachEvent method for IE browser using versions below 9.

 

 

What are Data Attributes and Audio Tag?

Next we have Data Attributes for HTML5.  These are pretty cool.  Data attributes store additional/custom information about an element.  They can be useful whenever using CSS and even Javascript.  The way to use Data Attributes is the same way you use different attributes in HTML.  It is just like the href attribute for anchor tags, src attribute for image tags, and the class attribute for any kind of HTML element.  An example of what a Data Attribute looks like is basically “data-” then whatever data you want to hold next to that.  For instance data-key=”65″ (key : 65).  And if you think about it, it is basically just a normal key/value pair that is stored on that particular element.

 

In this project, you’ll see there are different sounds that relate to a particular instrument.  The sounds are using an audio (<audio></audio>) tag.  An audio tag specifies a standard way to embed audio in a web page.  Just like the image tag, the audio tag accepts a file path from the sound file using its src attribute (just like image tag).  It accepts three different formats which is mp3, ogg, and wav.  The different properties this tag has allows you to play/pause audio and also set volume and duration.

 

Using querySelectorAll() and Looping Thru NodeList

In Javascript, there are many different ways to select any given element within the DOM.  One way is to use a function called querySelector.  This returns the first element within the document that matches the specified selector.  An example of this would look like this:

var jac = document.querySelector(“.jac”);

What is in quotes would be considered a CSS class jac.  Now we have the querySelectorAll function which returns a list of the elements within the document that match the specified group of selectors.  The object returned is a NodeList.  Something to keep in mind when using querySelectorAll is, since it returns a NodeList, you can’t loop through with a forEach it like you would any other array.  In order to loop through this NodeList using pure Javascript you have to use the .call() function.  So your loop would look like this:

keys.forEach.call(keys, function(el) {

     el.addEventListener(‘transitionend’, removeTransition);

})

keys is the array, el (being passed into function) is each individual key, and on each key, a event listener is being added to it.  This is how you would you to loop a NodeList.

 

Conclusion

That pretty much sums up the Day 1 project.  I definitely learned a lot and enjoyed trying to explain it so that it would really stick in my mind.  Hopefully this helps somebody out there.  Day 2 project seems to be about making a clock so that should be interesting.  I’ll see you in the Day 2 blog post.

 

Oh yea, here is the link if you wanted to checkout the Drum Kit project.

Day 1: Drum Kit

#Javascript30 Challenge

Recently, I have been trying to find ways to become better at programming. Being in this field you have to always keep your skills sharp and add to your skill set on top of that.  To me, that’s what makes programming fun.  There is an endless amount of things you can learn in the programming world.

 

My goal for the year was to become a stronger Javascript developer.  So far, with my interest in React Native, I can say I’m better than I was last year, but I don’t want to settle, I want to get as good as I can at this stuff.  I ran across the #Javascript30 challenge that seems pretty cool.  Basically you build 30 project in 30 days using pure Javascript.  This is interesting to me because I been reading that it is important to get a good grasp on plain Javascript before hoping on all these new frameworks/libraries.  Having the knowledge of plain Javascript can help you understand what going on underneath the hood and it helps with debugging issues on those new frameworks.

 

Anyway, my goal is to have a blog post for each project/day so hopefully someone else can learn from this experience.  Keep a look out for Day 1: Drum Kit

How I Got In Computers & Coding

Not too long ago I began this journey to learn how to code website and apps.  Three years later, I have a handful of clients that I’ve built websites for and also depend on me for their website needs, I’m working on a cool mobile app side project that I’m excited about completing and launching, and I’m working full-time as a web developer at a creative digital agency.  As you can see, quite a bit has happened since then and I’m more than grateful for all the lessons that where learned along the way.  The one thing that I can say that has been consistent throughout that time is, I’ve always stayed curious and wanted to learn the best practices on doing things and I always wanted to help people with their website.  And sometimes helping people meant doing a lot of free work.  Which at the time, I didn’t mind doing because I was gaining valuable experience.  Some of those same people that I’ve done free work has helped me get paying clients that I still work with today.  Starting out, I strongly believe you should just say yes to whatever people are asking you so that you can gain experience and learn what to do and what not to do in certain situations.  You’ll also learn an another important skill and that is how to communicate with people on a business professional level.

 

Back to why I got into computers and coding

I’ve always enjoyed putting things togethers.  I can remember when I was younger I loved getting the toys that you can put together.  I can also remember always taking toys apart (breaking them) so I could see what the inside looked like and how it worked.  I think doing those thing as a kid prepared me for the type of thinking you need to be a programmer.  As time went on and I got older, the toys started to become electronics/gadgets.  If you grew up in the 90’s, then I’m sure you are familiar with Gameboy Color, electronic organizers (which I didn’t need as kid but was just cool to have), and palm pilots.  Then came the cell phone, well at least the camera cell phone, which was a huge deal back then.  Having my own phone exposed me to a lot of technological things because it was like a computer in my pocket.  Whenever I got an iPhone, that’s when I got into the software side of things.  That’s when I got curious with jailbreaking and making my phone look different from everyone else’s and it interested me a lot.  Then I got an Android phone and enjoyed being able to root the phone and have full control over it.  Messing with the kernels, even though I didn’t know what I was doing.  I believe all this piqued my interest in learning how to code websites and build mobile apps.  Sometimes I feel bad for people that haven’t found that thing they love to do and can do all day.  A way I was able to find out was to look back at what I did as a kid and figure out what I enjoyed doing the most.  And I also tried to think of something I would do for people for free.  Those two things lead me to doing computers and coding and I’m happy I made that decision.

App Validation

Ever since the conception of the App Store (July 10, 2008), people from all over the world has tried to achieve success with building mobile applications. During that time, the chances of creating a successful app where much higher because everything was so new.  People would download anything.  I’m sure a lot of people have made a good living by creating a simple to do app.  Nine years later the App Store is more competitive that it’s even been. On a day to day basis there are roughly 1000 apps being submitted to the App Store which means it’s not so easy to make a living with any kind of app. Now a days your app has to be designed beautifully, function properly, and most importantly SOLVE A PROBLEM/NEED for the user.  If your app isn’t making the users life more simpler or saves them time then you can almost guarantee your app will fail.

The way to avoid wasting time building an app nobody would ever use is to VALIDATE YOUR IDEA.  Validating your idea does a couple things for you. When you validate your idea, you are basically saying “If I build this app I know people will want it and will buy it”.   And the way you know that is because you actually went out to find your potential customers and you asked them!  Another thing validating your idea does is help you see how the customer thinks. It helps you understand them a bit more. A customer may bring up something you didn’t necessarily think of at first. Understanding your customer is very important when it comes to building an app that people would love and most importantly buy.

If people are saying yes to your app idea and are excited about the idea then you know there is some interest there.  It’s best to figure out if that potential customer would actually use your app.  If your really serious about this, see if people would give an email address to notify them when the app is available. If you can get people to do that then you know your on to something.

Overall, validating your idea is very important in the early stages of building an mobile app. The main reasons it’s important is because it saves you time and money and you know you won’t be building an app that nobody wants.

Should I learn Swift or React Native?

To learn Swift or not to learn Swift?  As of late, their has been this cool cross platform language called React Native that allows you to deploy native apps for both Android and iOS using only one code base.  What makes this appealing is you can save a lot of time and money since you only have one code base to manage.  Instead of hiring two developers to build an app for different devices (iOS and Android), you can hire one that can take care of both.  So the question is, should I learn Swift even though there are cool technologies like React Native that allows you to build actual native apps using Javascript?  My answer is yes and no (sorry), you should learn Swift, but also learn how to make apps in React Native as well.  If you want to be an effective mobile developer especially using iOS, you should probably know Apple’s language Swift and even some Objective-C (what Apple used before Swift).  But since the world of technology changes so quickly, it wouldn’t hurt to learn how to use React Native as well.

 

For the time being, I’m going to commit to building mobile apps with React Native.  I believe it will be around for a while and since Facebook is behind it I know it’s only going to get bigger.  Plus it’s in Javascript.  I like Javascript.  At least I think I do 🤷🏾‍♂️.

 

In all seriousness, I hope I can teach whoever reads these blogs the things I learn about building mobile apps.  My goal is to share everything I learn and make it understandable for every reader.  If you still have questions, don’t hesitate to reach out ([email protected]).  I can almost guarantee I’ll respond back haha 😉.  So until next time. Stay productive!

 

 

What Is Full Stack Mobile Development?

Full Stack Mobile Development.  Have you heard of it?  Do you know what it is?  If you haven’t, please continue reading to find out.  First let’s break this down.  What does “Full Stack” mean?  Let me explain.  When it comes to web & mobile apps, there are two sides that build up the application as a whole.  You have “Front End” and the “Back End”.  The front end is what you see on your screen and the back end is handling all the logic and database tasks in the background (what you don’t see).  So now that you know what those two terms mean, you should have a basic understanding of what “Full Stack” means.  Full Stack is simply both front & back end technologies working together to build an application.  A person that calls themselves a “Full Stack Developer” is saying they are well versed and comfortable in using both front & back end technologies.  They can style things using the best CSS practices and at the same time can write complex logic on the server side.

 

Mobile Development

Now let’s talk about what exactly mobile development is.  Mobile development is almost like web development, the main difference is mobile development is targeted for any mobile device.  That can range from phones, tablets, and iPads.  You can think of these apps as the desktop software we use to use back in the day.  Like I mentioned earlier, mobile apps have two sides that make up the whole application, the front and the back end.  Now you can probably guess what Full Stack Mobile Development is now.  If you still can’t connect the dots, allow me to connect them for you.  Full Stack Mobile Development focuses on dealing with API’s, databases, and application logic on the back end, while displaying and formatting data properly on the screen using front end technologies.

Another thing to know about mobile development is that there are 2 major platforms you want to focus on.  That is iOS and Android.  Both of these platforms are great in their own ways.  Android is open source and the rules are a little less strict when it comes to deploying your app to their store.  On the other hand, Apple is more private and has a very strict process for submitting apps to their App Store.  If you new to mobile development, I suggest learning iOS development.  The reason I suggest iOS development is because it is easier to learn the language and simply because I am not a fan of using Java which is Android’s programming language.  Either way, don’t stress too much on which to pick.  Either one is a good choice and can be a very lucrative career.

 

Review

Ok now let’s review.  Full Stack Mobile Development focuses on server side technologies such as databases, api’s, and application logic and it also focuses on how to properly display and format the data on the screen.  Now that you know this, we can go deeper with learning different back end technologies that builds mobile applications.  Stay tuned and make sure to read the next post!

What To Do About Hosting Your Website

So you are excited about the new website your about to launch.  You’ve just purchased a domain along with a beautiful theme.  You think you are finished but you forgot one crucial thing about having a website, and that is hosting.  How are you going to host your brand new website?  Of course there are many solutions out there that will solve that problem.  But being able to choose what is best for your site is very important to your websites success.  You want to make sure your website is fast, secure, and rarely experiences any downtime.  That way, your visitors will have a great experience using your site.  To achieve this, its best to use a cloud hosting service like Digital Ocean.  With Digital Ocean you can create servers pretty quickly.  You can also configure them any way you want which gives you more freedom than your other hosting companies. And since Digital Ocean is pretty much a dedicated server, you don’t have to worry about sharing resources from other sites like you do with shared hosting plans.

If you serious about giving your website visitors the best possible experience on your website, I suggest you switch your hosting to a cloud hosting company and enjoy having the freedom of having your own server.  If you are interested in moving your website to Digital Ocean just reach out to me and if you have questions, leave comments below!