Para(re)lax, it’s not so bad (:

I find myself so fascinated by parallax websites.

For those who do not know what that is, a parallax by definition is the effect where an object’s position and direction appear to differ from different positions, like through a viewfinder or camera lens. In the case of a parallax website, the position would be the position of the webpage when you scroll.

I first started working on a parallax project during my last module in my Flatiron School Bootcamp simply because I wanted to get my feet wet with it. I was so inspired by the websites on http://www.awwwards.com (definitely recommend checking out if you haven’t already! This is one of my favorites. )

It took awhile for me to start my project because I really had no idea of how to start one. So my developer instincts kicked in and began to Google.

However, I needed one specifically for a React project since building my project in React was one of the requirements.

I came across various libraries and different ways to incorporate a parallax into the project. Most of them were tutorials on how to make one using Vanilla Javascript and targeting specific elements on the HTML document. This doesn’t work in my case. I was running out of time so I decided to choose a library that was compatible with React. It was a special kind of parallax library that added a bounce effect when you finish scrolling through to a new section (see below).

Now that I’m not so restricted on time, I finally found the proper way of making one and wanted to share it! I found a video from Fullstack Academy, another prominent web development bootcamp, that shows an example of creating a parallax scrolling website. There were a couple of details that I needed to tweak to make it compatible with new ES6 syntax.

Let’s jump into it!

To reiterate, this is making a parallax component using React.js:

Starting the parallax component itself. This will be used to produce the different layers you will want on your website. With this component, you will be able to dictate the speed, direction, position, etc. elements of the your parallax layer.

This style object is defaulted as the components state. This will be where you can adjust the elements according to your taste through props or leaving it as is to its defaulted properties.

You might be wondering what those last two lines of code are for. These lines are for making sure that the parallax components are set and function properly once they are mounted. Since their states are dependent on how a user is scrolling, the method call this.handleScroll is used to set the “top” element accordingly.

The componentDidMount is what adds the event listener for scrolling. Once added, the event listener will be firing off A LOT more than we would like which would cause issues. To handle this, we have the throttle method which would fire off the event listener in a timely manner.

handleScroll is responsible for making sure the component knows what it’s top property should be set at every time the user scrolls. This will make sure that your parallax components appear and disappear from the page at the speed in which you would want it to.

And that’s it!

References:

Fullstack Parallax Scrolling Tutorial:

Parallax Springy:

https://github.com/drcmda/react-springy-parallax

It’s All Semantic(s).

When I first noticed myself REALLY get into styling a website, one of the main reasons for it was my introduction to the Semantic UI React library.

It was so easy to use and made my very first projects look THAT much better. For those who are unfamiliar with what Semantic is, you can think of it as a Bootstrap alternative. If that still sounds like gibberish to you, it is a library of code shared by a group of brilliant programmers to help other programmers add some quick and simple styling to their website. They were even kind enough to make a website showcasing all the different styling options along with the exact code needed to copy those options!

Wow, right?

Even better, here’s how to use it:

As mentioned earlier, I used the Semantic UI React library. The original Semantic is compatible with vanilla Javascript, but since my latest project was built with React.js, this library was specialized for this React integration.

First things first, once you create your React project, you will need access to the library itself. We can do that by adding it to your projects dependencies. Just enter the line below into your terminal (assuming you are in your projects directory).

$ yarn add semantic-ui-react

Once that’s finished, the rest is almost plug and play.

Default Button Vs. Semantic Button

Now let’s change that basic button on the left to look like the one with more design on the right.

On the Semantic UI React website (https://react.semantic-ui.com/), since we’re dealing with buttons, we can simply navigate to the button designs and functionality on the left hand side. Once there, you should see something like this below:

If you click on the button that says “Edit Code”, you’ll see the exact code used to render this button.

As you notice at the very top of the code, you would still need to import the Button component (any other Semantic UI React components are imported the same way). Once we have that imported, we now have access to use <Button></Button>. Notice the capital “B”.

In doing so, we now have a new and improved Semantic Button!

There are many designs and features laid out for us to use in this library. Just use this process, dissect and comprehend the literal code used in the examples, and incorporate that into the appropriate components you would like to have designed.

Have a crack at it and enjoy how much better your website would look!

Java the what?

 

As I progress through my job search after coding bootcamp, there are so many things that continue to race through my mind. So much so that sometimes I feel like it bottlenecks and slow down because I try to do so many of it at once. Like… what do I keep working on first, should I prioritize sending out job applications, keep building my personal website, or should I begin to learn a new programming language?

That very last point piqued my interest as even if I decided to do so, I wouldn’t know which language I should begin to learn. And so I Googled away!

Java is the clear winner here in terms of open job listings as the language to get under my batman utility developer belt.

Now, why is Java so widely popular?

Pros

Well for starters, it is an extremely well-established language. It’s over 20 years old now. And since it’s been out for that long, many of Fortune 500 companies use this language for backend development.

Another reason is because it is considered as a general-use programming language. Meaning that you can program just about anything with this language. It can be ran through any hardware and operating system. It is also the language of all Android apps!

Its syntax is also a lot simpler than that of C++ and C# making it a good starting point before branching off into different languages.

Cons

Now what are some reasons you wouldn’t want to use Java?

Java still requires an interpreter to run.

In Java, something is usually in reference to something else in the program. Meaning, if you change one thing, you will have to change other code that references it.

 

With still much on my plate, it’s nice to have some direction, game plans, and strategies on what to tackle in terms of sharpening and expanding my skills.

 

References:

http://www.codingdojo.com/blog/7-most-in-demand-programming-languages-of-2018/

http://www.digitalrise.biz/software/the-pros-and-cons-of-using-java/

What to include when building a personal website.

It’s been a few weeks now since I graduated from my bootcamp and ready to go full speed into my new career. One of the top things on my to-do list is to make my own personal website. But why make a personal website in the first place? Well for one, because I can! And as my friends and family members has said to me…

 

I am proud of myself as well! The amount of hours, frustration and hard work I put into learning these new skills have definitely been worth it! Though I am no expert, I’m confident in my ability to learn new technical languages, frameworks, and libraries on my own.

Now, going back to the topic,

It is a good way to showcase your coding ability and creativity. It is a demonstration to future employers that you are the real deal. Not only that, you will almost always be looked up online by companies that you have applied for. This will only make you more visible and help you stand out from your competition if it isn’t already the standard.

What do I need to include?

1. For starters – your BIO. Let everyone who is interested know who you are, what skills you have, companies that you have worked for. Express how you can be valuable to them. But most of all, show them your personality. Show them that you’re someone they can work with everyday.
2. YOUR WORK. Show off your creations, which projects you have been most proud of.
3. Ask fellow colleagues and clients you’ve worked with for TESTIMONIALS. This will show that you’re not all talk, but will have evidence to back you up and show that you also walk the walk.
4. Crucially, CONTACT INFORMATION. Have a way for people to contact you. I’m not saying to put out your phone number on your website, but include your email address and other social media platforms you’re active on.
5. PERSONAL BRANDING. Express yourself through your website, include your interests while still maintaining a professional look.

Now time to start building my website and evolve it into something I’d be proud to show.

 

 

References:

https://business.tutsplus.com/articles/what-to-include-on-your-personal-resume-website–cms-28052

 

What programming library did the Australian use in his application?

Get it? Because Australia… because mate… ok anyways.

What is Animate.css?

Animate.css is a cross-server library of CSS animations that you can use to bring your code to life.

When you finish your fully functional website then take a step back to look at its entirety, do you ever feel like there’s something that’s missing? Well, this probably won’t be the missing piece you’re looking for, but it’ll definitely add some magic to your application!

This very easy to use library can add some pizazz and hopefully fill in some of that void you felt was in your app.

Installation

To add it to your project, simply install via:

npm –

$ npm install animate.css --save

bower –

$ bower install animate.css --save

Next, include the stylesheet in the header of your document.

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Then pick and choose the elements you want animated, add the class “animated” along with the type of animation from the list below:

Class Name
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
jackInTheBox
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

The final output for the element would look something like this:

<h1 class="animated infinite bounce">Example</h1>

Check out some of the cool live demos in the reference links below. Happy animating! Yay!

References:

https://daneden.github.io/animate.css/

https://github.com/daneden/animate.css

First Developer Job Values and Tips to Excel In Our New Field

Coming so close to the finish line!

With the end of my Flatiron School chapter in sight, most of my peers and I are in the mindset of job hunting and putting our newly acquired skills to use. After speaking with a couple of my classmates, it’s a very common theme for bootcamp grads to accept the very first offer they are given as a software developer. I mean that is why we wanted to go through a bootcamp in the first place right? But with our minimal, almost non existent experience in the developer field,

What are some values to keep in mind when working at our first job as a developer?

1) Are you are happy?

You will be spending 40+ hours a week at your job, more time than anything else you will do each day. If you’re miserable there, you will likely not last, end up dreading to wake up every morning to work, and will likely lack the motivation to improve on your skill set.

2) Are you with the right team members?

Psychological safety is one of the most important traits to a successful team. What is it exactly?

• “being able to show and employ one’s self without fear of negative consequences of self-image, status or career”

This allows for an improvement on the likelihood of a team innovation to be successful, increase effectiveness on learning from mistakes, and for a boosted employee engagement

3) Do you have the right manager?

A manager has a major influence on the team and even your career. Having a good working relationship with your manager will allow you to prosper in your work environment and get you to the level you need to be to reach your goals. The right manager would make sure you’re not working too hard to prevent from burning out, and for you to stay happy and productive

Excelling In Our Career

Coming hot out of the bootcamp gates and into the job search abyss, I’m ambitious with quickly advancing with my career. How can we do so? According to Nick Caldwell, a VP of Engineering at Reddit, he mentions three major tips:

• FIRST: Don’t wait for people to tell you what to do!
• SECOND: Don’t box yourself in. Ignore fear. Ignore labels. Ignore boundaries.
• THIRD: Career Speed = Skill x Effort x Luck

 

Sources:

https://redfin.engineering/junior-engineer-career-guide-is-this-the-right-team-for-you-54d5522d727a

https://startupsventurecapital.com/speedrunning-your-career-game-55b29946701f

https://en.wikipedia.org/wiki/Psychological_safety

Socket to me!

WebSockets.

In the two science fairs I have experienced here at Flatiron School, there were two projects that stood out. One was a geography game and the other was a replica of one of my childhood games, Bomberman. I was drawn to these projects because of the manner in which the user interacted with the application. With the FAQ of how is this possible? The answer was… WebSockets.

With this as a subject of interest in implementing into my final project, I decided to touch up on this subject.

Now what exactly is a WebSocket?

In layman terms, a WebSocket is a special connection made between a client and a server. Once this connection is made, it will be able to support real-time interactions with the web application.

A little more technically speaking, it operates through a single TCP connection over the Web. A WebSocket first starts out as a normal HTTP request that is then upgraded to this super connection that persists until the connection is closed by the client or server. This upgrade from a normal HTTP request to is referred to as a WebSocket handshake.

 

Once this handshake is made, it will have access to the following features:

• The browser having the ability to receive data from the server without having to explicitly ask for it
  • Server can shoot out information as soon as it receives new data (no longer needs to wait for a response)
• Real-time exchange of information
  • multi-player games and chat
• Reduction in unnecessary network traffic and great improvements on latency
• Ability to bypass firewalls and proxies

Before WebSockets, other current attempts in achieving real-time web applications included connection strategies such as polling, long-polling, and streaming.

• Polling
  • Browser sends HTTP requests in regular intervals
• Long-polling
  • Browser sends HTTP request and the server holds the request open for a period of time
• Streaming
  • Browser sends and completes an HTTP request, server sends back an open response that remains open to continually send updates

Since all of these connections require a lot of back and forth passing of information, repeated requests, and held requests, it introduces a lot of unnecessary network traffic and will cause latency (“lag”). Though some of these strategies may make a website look like a real-time application, it has a high price tag and will not be able remain in this state in the long run nor in scalability.

 

References:

Websocket.org – http://websocket.org/

Ratchet – http://socketo.me/

Wikipedia – https://en.wikipedia.org

Stepping Stones and Building Blocks

Onto the next module.

This process of moving forward with the foundation of the knowledge acquired beforehand has been a very humbling experience. In this world of programming, it’s almost necessary to have a solid understanding of a concept or topic before proceeding into the next lesson.

One of the challenges I struggled with before graduating into the next series of subjects at Flatiron School was deciding whether I should play catch up the whole way through or just leap onto the current lesson and hope that I can comprehend what’s going on. I underestimated the workload and admittedly slacked on some days when I know I shouldn’t have. Yea, it bit me in the butt.

At this specific moment, my choices were to spend hours catching up on labs dealing with dynamic object relational mapping and SQL or jump straight into ActiveRecord. I chose the latter.

I had been advised before that during lectures, it would be more beneficial to just pay attention without taking any notes. I did just that and managed to grasp the bare concept of how these dynamic ORMs and SQL syntax transformed into what we now know as ActiveRecord.

Though I know for a fact that I will not be able to recreate the level of abstraction Avi demonstrated during lecture, just knowing how something came to be helped more than I would have expected. It bridged the gap between me being completely lost and the light at the end of the tunnel.

Yes, crossing this bridge was scary. I still felt like there were a lot of material that we covered that I needed to know. But once we fully crossed over the bridge into ActiveRecord, it was like a breath of fresh air. New, but something within the realm of understanding.

As we began to dive into the depths of ActiveRecord, it was crazy to think that something was so familiar, yet so foreign. This concept of building what felt like a new language from the same building blocks as one I started my programming career in is like what I mentioned at the beginning of this blog, humbling.

To think that someone, or some people, created the option to have a set of intricately prebuilt methods with the touch of one line of code, makes the world of programming so fascinating.

From something as granular as this:

To something as simple as this:

I also noticed this same evolution as we began our journey into Module 2, Web Frameworks. From Rack, a lower level language, breaks off into two higher level languages, Sinatra and Ruby on Rails.

This concept of ever growing higher level languages has endless possibilities. Programming languages seem to always be changing, advancing, and still even being created. But before people are able to do so, a solid foundation must be built from the stepping stone preceding the one they are at now.

Keep Calm and Hash On

Nested hashes. Where do I even begin with this.

First time I encountered this monstrosity was in my Flatiron School bootcamp prep material. I was slowly building up my confidence in programming as it was all very new to me.  One after the other, I was plowing through the labs at a healthy speed, until one day…

A wild lab named HASHKETBALL appeared!

Hashketball featured a nested hash that housed four levels of data.

And this wasn’t even the half of it.

As you can tell, especially to a newbie programmer, the sight of this made it feel as though all hope was lost. It was pretty intimidating. I felt as though all my abilities I was building in programming up until this point was stolen from me and absorbed by those Monstars.

I was always told that when you’re stuck on a problem, either take a break or sleep on it, and you’ll have a better chance of coming up with the solution. I’ve been thinking about it for so long that surely enough, it came up in my dreams.

As this gif accurately depicts my feelings I had that night, it helped in pushing me towards the right direction to finally understanding this problem.

Nested hashes have levels, just as the dreams in Inception do. The two also share a similar behavior: the further down you go in levels, the slower the outer levels become when iterating through. Meaning that the outer levels will have to wait until the inner levels are done iterating.

Conceptually, as the level in each dream poses a different scenario, each level in a nested hash represent a different key and value pairs. Precision plays a big role in all the jobs required in each level, in both Inception level dreams and iterations. Each key value pair would need to know what its responsibility is, what they’re representing, in order to complete the job. If you’re not sure what a key and value are equal to, you might just fall deeper in your code and call something other than what you think you really are.

As we begin going through the hash, I highly recommend placing a “binding.pry” to know exactly what we’re looking at.

Knowing what each key and value represent inside is already more than half the battle.

Don’t get lost. If you do, you might lose track of which level you’re really in.

Once I was able to keep my precision through each level, I was able to gain a solid foundation and understanding of each variable’s representation inside of my code.

From here, I knew I was back in reality. The scary beast I once knew as Hashketball, faded away into memory.