Posts tagged "front end development"

front end

Guides and Cheat Sheets for Front End Developers

April 16, 2019 Posted by Programming 0 thoughts on “Guides and Cheat Sheets for Front End Developers”

Any front end developer would love to have the brain capacity to know everything about their field. Unfortunately, we can only know so much, especially when we’re new to front end development. Google can be an excellent resource, but sometimes you want a bookmarked document that you can pull up right away to find that specific function or style attribute that will solve your problem. Or, you might be waiting for code to compile and you’re just looking for great reads that will boost your skills. If you’re anyone of these people, check out this list of front end resources that we’ve curated for you.

 

Superhero.js

If you have time to spare, you can read informative JavaScript articles written by industry heavyweights like Ady Osmani. Superhero.js serves as a repository for the top articles about “creating, maintaining, and testing a large JavaScript code base.”

Open Web CSS Reference

CSS often gets a bad rap for its unwieldiness.

However, the Open Web CSS Reference provides a categorized list of attributes that link to the W3C specification docs that teach you exactly how the attribute works.

OverAPI

OverAPI has resources for all types of developers and a few obvious useful resources for front end developers like CSS, Git, and JavaScript.

Dev Hints

The website’s founder, Rico wrote a dizzying list of front end framework and library cheat sheet that he’s shared to the public. It’s one of the most useful resources for modern front end development.

front end

The Ultimate Flexbox Cheat Sheet

Now that flex box has become more of a website design standard, it wouldn’t hurt to pour over the interactive documentation that you can find on this website.

Sass Guidelines

If you ever want to become Sass master, learning from Hugo Giraudel is not a bad way to go.

front end

Dev Docs

Dev Docs is the complete guide to everything there is to know about  languages and frameworks

 

 

Please follow and like us:
0

Best 7 Blogs For Front End Developers

January 11, 2019 Posted by Programming 0 thoughts on “Best 7 Blogs For Front End Developers”

If you’re a front end developer, it can feel like you’re in a rat race at times as you try to chase after the latest and greatest JavaScript framework. Meanwhile, design trends are always shifting, meaning you can’t stay put for too long before you have to learn a new paradigm.

Whether you’re a beginner or a pro, bloggers that have their fingers on the pulse of new front end trends can make life much easier for you.

Here are 7 of the best blogs that will teach you a few neat tricks while keeping you updated on the latest trends.

Scotch

The motto of this blog is Code. Eat. Sleep. Loop. The site covers front end frameworks like Vue and React, as well as a back end languages like PHP and Python. What makes this blog stand out from the pack are the coding challenges that pop up every now and then.

One Extra Pixel

Staying on top of web design trends can be hard to do. While many sites offer tips and tricks, One Extra Pixel presents its posts in a format that makes it easy to navigate from one post to another.

David Walsh

What you want in a programming blog is tough concepts that are boiled down into simple language. David Walsh accomplishes this by creating posts that engages the reader every step of the way.

2ality

Dr. Axel Raushmayer’s blog is the opposite of David Walsh’s blog. Where beginners might waltz towards David Walsh’s blog to get a handle on Promises, experienced developers might go to to 2ality to learn about the new features coming to the JavaScript language, or to learn about polymorphic variant types. If you want that extra edge as a JavaScript programmer, this site is for you.

CSS Wizardry

Simply, Harry is a CSS wizard who gets paid to consult companies on the best design practices, some of which he’s founded. His blog features some of his thoughts on design as well as personal anecdotes. It’s a brilliant blog for any front end developer.

Cats Who Code

This quirky blog offers tutorials for aspiring IT professionals, web designers, and WordPress hackers. If you need a quick design inspiration or want to know how you can be a more productive coder, you can learn that here.

Paul Irish

One of the best sources of advice is from a front end engineer who works at Google. Paul Irish, who’s part of the dev team for Google Chrome’s Dev Tools, just so happens to have that role. You probably guessed that a majority of his blog focuses on leveraging Google’s Dev Tools, but there’s more to this blog than browser tech. His more popular posts focus on CSS best practices.


Please follow and like us:
0

Programming Languages You Need To Know To Build A Website

January 7, 2019 Posted by Programming, Uncategorized 0 thoughts on “Programming Languages You Need To Know To Build A Website”

When you want to get somewhere but you don’t have any idea how to get there, you’re probably going to use a GPS or some other pathfinder. The same should apply to building a website for the first time. However, instead of telling you how to get there, many blog posts tell you what you need to get there. They’d list the technologies you need to know to build a website but they won’t show you the path. 

The purpose of this post is to show you the tools you need to build a website and how these tools will contribute to building your first website.

Let’s start off with the basics, shall we?

Text editor

Get a text editor and love it, because you’re going to be staring at it while gnashing your teeth at every new problem that arises. You can save a lot of trouble by becoming familiar with your editor’s quirks.

Sublime and Atom are the best GUI options, in my opinion. Having used Sublime, I can tell you that the customization options are seemingly endless. Give it a go.

Command line

No, hackers are not the only people who use command lines. Don’t run away from it. This black screen will become your closest virtual friend in due time.

Go through this painless tutorial here

If you don’t need any hand holding, check out this cheat sheet

Front End and Back End

Once you grasp the tools, it’s important to know that the field of programming is vast. If you only want to create your own blog, then you should focus on front end development. You can think of front end development as the store front of a website. Almost everything that a user of your website can see and interact with is the front end of development. The primary languages used here are HTML, CSS, and JavaScript. We’ll break down how you’ll go about learning these languages later, but, in a nutshell, HTML is like the scaffolding of a building, CSS is like a building’s exterior and interior design, and JavaScript is the wiring of the building. What you get by implementing these languages is a website that is structured, stylized, and functional.

On the other hand, if you want users to log in to your website and if you want to track their activities, you will need a back end. Building a back end requires knowledge of scripting languages like PHP, Python, and Ruby. You also need a database like MYSQL and  Postgresql to store a user’s data. Adding these features to a website makes it dynamic.

Now, Let’s Learn Languages

Before we get into languages, let’s talk a little bit about files. Every web project requires an organization of files. The more complex your website is, the more organized you have to be.

It’s a good idea to learn how to organize files before you start coding. It’ll make your life easier. This website breaks down how to organize a basic website.

Essentially, the file structure of a very basic front end project  looks like this:

In the main folder, you have your project name–in this case, awesomewebsite. Within that folder, you have your style sheet folder(CSS), your scripts(JS), and anything else you may need.

HTML

HTML helps form the skeleton of the website. Most website consist of a navigation bar, main content area, and a footer.

<!Doctype html>
<html>
<head>
 <title>MY Website</title>
</head>
<body>
 <!-- Navigation section-->
 <header>
   <p>Home Page</p>
 </header>
 <!--Main Content -->
 <section>
 </section>
 <!-- Sidebar --> 
 <aside>     
 </aside>
  <!--Bottom -->
  <footer>
  </footer>
</body>
</html>

CSS

Now you have to make these elements look presentable. This isn’t as hard as it seems. Remember that every HTML element is a potential box. Look at your favorite websites. The most common shape is a quadrilateral, or a four sided figure. All of these quads are positioned nicely using a grid system. Colors and shadows and thingamabobs are then added to create a unique user experience. This is CSS in a nutshell.

If you want to do cool things, like applying shadows, just ask Google.

Tip: to see your styling effects, you have to link your style sheet in the <head></head> tag of your HTML file. The link would look like this:

<link rel="stylesheet" type="text/css" href="css/filename.css">

“Filename” is whatever name you decide to give your CSS file. If your stylesheet isn’t in a folder, then you don’t have to include the relative folder path.

JavaScript

You only need to learn the essentials of JavaScript. Javascriptissexy.com is one of the best sites to learn about every nook and cranny of this language. 

If you’re still nervous about grasping this language, you can go really slow by learning JavaScript from the ground level at Codecademy.

When you click a button, an event occurs. The specific library we use to create events is called jQuery.

  • Learn jQuery from scratch here

Tip: to see your JavaScript events, you can link your script in the <head></head> tag of your HTML file. The link would look like this:

<script src="myscripts.js"></script>

Wrapping Up The Front End

This is all you need to learn if you want to create a static website like a portfolio or a personal site. You can skip all of the server stuff. To host your site, you can use free hosting. One I’ve found to be user-friendly is Github Pages.

But, if you want to make the next Facebook, you need to learn the back end.

Server-side Languages

Nodejs(server-side environment for JavaScript), Ruby, Python, PHP are the four primary server-side languages used to create dynamic websites. Anything that needs to be updated on a website requires the server. A log in attempt immediately triggers an exchange of information between the client and server.

I’m not going to dive into every single language. You have to pick one. Nodejs is hot right now, so if you feel comfortable with JavaScript, go for it. Ruby is easy to use and has superb documentation. Python has similar syntax, but less support than Ruby. PHP is widely used and relatively easy to learn.

After you pick your language, you need a database. Server frameworks use databases to save, fetch, update, and delete data. Keep that in mind as you read this guide.

MongoDB, PostgreSQL, and MySQL are some of the database management systems that get thrown around every so often.

Once you’ve picked your server-side language and database, try learning:

 

1) A Server Framework

Frameworks make it easier to build web applications from scratch. Every language has its own particular framework. Mozilla breaks them down here

2) The MVC File Structure

If you pick a framework, this is the way you should think about web programming from now on. Of course there are other structures, but this a good one to start out with for your first project.

  • Model: Object Oriented Programming (OOP) in insert language

I know, I know. Wax on, wax off, right? How does OOP help? Well, in the back end, every form of data is an object. For example, every user on Medium is a user object.

In Ruby, using the Rails framework(this is a crude example), a user will look like this:



class User < ApplicationRecord

 #Lot of relationships goin’ on in here. More on that later.

End

 

The controller is used to render HTML pages depending on the route. Within the route method, you can manipulate data from the database which would then be showed in the view.

I’ll pseudo code an example. Note that frameworks will abstract HTTP routing in their own way:

GET /users

let users = User.findAll

render the index.html.faketemplate

Everything you learned about HTML applies, but now you can inject your server language in your HTML files to create dynamic content. If you have 10 users in your database, you can loop through all of the users we stored to the users variable in the controller and render them.


#this is just pseudo code
index.html.faketemplate
{loop through users.each do}
 <div class= ‘user-card’>
   <p>{user.name}</p>
   <p>{user.summary}</p>
 </div>
{end}

There are many templates to choose from. Mustache is a popular one. Check it out.

3) How to integrate the database

If you look up at the template pseudo example, you’ll see that each user object has accessible attributes. These attributes are defined using what’s called a schema. Essentially, a schema is a fancy word for a table of organized data.

If you’ve been using a framework, then you’ll see now that the hard work of learning a framework’s nuances payoff here. When I pseudo coded User.findAll, “findAll” was an abstracted method. The SQL equivalent would be SELECT * FROM users. Yeah, I’d stick with the abstraction.

Schemas are blueprints for SQL tables. Note that frameworks will use syntax from your chosen server-side language for table creation. Under the hood, SQL is driving everything.

Once you create a table with the aid of a framework, this table is mapped to an object. The object corresponds to the Model you create. In my case, its the User model. This is what Object Relational Mapping is all about(ORM). The relational aspect describes the relationship between objects.

Let me clarify that non definition with an example: a user can author many posts, but a post can only be authored by one user — a one-to-many relationship. This is just one of many relations that objects can have with one another.

For more examples of relations visit this link

Note: Non relational databases like MongoDB do not follow the relational paradigm per se, but if you read MongoDB’s documentation, there are ways around this restriction.

Let’s Put All Of This Together

Before you begin, wireframe your project. You should know what your site will look like and how it will function.

Once you have a wireframe, organize your schema. Both wireframe and schema will serve as a blue print for the front and back ends of your app.

  1. Initialize your MVC framework.
  2. Start the development server that comes with your framework.
  3. Code models based on your tables.
  4. Write HTML in view files.
  5. Now its time to create database tables based on the schema.
  6. In the controller file, use REST to create routes. Query the database if you need data and render the view pages.
  7. Once your website is running and the routes are configured, start applying CSS.
  8. Finally, go wild with JQuery.

One, Two, Three Lift Off!

Deploy your website to Heroku so that the world can see your hard work. 

 

 

Please follow and like us:
0