Category: Uncategorized

this is a testy test

If you are diligently learning front-end web development as I am, it is easy to become so absorbed in mastering the skills needed that you lose focus of the goal of obtaining a job in tech. Navigating the job search can be frustrating and perplexing. There are a myriad of job titles, roles, requirements, and expectations. So you ask, “If I am learning front-end web development, what sorts of jobs are potentially available to me?” Well, let’s go through some common job titles that you could reasonable expect to be qualified for.

 

Project Manager

A project manager in tech requires advanced technological skills as well as managerial know-how. This person is responsible for making sure the project stays on track. The responsibilities include planning, activity planning and sequencing, resource planning, developing schedules, estimating time and cost, developing a budget, and documentation, among others.

 

User Experience

UX Designers are concerned with the user’s satisfaction with a product. As such they are specifically concerned with the look, the feel, and the usability of a website. They need to conduct research, such as creating user personas and stories, talking to and/or observing users, performing usability tests, etc. With this information, they aim to create a website that addresses the users’ needs.

Web Designer

Web designers are responsible for designing, coding and maintaining websites. They strive to create aesthetically pleasing, functional, and easy to use websites.

Front-end Web Developer

Front-end web developers are responsible for creating the visual elements that the user interacts with. They usually work with a back-end web developer who handles the server side logic.

Content Manager/editor

Content managers oversee the content that is presented on websites and blogs. They may write, edit, and publish content, and also update outdated content.

Quality Assurance

Quality Assurance is concerned with verifying that software performs according to quality criteria through test planning, test execution, quality assurance and issue tracking. The quality assurance engineer tries to find the places where the software may break in order to alert the developer.

 

My ultimate goal is that of software developer, and as such, of all these job titles, I gravitate toward quality assurance. This role will allow me to gain experience with code and work closely with developers in order to gain the experience that I need to move toward development. Codetalk, the coding boot camp I am attending, is not my first foray into coding; I took various courses in college and I have practice coding in C++ and knowledge of object-oriented programming and data structures. This background is definitely a boon for the role of quality assurance.

Here is an example of the requirements for a QA job:

• Bachelor’s degree in any field
• Familiarity with SaaS-based products; Previous Web QA experience is a plus
• Familiarity with scripting (Ruby preferred), HTTP protocols, test frameworks
• Communicate effectively (written and verbal) on an individual basis, as well as with larger groups
• Ability to utilize analytical thought processes

I have the Bachelor’s. I am analytical and I can communicate effectively. So now I am going to practice scripting and read about test frameworks and SaaS-based products!

There are so many great resources online for learning coding and design that it is difficult to sort through all of them. I am going to highlight just three websites that I have found useful.

Free Code Camp

Free Code Camp is a nonprofit offering a whole curriculum in HTML5, CSS3, Javascript, as well as Git/Github, databases, Node.js, React.js, D3.js, and more, all for free. You can create an account to keep track of your progress and you can also earn different certificates. I like how there are tutorials to lead you through the main concepts, and then you are challenged with various projects where you must integrate what you have learned in order to build real applications. You can also then obtain real-world experience by contributing to open source projects used by non-profits!

MIT OpenCourseWare

MIT is one of the best universities in the world, and now anyone can access the material that is taught there. Free and universal access to concepts and ideas presented by some of the most knowledgeable people in their field – how amazing is that! No sign-up is required and you can freely browse any course at any time.

Stack Overflow

Alright, so this isn’t a tutorial website, but when you have a question or a coding issue you are having trouble resolving, this is definitely the place to come seeking insight. Answers are up-voted (or down-voted) by other members of Stack Overflow, ensuring that quality responses make their way to the top. I have yet to come across an answer that misled me.

So those are just three great resources I have had the fortune to find.  What are your favorites?

This week in class we delved into UX. UX stands for user experience, and it is of the utmost importance when building a website. Put simply a well designed website keeps the user experience foremost in order to create a website that is effective and offers a satisfying experience. Considering most websites would like the visitors to do something, such as buy a product or make a donation, the website must be designed in such a way as to make this process extremely simple and obvious. UI stands for user interface and deals with all the elements on the page a user interacts with such as buttons, sliders, or menus. Again these should be as obvious and simple as possible. Part of making a website easy to use is a clear organization of the content. IA, or information architecture, deals with organizing the content in such a way as to enhance the usability of the site.

So we have some buzzwords, but how do these apply to creating a website, you may ask. Well, there are some basic human tendencies that are important to keep in mind. First, people don’t usually read websites they SCAN. This means writing should be limited to the essentials. You don’t want to scare people away from your site! Important information should be placed first so if a user stops reading s/he will get the most crucial message.

You also may have noticed that people like to do things the way they know even if there is a better way out there. So make your SITE EASY TO USE in order to keep people coming back. Nobody likes to waste time trying to figure out how to do something on a website; they get frustrated and opt for another site, one that will be a joy to use and make the user feel competent all at once. Be that site. If you want the user to buy products have easy links to find the items they are looking for and a shopping cart on every page to keep track of everything the user wants to buy. Links should look clickable, buttons should be prominent, icons self-explanatory. Have a search bar and a home button in case the user gets lost on your site.

This is all great information and I had though about some of these concepts previous to learning them in class. I am sure everyone has their pet peeves regarding websites. Has anyone experienced pages with pop-ups asking you if you really want to leave the page or ads with videos that start playing – usually at a most inappropriate places? And it is always frustrating as a user not to be able to find the information you are looking for. But how can the designer know what a user will want from the site? This brings me to another concept we discussed which I really hadn’t considered before, and this is user personas. These are just all the different types of user you can think of that may want to use your site and what they may want to get from it.

In addition, it is wise to create user flow chart, site map and a wireframe. The flow chart will detail how a user goes about performing the important actions. The site map shows the hierarchy of the pages on the internet, while the wireframe will display the layout of all the elements on each page. Each aids the designer in thinking about how best to make the site simple and effective.

 

There are some websites that are stunning; they are aesthetically beautiful and invite us to pause and gaze. As web designers, we strive to create such rich and pleasing sites in order to draw viewers in and beguile them into a prolonged and fruitful visit. However, new web developers will often feel daunted by this task and wonder how they can go about this. What precise elements, colors and configurations combine to produce a gorgeous website? A minimal exposure to design will offer some guidelines in terms of color, white space, balance, contrast, and typography. In this post, we will journey through three amazing websites that have won awards at awwward.com, and analyze them in terms of the above elements. I will limit myself to commenting on their home page in the interest of blog length!

The first is an Italian Greenpeace site at https://sostieni.greenpeace.it/campagna/nataleperilpianeta. This site is specifically to solicit donations for the various Greenpeace campaigns. Generally, sites directly asking for money seem to me somewhat vulgar and removed from more lofty aesthetic considerations. I deliberately chose this site as a wonderful example how design can be artfully practiced even on a page made for the sole purpose of solicitation, although I concede that asking for donations benefiting a worthy cause certainly is far less crude than other types of solicitations.

This site uses a light green color for its navigation header, and the same green for quantities of money to donate in the middle of the page, as well as two lessor text headers toward the bottom, middle portion of the page. The green color evokes the colors of the forest, healthy foliage, and the green, blue earth, as well as being the color of money (at least dollars). The green at the top, then at the middle, and toward the middle bottom creates balance in terms of color on the page. The background is white while the text on the page is a dark grey. The main headline of the page is a very dark green, almost black, which again complements the lighter green of the header. The text is nicely contrasted with its background, which makes it easy to read and differentiates it from the content of the page.

 

 

In terms of balance, it should be noted that the header and the text form the shape of an inverted pyramid nearly symmetrical on both sides. The header and image are the width of the entire page. The four boxes showing different donation amounts are centered beneath the image and take up approximately 50% of the page. The text underneath is also centered and is progressively thinner, ending with a grey monthly donation button, which forms the tip of the pyramid. All of this content is firmly planted in the light grey footer that takes up the entire width of the page. The diagonal lines are repeated in the boxes showing quantities, as there is a part of an image in each of these that is cropped diagonally.

There is one image in the header, right under the green navigation header, for each of the Greenpeace campaigns: agriculture, arctic, climate, forest, water, and ocean. Each image depicts devastation of that particular resource. The images evoke old black and white photos tinted in different tones, sepia, blue, red, which combined with the fact that they show nature images, form the association with photo journalists or nature photographers, those who celebrate nature or seek to expose abuses. The images inside the boxes asking for a certain amount of donation are also very apt. They each depict people pushing for solutions to the problems faced by the environment, through activism, research, and outreach.

While the main images offer similarity to pre-digital photography, the typography is a crisp, modern sans-serif font. This is an easy to read font, and perhaps is meant to get us to think of the future of our planet.

Finally, the buttons, or calls to action, are delightfully rendered, and maintain the website’s color balance. The top navigation links, which are in white text, maintain the color of the text upon hover, but the background darkens to the same dark green as the main headline. The boxes calling for donations create a nice movement effect, where the text scrolls horizontally and disappears to be replaced by a large dark green text stating, “Donate Now” (in Italian). In the monthly donation button, which is grey text and outline with a white background, the text goes white upon hover and the background becomes light green, matching the navigation bar at the top.

The second website is Sound Spa at https://naturesoundspa.com/ where the customer can buy relaxing nature sounds. This company sells the idea of relaxation so it is fitting that their main colors are green on a clean white background, with a gentle grey text color. We can see the balance in terms of colors in this website, as the top has a thin dark green rectangle across the entire width of the page with white text welcoming us the Nature Sound Spa and a Help menu on the right. Most of the page text is grey, but the dark green is repeated in their logo in the middle of the page, on the prices on their different soundtracks, and the blog links further down, thus punctuating the grey at more or less similar intervals down the page.

 

 

 

 

This page creates a balance of shapes in a very rectilinear way. The main images, which the user can scroll through, take up the width of the page. The text above the main image lines up with the edges of the first row of images, which in turn line up with the Featured Products text, the Featured Blogs text, and the About Us and Catalogue text at the bottom. The edges of all the different rows of images also line up with each other, thus creating clean lines down the page and allowing the designer to place a large amount of information in an organized way. The fact that there are mostly rectangles lined up with each other might have created for a monotonous page. There are different numbers of images in the different rows, helping to produce variety. In addition, and perhaps more importantly, under the first row of images, they have placed their logo, which is a wonderfully curving and organic green tree (same green as the very top rectangle).

The images complement the page both in color and in content. Most images have predominantly green, blue and white colors. They depict soothing water, women with contented looks listening to headphones, a woman meditating on the beach, a peacefully sleeping woman, and one relaxing in water. All these images sell us on the idea that the nature sounds will relax us and enable us to sleep tranquilly.

On different rows, the image links either light up or dim down upon hover, which is a pleasing effect. On the navigation menu across the top of the page above the main image, the text is in grey, and upon hover the background goes dark green and the text turns white, matching the top rectangle and allowing a good contrast of text upon background. Each link also opens a box below it upon hover showing yet more image links within, giving us a tremendous amount of information and options without having to click through.

I chose the last website because it is the personal site for a web designer and is of interest to all web developers looking to create or enliven their site. This site is at http://www.purplesquaredesign.co.uk/ and is the personal page of Nicola Francis.

 

 

 

The main image takes up almost the entire page and is of a desk taken from above featuring a desktop computer toward the top with various objects along the sides of the image: speakers on the sides of the computer, a tablet, a cellphone, glasses, a glass of smoothie, pencils, a mouse, a keyboard and track pad. While most of the elements are rectangular, the arrangement of the objects on the desk creates pleasing curved lines, almost like parenthesis enclosing the text that is nestled on the white space in the center of the image. The desk is a very clean and spacious white color, and the image gives us the impression of a person who is definitely at work with all the necessary implements, but who also is very organized and tidy.

The main colors on this page are white, a slightly purplish dark blue, and grey. There is a blue/purple box with nicely contrasting white letters that say “Purple Square”. The word “purple” is in a bold text, while the word “square” is in a lightweight font. This creates a pleasing variety in text types. Underneath the rectangle are the words “Hello There”. Again we get variety both in text weight and color. The word, “hello” is in dark grey and a thinner font that the word “there” which is bolder and the same blue/purple as the rectangle above. Next there is a small paragraph introducing Nicola Francis. This is all in grey except for the phrases “web design” and “mobile app design” which are the blue/purple color, giving variety and serving to emphasize those phrases.

The footer is in dark grey, matching the grey text in the work “hello” and complementing the slightly lighter grey paragraph text. Here I will say the elements on the footer do not contrast very well with the background and the last word of the paragraph that goes onto the footer is very difficult to read. Likewise the button, “discover more” and the social media icons do not stand out very well on the page.

Once I had read the paragraph text and glanced over the footer, my eyes moved back up the page and noticed the white text on the black computer screen (nicely contrasted) which read, “You, but so much better,” a subtle commentary toward the fact that a good web design will emphasize a company’s or person’s real essence but in an extremely flattering manner.

It was only at this point that I noticed the hamburger menu on the top left side, which when we first land on the page sits on top of one of the speakers and rather blends in with it. But this is just a small observation on an otherwise beautiful page.

So, now that we have analyzed several great examples, what lessons can we apply to our own projects? Well there are several ideas we can work with. We talked about balance in terms of color. Choosing colors that complement each other is important, as is balancing these on the elements present by alternating and using color to highlight important information. The images are also vital, in terms of the content they portray, the main color present in them, and the associations and feelings they evoke in the viewer. It goes without saying that all these factors must complement and add to the ideas presented on the site. Balance is important in terms of color but also in terms of shapes and lines. Embedded in the concept of balance is also ensuring that there is sufficient white space to create a harmonious, uncluttered feel. Contrast is essential too. What good is all our information if the user can’t view it easily? And good contrast adds to the aesthetics of the page. Finally, but no less importantly, care should be taken regarding the typography on the page; the font type, style, color and size are all important design elements that can either enhance the site or detract from the design.

Github is used in most jobs as a way to keep track of different versions, or iterations of a project, as well as to simplify the process of collaboration. So it is very fortunate that we are starting to delve into this tool in class.

 

In a nutshell, Github is a web hosting service where you can store your code in repositories. Many are public, so anyone can see and download the source code; they can make changes to it and suggest improvements via a pull request. This is great for open source projects, where everyone has access to the source code and can contribute. Github uses the version control system named Git. Linus Trovalds, the creator of Linux, developed it in 2005. Git maintains a history of changes made to the project, and allows for the existence of different branches of a project.

 

Now, I’ve had my Github account for a while and have been slowly saving changes to a project I’ve worked on off and on. I knew the basic add, commit, push commands, but, as I always worked alone and on one computer, I never had the need to learn commands beyond that. We haven’t yet done a team project in class, but we do have an assigned computer that lives in the classroom, but I also like to play a little on my projects at home. So now I have the situation where I pushed my changes up to Github in class, and I wanted to copy my project to my home computer, make changes and save them on Github, and then update my files on the class computer to continue working. So the first part went well; at home I cloned, or downloaded, my project, improved it a bit, and then pushed the changes back up to Git. Back in class the next day, however, I cloned the project rather than using a pull to just update the changes, ending up with a project folder within my project folder, which I moved to another location. I worked until I was quite satisfied with my project; I had nearly finished it in class. But then, lo and behold, when I tried to push the changes up to Github, I got an error. After a bit of muddling around at the command line, suffice it to say that when I looked at the repository at home, it showed none of the changes that I had made in class! Now I was despondent; had I lost all that work?

 

Well, no. Git has version control, so it would have been possible to track the latest version in its history. This wasn’t necessary, however, as the latest version of the project was still on my classroom computer. Crises averted…. for now. But I knew I had to have a better understanding of how the Git commands function.

 

The inner workings of Git are quite complex and understanding all the commands in depth is a subject much longer than one blog post, and hence I will limit myself here to explaining briefly how to use “git clone”, “git add”, “git commit”, and “git pull” to work on two or more computers.

 

I will assume that you have already created a Github account at github.com, and also created a new repository for your project. I will also assume that you have downloaded Git (https://git-scm.com/downloads ) onto your computer.

 

Once you have Git installed on your computer, open up terminal and navigate to the directory you wish to place your project in. Use the command “mkdir” to create a new directory for your project.

$mkdir projectname

Then navigate into that directory:

$cd projectname

Now you need to initialize this directory as a git repository:

$git init

You can then create your project files. When you are ready to save your work to your online repository you have to add the files first:

$git remote add origin https://github.com/yourGitHubAccountName/projectname

The origin is to link this local account to the remote, online repository and only needs to be done the first time you are saving files.

$git commit -m “first commit”

$git push -u origin master

 

It is useful to understand how git keeps track of the files and commits. In the local directory, git keeps three “trees”. The actual files are stored in the working directory. There is also an index where files are “staged” or indexed for tracking by using the command “git add”. The final tree points the “head” to the last commit made; this is done via the “git commit” command.

Here is a simple visual diagram found on https://rogerdudler.github.io/git-guide/

 

Keep in mind that this all happens locally. In order for the changes to be reflected on your Github account you need to “push” them up to the remote repository.  That happens with “git push” command.

 

So now that you can make changes on your first computer and save them onto Github, and you want to add a second (or more) computer to work on your project. Well as you may have guessed, you need to install Git on the second computer. You then open up a terminal and navigate to the folder where you want your project to be stored. Go to your online Github account and navigate to the project you want to clone, or download. To the right, there is a green button that says “Clone or Download.” If you click on this, you can copy the URL for that repository. Then the command to copy the project is simply:

$git clone urlForYourProject

This will download a whole directory containing your project. You can edit to your delight. When you are finished, you will again add, commit and push.

$git add .

The “.” Adds all the files in the directory to the staging tree. You can also simply specify a filename if you only want to save one file.

$git commit –m “description of the modifications made”

$git push –u

Your work should now be saved onto your Github repository.

 

Later, when you are ready to work on the project on the original computer, you will need to download the changes that you previously made and which are now stored on your Github repository. This is accomplished by using the “pull” command.

$git pull origin master

 

So you can see that it is quite simple to work between two or more computers simply by following these steps. Perhaps in a future blog we can tackle more complex commands.

This week we covered various topics in class including working in the terminal, using Git, installing WordPress locally as well as setting it up on live development, and learning a bit about how web hosting works. I enjoyed this week greatly.

Terminal is an old friend, and I feel quite at home here. I have used it fairly extensively in the past in the programming classes I took while in college. Recently, I was working on a project to keep track of student grades, and I decided to do everything in the terminal using the text editor Vim. It takes a bit to get used to, as you don’t use the mouse to click and highlight, but rather specific keyboard instructions. For example, to open the file, type “vim filename” at the command line. Once the file is open, you can hit the “i” key to begin typing text before the cursor. If you need to move around, you use the up and down arrows. In order to save the document, you must first get out of edit mode by typing escape. Then you type “:w”, in order to write the file. If you want to quit and save you must hit esc then type “:wq”, to write and quit. I recommend using a command line text editor at least once, in case there is ever a time when the editing must be done at the terminal. As a bonus, it sure made me feel like a “real” programmer!

I already had an account on Github, but I hadn’t used it in awhile, so the little refresher was useful. I would, however, have loved to go more in depth on both of these topics as the discussion rather skimmed the surface, and I there is so much more to learn.

The most exciting topic this week, however, was how web hosting works and installing WordPress live. At my current job, there is a subdomain of the main website used as an intranet. This was set up in Drupal about six years ago and is in dire need of upgrade and site maintenance. As there is no dedicated IT person, it falls on me to work out any IT related issues for the company – a small business consisting of two restaurants with a third opening soon. Not having much experience in setting up and maintaining a website, I have been hesitant to experiment on the live version. The lecture this week clarified for me how the website is set up on the web hosting company (as a subdomain), and I got an overview of the file structure, in particular the htdocs (or public_htm) folder where the content management system installation is placed. I am looking forward to playing with my live website and also to delving deeper into the file structure as last week we received a general overview. However, I am definitely feeling empowered in terms of tackling the job of upgrading Drupal and organizing the content currently hosted there by the company I work for.