Front-End development

Developing a front-end application or the front-end for an application has its many benefits:

• instant gratification
• beautification
• interactivity
• user-(un)friendly

Creating a front-end can be a joy to some and a nightmare to others. Depending on your understanding off CSS or some other styling framework, this process can befall many troubles.

I for one am the type to struggle when developing a working front-end as styling is not in my strong suite, but always getting better. I have learned to make notes or sketches or even just making bookmarks on websites that have a neat little sidebar.

Functionality

A crucial element of creating a beautiful front-end is to make a clone of a web site that has a few elements that move and some that are static within the same view. This helps to reinforce the fact you are working with two different elements on the same page while making them more interactive.

An example of this is on an blog post here on Dev.to and scrolling through a blog topic while having the author information always visible.

Form

After first creating this functionality of having independent scrollable entities on the page next comes the styling of making it look good or at the very least pleasing to use. This technique has helped in the past to create a faster workflow to separate concerns of how changes should be made and when to start working on the "look" after the "feel" has been developed.

Presentation

Creating content is great when paired with a format that is easy to use and easy on the eyes, but front-end development has already been well underway before this point with the inclusion of all the necessary information that has been sourced through an API or hard coded (via HTML).

Different techniques exist to assist with bringing information in to be used on the page and having knowledge with back-end technologies is always a "good-to-know" in order to collect information from the server.

Back-end

Lately, with working with different back-end frameworks, I've been finding myself enjoying the data fetching side of web applications. The ability to bring information in via web-scraping or APIs has made the back-end journey far more pleasing. As it goes, "without information, there is no power".

Providing the front-end

Without this information, the front-end has no content. I find myself more enclosed around having a solid back-end working for me to have information at the ready and that's where I typically start every app.

As a full-stack developer, I begin creating a back-end which is my gateway to what information my front-end will have to work with. Once all the data has been fetched, next is to make sure it is secure, or at least by including techniques to make it harder for anyone to "hack" their way through into say someone else's profile. Bcrypt and JWT (json web tokens) are the usual go-tos for securing user logins. Another way is making sure your packages are all up to date.

Vulnerabilities are being discovered all the time and with sites like GitHub to hold your source code, the security tabs can come up with automated tasks for the source owner to act one through pull-requests to update the packages to patch vulnerable versions further removing risk to the back-end files.

Which is first?

Whichever side of the app the gets developed first depends on the individual and the needs of the application. Portfolio sites usually don't need the benefit of back-ends while an e-commerce site will need to have a robust back-end full of encryption built in and authentication that is not easier cracked.

Whichever is made first the goal to keep in mind is how the information will be presented to the end-user, and creating ways for them to stick around the site and make it useful for further development down the road.