#neosolutions

Now that we’ve finished up the basics of front-end web development, it’s time to finally pull that curtain back and see how all this front-end stuff runs. That’s where back-end development comes in. Front-end loads and runs on the user’s browser; back-end runs on the server that the browser is accessing. There are two major parts to back-end development I want to discuss here, the framework and the database.

The framework sets a standard way to build and deploy websites. The framework determines what programming language to be used when developing a website. For example, here at Neo Solutions I am fairly proficient at the language Python, so running my sites off of the Django framework was the obvious choice. Once you initialize a project using Django, it builds the starting blocks to a working site that can be ran and viewed locally (as in not on the internet yet).

Django has the benefit of compartmentalizing different portions of any site into separate ‘apps.’ Not to be confused with what you would traditionally call an app, this is basically a separate set of instructions for a specific set of pages within a site. For example if you have a site that hosts both a group of pages for photos and a group of pages for a blog that allows for comments, they would function differently on the back-end. Because of this, it makes sense to separate them into separate apps for easy building, deployment and management.

From a broad perspective, what Django does is access a settings.py file (Python file) within the projects folders. This file tells the server where to access all the other files to be pulled and sent to the web browser. It will reference a url.py file that holds all the URLs to be accessed on the site. When a browser requests a particular URL, the server searches the url.py file to see if it exists and what to respond with. Generally in the url.py file, it will have instructions to refer to a views.py file or a separate url.py file within one of the separate apps in the project.

Every page would have its own view in views.py. The view is there to link the instructions from the HTML file to the server or simply refer the server to the HTML file. What I mean by ‘link the instructions’ is, suppose you have a page for allowing your visitors to send you an email. The HTML would hold the code to display name, contact, message, etc. boxes. The view takes the information put into those boxes and processes them accordingly. Whether that is storing their information in a database for future use or sending the information to an email automation service to get their message to your inbox.

There are a handful of files and folders in a Django project that are required by default or optional depending on what the app is used for. One such file is models.py. This file holds the format for a particular item that would be stored in the database. Let’s say there is a music database. It could have a model called song. Inside this song model would be fields for artist, song title, length, album, etc. So when you access the database to find a particular song to display on a webpage, it will come packaged with all the information stored with it. Models can also be interlinked or nested within other models as well. The album field could reference another separate model called album. This album model would hold all the songs within a particular album as well as the artist as fields. Same for an artist model holding all that artist’s albums or songs.

As always, it gets much bigger than this but this is just an overview of what the back-end does and how it works. This concludes the Full-Stack series! All of these topics will be referenced and built upon in later posts. From here, the posts will cover tips and tricks that I’m currently learning with coding sites as well as running the business.

Thank You for Reading,

Speak to you next week,

John Norman

JavaScript, or JS, is the language used to handle the interactions built into a website. Note that JavaScript is not the same thing as Java. JS is used to change HTML or CSS values. Just as with CSS, JS can be placed in an external .js file, internally in the <head> tag, or in the <body>.

To include an external JS file you use the <script> tag. Here is an example: <script src="myScript.js"></script>. This can be done in the <head> or <body> and looks exactly the same. Note: HTML is read by a browser from top to bottom. Some larger or more complicated JS instructions can bog down a page from loading and thus a lot of developers place their JS just before the closing </body> tag. This also means that none of the JS code can run until it is fully loaded by the browser. The src (source) attribute is the only required piece for the <script> tag. It should be set equal to the directory or address of the JS file. Internal JS is exactly the same but it doesn’t require a source. After the <script> tag, just jump into the functions and statements.

I won’t go into programming 101 here, for that, check out W3 Schools. I’m going to explain the basics of what makes JavaScript different from other coding languages. All variables must be declared before or at first use. Declare a variable using ‘var’. These variable values can be integers, decimals (called floats), text (called strings), objects (we won’t cover these), or other variables. Strings must be in single or double quotes. Here is an example of setting a variable, x, to hold different values:

var x = “5 hungry hippos”;

x=7;

x = “7”;

Notice declaring the variable, x, was only required once. Each time you set the variable equal to a new value, it replaces it. Each statement must be ended with a semicolon. The first 7 is an integer and the 7 within quotes is a string. JavaScript does not care for whitespace. X=7 is the same as X = 7.

To change an element of an HTML document by accessing the document use “document.” From there, append how you wish to find the element (called a method). Then include what you wish to change about that element (called a property). Lastly, include what you want to change it to. Here is an example: document.getElementById(‘someID’).innerHTML = “This is HTML text”;. Please note that the lower case “L” in element looks the same as the uppercase “i” in id.

Always begin with document. The main options for finding the element to be changed are getElementById, getElementsByClassName, getElementsByName, and getElementsByTagName.

None of this is really that interesting if it changes a page upon load. If that were the point, you would just write it that way in the HTML and CSS. That’s where events come in. Events are actions used to trigger particular JS functions. Include these events directly into the HTML element as if it were an attribute:

<p onclick=”myFunction()”> some HTML text… </p>

This myFunction() value should match a function within the JS code. Once the <p> element is clicked, the JS code would be able to run.

There are many events, methods, properties, etc. useable within JavaScript. As the case with the Full-Stack series, this has been just a snippet of how JavaScript works and how to set it up. Next week we will pull the hood up to get a look at the back-end side of web development.

Thank You for Reading,

Speak to you next week,

John Norman

CSS or Cascading Style Sheets describes and determines how HTML elements are displayed. It is a fantastic tool, because it can control the layout for multiple HTML files. Just like with the write-up on HTML, I will only be discussing the bare basics of how CSS works.

Remember the <head> tag that was discussed in the HTML post? What CSS file(s) you use will be placed there. The format for importing an external CSS file onto a HTML file is <link rel=”stylesheet” type=”text/css” href=”[link to stylesheet file].css”>. <link> references the type of tag. Rel is a required attribute that specifies the relationship between the HTML file and the linked file. Type is simply the type of file being linked and is only required if the link is a href. The href is the location of the file to be linked.

What the <link> tag does is pull all the text from the file and puts it in place of the <link> tag. This means that you can also use internal CSS as well by using the <style> tag within the <head> and directly inputting the CSS text. Example: <head><style> CSS text… </style></head>. Lastly, you can also add CSS styles directly to unique single elements. Example: <p style=”color:purple;padding-right:30px;”> paragraph… </p>. Using inline and internal style are possible but should be used sparingly. It is much cleaner to move all CSS to its own external file. It is also worth noting that web browsers apply the last known style change applied to any particular element. This means that if there is an external CSS file that changes a <h1> element and there is also an inline style on that element, the browser will take the inline over the external.

CSS selectors are used to determine what part of a HTML file is to be styled. This can be element tags, or almost any attribute. After the selector, all the styling needs to be within curly braces. There are hundreds of different allowed changes within CSS. While knowing the most common ones is beneficial, it’s a good idea to know where to find a concise list of them. W3 Schools is a great place to start! The syntax for these changes is to put the type of change, a colon, then what it’s changed to. Example:

p {

              color: purple;

              padding-right: 30px;

}

This would change every <p> tag to have the color purple and a right padding of thirty pixels.

There is so much more to learn and do with CSS that what’s been covered here, but this gives a baseline of how it works and how to set it up. The next post will be on JavaScript.

Thank You for Reading,

Speak to you next week,

John Norman

So I’ve mentioned before that Neo Solutions does full-stack web development. So, what exactly does full-stack mean and how does it compare to front-end and back-end? Well, in essence, full-stack means accomplishing both front-end and back-end web development.

Since front-end is what most internet users and website visitors are most familiar with, we will start there. Front-end is the look and feel of a website. There are generally three areas that front-end development covers: the structure of the site, the design and layout, and any interactive elements the site may have. This is generally broken into three languages: HTML, CSS, and JavaScript.

HTML or Hypertext Markup Language functions as the structure of the site. Each page you visit will have its own HTML file associated with it. It is broken into two parts called the <head> and the <body>. The <head> is one of the only pieces that visitors don’t directly interact with or see, and holds important information such as character encoding for the file, search engine optimization, and additional files, directories, and links associated with it. The <body> contains what the visitor actually sees and interacts with. Its general layout will look very much like a research paper outline with headings, articles, footers, etc.

Notice how the <body> and <head> are placed in angle brackets? These are called tags! Generally speaking everything on an HTML page is contained in these brackets as such: <tag name> containing element or content…. </tag name>. The containing element or content could be simply text to be displayed on the page or another tag. Here is a tag within a tag: <article><p> paragraph…. </p></article>. Just like with a newspaper, an article will generally contain multiple paragraphs.

It’s important to note that tags should be as semantic as possible (ie they should be as descriptive as possible). Making up tags is generally bad form and oftentimes won’t be understood by the web browser, but there are plenty of semantic tags to keep confusion down on what each tag is for. For example: the <article> tag is self-explanatory, but the <p> tag may not be at first glance. It is simply a tag to denote the content as a paragraph.

Sematic tags also allow for the web browser to attempt to apply a default style to whatever is visible within the tag. An <h1> tag, which is a header tag, will display font much bigger than a <h3> tag would by default. This is because headers are generally larger in font than the paragraphs below it.

For now, that gets our feet wet with what front-end development means, what HTML does and how it works. Since this article got a bit long, I will end it here and cover CSS next week.

Thank You for Reading,

Speak to you next week,

John Norman

Before considering starting a blog, I had no idea what Tumblr was. Until a few days ago I had no idea how starting a blog could help me and my business. Doing a bit of Googling to see the benefits, if any, of having a blog, I stumbled across an article by Flavio Copes called ‘Every developer should have a blog. Here’s why, and how to stick with it.’ I’ll link it here.

For those who don’t know, I am John Norman, CEO and Sole-employee of Neo Solutions, an up and coming full stack web development business-to-business company. This is not the first time I’ve ventured into entrepreneurship, but it is the longest I’ve stuck it out. Most of what I’ve learned has been through free resources across the internet.

After reading the Copes’ article, I decided the best way to stay in the eyes and ears of my customers and get me in the habit of staying connected with my work would be to blog about it. It would keep me accountable as well as keep a log of what I’ve done, what’s on my mind, and what my plans are.

What I’ll be blogging about will be on what I’m currently learning, implementing, or doing with my business. The majority will be revolving around either some level of full stack web development or hurdles I’m dealing with on the business side of things. The intent is to post weekly to reach out to others wanting to or already doing the same as me; new potential clients; and let friends, family, and current clients see what’s going on behind the curtain of Neo Solutions.

Thank You for Reading,

Speak to you next week,

John Norman