How to Make a Web Developer Resumé

According to an article by portfoliotips.com, Why Your Resumé Won’t get you Hired as a Web Developer, “Your resumé and cover letter are not what’s going to get you an interview. Employers judge your initial application based on the quality of your portfolio and online footprint.”

Wait, what? And here’s another shocker:

You shouldn’t spend too much time on your cover letter, because it will probably just be ignored anyway.

Yep, it’s fair to say that a lot of the traditional wisdom about jobs (spending tons of time crafting a perfect cover letter, yada yada…) just doesn’t apply for developers. People who review applications for developers told me that they would only briefly glance at a cover letter, if at all. If you’d like to hear more about what those recruiters had to say, check out my interviews with a lead developer and CTO.

So what does matter when you’re applying for a dev job? Your work! Be prepared to show off the projects that you’ve taken on (also, be sure to get involved in lots of awesome projects). Link to your GitHub account, your personal website, and any other live examples of your work. This is worlds more important than anything you can explain in a few paragraphs.

-Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer

Make a Portfolio First

Your portfolio is the first thing potential employers will look at when considering you, so it needs to be a real reflection of your skills and yourself.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Clearly, having a good web portfolio is possibly even more important than the resumé itself. It shows what the applicant can actually do and how they do it. So before you even write a resumé, have the portfolio completed first*!

“Your resumé and cover letter are not what’s going to get you an interview. Employers judge your initial application based on the quality of your portfolio and online footprint.”

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.com

*Learning will be ongoing. But don’t go crazy from worrying about it.

Research Potential Jobs

In order to create a good resumé, it is a good idea to look at actual job ads, especially if the experience is limited. Look at anything – even for the ones that are not available in your area. This will help you get a feel for what to look for and what is required for similar jobs.

Developajob.com provides details on how to Become a Front-End Web Developer and how to Become a Back-End Web Developer, listing the traits that make the position a good fit. Skillcrush also has an article entitled 10 Jobs You Need to Know About When You’re New to Tech that describes a few of the best agency jobs for beginners, along with describing the job itself, average salary, common qualifications, along with a concluding bits of information about the job under “Is this the career path for you?”. This list serves as a reference guide that is both an overview and summary of many of the main web-related jobs that currently exist.

  1. Visual Designer
  2. Copywriter
  3. Web Developer
  4. Web Designer
  5. Front-End Developer
  6. Content Marketer
  7. Researcher
  8. Illustrator
  9. QA Analyst
  10. Data Analyst

(Source: 10 Jobs You Need to Know About When You’re New to Tech Skillcrush)

Some Background Information

jobs-edited-500-opt

(Image credit) [originally featured from: Not An Imposter: Fighting Front-End Fatigue]

“Keep in mind that job ads tend to list more (sometimes WAY more!) requirements and “nice-to-haves” than are really expected from candidates. Never hurts to ask, right?! Don’t let this discourage you though. If you can handle most of what they’re looking for, you’ll probably be at least considered for the role.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Creating The Resumé

From a web development standpoint, the most important areas to focus on are the following: “previous work and internships, school, degree (probably in that order).” (How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

Previous Work And Internships

Experience comes first. Go ahead and move that “Education” down a click. After a few years of work, your recent experience is more relevant than your major or your GPA, and you want your work to be the first thing potential employers see.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

No need to list education first! When it comes to web development, it doesn’t even belong there. In fact, degrees don’t matter, either and here is why:

Sure, if you majored in computer science and got some impressive skillz as a result, that’s super. But if you have the determination and the stick-to-itiveness to teach yourself how to code, that’s more important than any degree.

Mike Feineman, lead developer at social media agency Room 214 says, “Self-taught programmers have a better drive, and are passionate learners. In other words, exactly the kind of people I want on my team.” So go out there and get coding!

-Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer

Plus, considering how technology is always changing, interest to learn is actually a valued trait in this field.

“… I expect college hires to not come in with an immediately useful skill set, so I look for sharp enthusiasm for the company or industry.”

(How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

“In general, good candidates keep a conversation going, aren’t attempting to nail what feels like the right answer first, fast. Thoughtful discourse is a winner even if it’s wandering into a blind alley. Backtracking and recovering are important skills. Smart questions about the business are awesome. Debates in the interview are not.”

(How to Get a Front-End Developer Job, Interview with Micah Jaffe, CTO of Fair Loan Financial)

And along with enthusiasm, what else should web development students being doing? In an interview with Micah Jaffe, CTO of Fair Loan Financial concerning How to Get a Front-End Developer Job, answers that thought:

What steps would you recommend a student take to best prepare for a career in this field?

Learn humility. Because you can be hired anywhere as a software developer does not make it itself a vital component of being good at your job. Fifteen+ years in Silicon Valley have given me some archetypes to work with and prima donnas are ones to avoid.

Software development is team driven. It could be entirely anecdotal but I’ve found smart kids who have had to learn how to work as part of a team elsewhere (sports, music, etc.) fit faster and require less hand-holding.

Learn hierarchy. Even in a “flat” environment, giving respect earns respect. Honesty and severity do not need to share the same emotional investment.

Network early, often. Don’t live in a cave. Who you know helps you all the time whether it’s working through a gnarly programming problem or finding your next job.

Keep learning. What you know for what you need to get done can often shift dramatically even in a year. Being good at and specializing a skill set can keep your paychecks fat for four to five years, but that doesn’t mean it will keep you happy or fulfilled for the long run.

So keep learning AND…

Focus on the fundamentals has always been my mantra. If you can build good sh!t and solve problems then that’s all that matters, how you solve them (the tools) has and will always change. – Not An Imposter: Fighting Front-End Fatigue

Describing Job Experience

So again and again, it is stressed that experience and job skills gained from actual experience is the most important part of a resumé for a web developer. Do not make experience listed in a resumé a “regurgitation of your job description – In most cases, recruiters care less about what you did day to day (like answer phones and email) and more about what you accomplished over time (like increased customer satisfaction 20%).

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Instead, focus on accomplishments:

Pick a few statements to take one step further, and add in what the benefit was to your boss or your company. By doing this, you clearly communicate not only what you’re capable of, but also the direct benefit the employer will receive by hiring you.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Make sure all of the experience on your resumé is updated. Add any awards you’ve received, new skills you’ve taken on, articles you’ve published, or anything else awesome you’ve done.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

As a web developer, projects are the main accomplishments. In Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.co suggests giving the following details:

List out each of the projects that you completed in your resumé, or describe them when talking about past positions. Explain your role on the project, what parts of the work you completed and the results of the work (i.e. X installs, Y new users). At the end of this, include a link to the live project, a blog post about it, an online portfolio entry, or a page with screenshots of the work.

Additionally, when it comes to school-related web projects or especially internships, you still may be able to at least include that work in a portfolio. If you learned and applied something from it, it can potentially be worth sharing and even resumé material.

Job Titles and Sectioning

This might also come a surprise, but according to Melissa Suzuno’s article, 5 Not-So-Hidden Secrets About Working as a Web Developer, job titles also don’t matter:

Every web developer I spoke with told me the same thing—no one has an official title. Titles just aren’t that important in their departments or even their companies.

What this means for you is that when you’re looking for a job, you don’t really need to look for any fancy-pants titles. Just stick to simple things like “web developer” and you’ll be golden.

This also means that the structure of many engineering or web development teams is relatively flat. Just remember, as Micah Jaffe, CTO of FairLoan Financial, reminds us in his interview, a flat structure doesn’t mean you can dispense with respect and courtesy to your coworkers.

Sectioning

For clarity, it is a good idea to keep the overall style of a resumé simple:

Each section should be labeled clearly and professionally. Although it may be tempting to label your work experience as something more creative, the classic “Work Experience” is a good option. If you want to highlight a specific type of experience like customer service, a label such as “Customer Service Experience” could also work. Just keep in mind that simple headings make your resumé more readable.

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

The approach described above displays all work details into one section, which keeps the format simple. However, it is also pointed out that creating an additional, more specific label has benefits because it separates the relevant information into a better place where it cannot be missed. Here are two more examples of such applications for listing job skills:

Consider adding a qualifications section. (Perhaps in lieu of your now-deleted “Career Objective?”) This should be a six-sentence (or bullet pointed) section that concisely presents the crème of the crop of your achievements, major skills, and important experiences. By doing this, you’re both appeasing any applicant tracking systems with keywords and giving the hiring manager the juicy, important bits right at the top.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

 “If you have lots of skills related to a position—say, foreign language, software, and leadership skills—try breaking out one of those sections and listing it on its own (“Language Skills” or “Software Skills”).”

https://www.themuse.com/advice/45-quick-changes-that-help-your-resumé-get-noticed

Working in multiple jobs within the same organization via a promotion can make sectioning skills all the more important. In Adrian Granzella Larssen’s article, 2 Jobs, 1 Company: How to Show Multiple Positions on Your Resumé, tips are provided as to how to show such advancements within a company look like a good thing, instead of some sort of hard to read and complicated list.

What Education Not to Include

If you’re more than three years out of college, remove your graduation year. Recruiters only really want to know that you got a degree, and you don’t want them to inadvertently discriminate based on your age.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Unless you’re a recent grad, GPAs aren’t applicable to most job search settings. Instead of using space to highlight your school accomplishments, focus on what you’ve done since then. If you did astoundingly well in school, use terms instead of numbers, like “summa cum laude” or “with Honors.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

References

The phrase, “References upon request” is not necessary to include on a resumé:

Two reasons:

  • The people reading your resumé know. They don’t think you’ll refuse to provide references. They’re not sitting there going Phew! They HAVE references, they’re just not HERE.
  • It sounds pretentious, and that line takes up valuable real estate.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Demonstrate Up-to-Date Tech Skills

It is a waste of resumé space to list basic computer skills on a resumé. In fact, it could do more harm than good:

These days, employers expect proficiency in word processing, typing, and Internet use. Listing outdated skillsets can give an employer the impression that you’re not up to speed.

If you need to brush up on tech skills and aren’t sure what to highlight, try this: Instead of dating yourself with lines like “proficient in Excel,” try talking about your experience in data analysis.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Examples of more modern skills (related to web development) that are better to mention on a resumé include things like these:

  • Web design / UX / Photoshop
  • Version control (Git / GitHub)
  • Cross-browser compatibility
  • Responsive web design
  • CSS preprocessors like Sass or Less
  • Frameworks like Backbone.js, Angular.js, or Node.js, etc. or Ruby on Rails
  • A CMS (Content Management System) like WordPress

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Create a Brand

Finding ways to stand out from other applicants is extremely important. In SkillCrush’s article, 12 Things You Must Do to Land a Junior Web Developer Job, it is recommended one definitely should “create a custom personal logo to use across your documents” as a means of personal branding. Finding ways to show branding is so essential because:

Your online footprint is part of your personal brand. Your brand doesn’t just mean the colors you’ve selected for your website. It’s the way someone feels about you when they view your application. If your application looks sloppy and rushed, the employer is unlikely to feel excited to work with you, expecting that you produce sloppy work. If your application is bursting with awesome projects that you’re passionate about, then a reviewer is going to at least want to speak with you to find out more.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.co

Create a Story

Telling a story can not only shine through in a cover letter, but also in the resumé. Limit the actual number of job positions listed to 4 or 5 per section when creating a story in a resumé. Too many points might cause things to be too hard to follow if too much is being discussed.

The key is to cut off your resumé when the jobs stop telling a story. For example, the restaurant you opened 10 years ago before changing careers isn’t part of your “career story” today. If you want to bring up older work history, feel free to do so in the interview.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Below are some story-friendly elements that can potentially be used in a resumé. Just make sure to link to them appropriately:

Definitely include (if you have them)

  • Your portfolio. If you don’t have a portfolio you really should, it doesn’t need to be fancy. A simple static HTML page will do, showing screenshots and an overview of projects you’ve worked on.
  • Recent projects. For each include a screenshot, live example (if possible), link to source code (if public), paragraph explaining what the project is, and what you did on it (keep this part as brief as possible).
  • Open source projects. Links to your own projects that you’ve open sourced, project that you’ve worked on as an employee, or any other OS projects that you’ve contributed to.

Other things you might want to include

  • Blog posts. These are great for judging your ability to communicate.
  • Stack Overflow. Or activity in another relevant community i.e. /r/webdev, codepen, dribbble.
  • SlideShare. Any presentations, including Meetups, conferences, or presentations that are a work in progress.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.

Résumé Layout

Look at your resumé “above the fold.” In other words, take a close look at the top third of your resumé—the part that will show up on the screen when the hiring manager clicks “open” on that PDF. That’s what’s going to make your first impression—so make sure it serves as a hook that makes the hiring manager eager to read more.

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Use Bullet Points

“Since employers will likely be scanning your resumé, format your words to pop out at the reader. Instead of big blocks of text, use 4-7 bullet points to describe each section of work experience.”

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Begin bullet statements with verbs. Use a variety of verbs throughout your resumé. For current jobs, use the present tense; all previous jobs should use the past tense. Make sure these verbs are active. For example, “Processed,” is a good way to start a bullet statement. On the other hand, “Was responsible for processing,” is not active, so you shouldn’t use it. Some powerful verbs include:

Analyzed

Collaborated

Conducted

Controlled

Coordinated

Created

Designed

Developed

Established

Evaluated

Executed

Generated

Implemented

Improved

Increased

Launched

Led

Maximized

Organized

Prepared

Quantified

Reduced

Secured

Strengthened

Source: Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

Keep it Short!

A resumé should be just one page long. It should be easy to skim and “showcase the most important information.” –The Ultimate Guide to The Perfect Resumé, Skill Crush

The most important and hardest part of creating a resumé is pruning it down to the most essential information. The best resumés actually DON’T include a record of your entire history—they highlight the most relevant information for the specific industry and role you’re applying for.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Different Position, Different Resumé

Going back to the web development thought that “titles don’t matter”, flexibility is also something that must shine through a resumé:

Never limit yourself to an industry because you feel limited by your skill set. Organizations need talent in a variety of areas. Just because you haven’t heard of a position doesn’t mean it’s not out there. And if it’s not out there, feel free to create a resumé for it!

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

This requires a bit of extra work, but candidates who tailor their resumés to specific positions are more successful job-hunters than those who send a generic resumé as a part of all their applications.

Career Edge 5x Resumé, Networking, and Interview Skills Course, edx.org

“Instead of thinking of your resumé as one document, think of it as a template that you tweak and cater to each role you apply for. That means you won’t always feature the same work history or other information.”

The Ultimate Guide to The Perfect Resumé, Skill Crush

Aside from actual resumé content, creating separate resumés for various situations can also be useful when submitting applications under different formats, such as email, online, or via applicant tracking system. Additionally, a link to a resumé on an about page of a portfolio is a great way to make an increased online presence along with examples of your best work.

Make sure the resumé you share online isn’t editable — save it as a PDF instead of a .doc. Some people can’t open .docs, and it’s also more professional to share a PDF.

The Ultimate Guide to The Perfect Resumé, Skill Crush

Watch Out For Abbreviations

Find any acronyms, and write out the full name of the title, certification, or organization. You should include both, at least the first time, to make sure the recruiter knows what you’re talking about and so an applicant tracking system will pick it up no matter which format it is looking for. For example: Certified Public Accountant (CPA).

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Formatting Numbers

Quantity

In the spirit of providing a lot of information in a short amount of time, try adding percentages to your resumé. “Increased conversion rates by 15%” sounds a whole lot more impressive and memorable than “Improved conversion rates.” You don’t have to be exact, but make sure you’re telling the truth!

Show me the numbers. Well, the numerals.

Go back to those numbers and change them to numerals. “30% traffic increase” pops out on the page more than “Thirty percent traffic increase.” Plus, using numerals saves space.

-“12 Things You Must Do to Land a Junior Web Developer Job”, SkillCrush, https://skillcrush.com/2015/04/09/land-junior-web-developer-job/

Word Choice

Using buzzwords, poorly worded, overused, or funny-sounding language can affect how seriously a résumé is taken. Below is a list of the 10 worst and 10 best resumé terms. Not all of these words listed at first glance may even seem obviously bad either. For example, while being a team player is normally a good thing, it is actually listed as one of the worst resumé words to choose from.

The Worst Resumé Terms

  1. Best of breed
  2. Go-getter
  3. Think outside of the box
  4. Synergy
  5. Go-to person
  6. Results-driven
  7. Team player
  8. Hard worker
  9. Strategic thinker
  10. Detail-oriented

The Best Resumé Terms

  1. Achieved
  2. Improved
  3. Trained/Mentored
  4. Managed
  5. Created
  6. Influenced
  7. Increased/Decreased
  8. Negotiated
  9. Launched
  10. Under budget

Even within the job industry there can be language to avoid. Melissa Suzuno in her article 5 Not-So-Hidden Secrets About Working as a Web Developer, cautions to be careful about how you word things because “Perhaps an HR person wouldn’t necessarily care that Dev referred to jQuery as a programming language, but since Mike is a developer, this inaccuracy bothers him.”

Words With a Negative Connotation: Even if you mean them in a positive way, like “met aggressive sales goals,” research has shown that words like problem, mistake, and fault can have a negative impact on a recruiter’s perception of you.

Vague Terms: (Think professional, experienced, and people person.) They’re chronically overused, and we bet there’s a better way to describe how awesome you are. (Need help? Here are a few great cliché-free ways to show off your soft skills.)

45 Things You Might Have on Your Resumé (That Need to Be Removed) – themuse.com

Demonstrating enthusiasm in a resumé can also be accomplished through aspirational language:

In the heading of your resumé, and in your language throughout your application, for that matter, it’s important to use aspirational language.

Instead of describing yourself as you are now, use words to describe what you want to be. If you can imagine yourself in a new role, it’s much easier for hiring managers to do the same.

For example, instead of calling yourself a “web developer in training,” just call yourself a web developer. Or, if you’re moving out of customer service and into marketing, call yourself a “marketing specialist” rather than a “customer service manager.”

The Ultimate Guide to The Perfect Resumé, Skill Crush

Conclusion

Hopefully it is now clear that showing what you can do is everything for web development along with some high quality link juice, too. To reiterate one more time, here is what to expect and not to expect:

Here’s how you may think an employer reviews your application:

  1. Reads through your cover email, thinking that you’re a lovely, polite, articulate individual.
  2. Reads through your resumé, noting your X years of Rails or iOS experience and past experience at a startup or code school.
  3. If you’ve provided any links, takes a look through those.
  4. If they like what they see, calls you in for an interview.

Here’s how an employer actually reviews your application:

  1. Spends 5–10 seconds scanning your resumé and cover letter for any notable past positions or qualifications.
  2. Looks for links to your portfolio, projects and GitHub. If you don’t have these and have no impressive past positions/qualifications, your application gets archived.
  3. Reviews your portfolio or work links, if it’s sloppy, your application gets archived.
  4. If they liked your work, does a quick search for your personal site and Twitter to see if you’d be a good culture fit at the company. If they find any red flags, your application gets archived.
  5. If they like your work or think you show promise and would be a good fit at the company, they add you to their phone interviews shortlist.

Why Your Resumé Won’t get you Hired as a Web Developer, portfoliotips.com

Advertisements

Practical Boolean Example in JavaScript

Textbooks love this. You read about how in programming, Booleans determine either TRUE versus FALSE and you may observe a bunch of different scenarios in order to help make the concept more clear. Ok, that makes sense, but I’m a big fan of learning that actually does something. So here is a more specific programming example.

Function Error Catching

Programming often requires imagining every possible situation for something and this example is no different. Imagine you are writing a program that makes change. Let’s just pretend the actual brainwork of making the change happens in a function.

funcbool1

So far, everything looks good, but now consider something else:

// What if they didn’t give any money?

funcbool2

The Solution: Boolean Conversion

So far, that works fine, but every time the program runs, it has to pause and think about something. What if there was a sort of, “express lane” for this cash handling? A real life comparison would be when a customer steps up to the cash register with exact change, and really quite honestly – there is no need to even consider the math for that scenario, right? For computers, while they work fast with the simplest of questions – cutting back on those moments where a program is stopping to consider something briefly – is where more complex tasks impact processing times and can and should be minimized.

In the example below, the best solution to handling that “what if” moment is through Boolean conversion. Doing it that way is useful because it is both verbose and the program will run FAST. It will immediately find true and cut out any extra steps. When things work normally as they are expected to behave, it will take the first true part of the Boolean and ignore the rest.

funcbool3

Boolean ‘Gotchas’

So now that you know how to use Boolean in an efficient manner, watch out for the less obvious Boolean scenarios that can cause problems. In JavaScript, type conversion exists and working on something like adding 7 + 7 + “7” will be considered completely ok and run correctly. But don’t let that catch you off guard. If the Boolean compares a string, a string will still be true! For example, “0” and “false” at first glance look like they would be false. But no, they would return as true because quotation marks around anything will make it into a STRING.

Speaking of Speed…

JavaScript is well-loved for being fast. But one quirky thing it has is the requirement of arranging the curly braces in a very specific manner. The position of the braces do matter a great deal, so always abide by this rule:

“Always put the start curly brace at the end of a line, and not a new line.”

For example, at first, you might think these two functions below look the same, but:

funcbool4

The first function not work. But, why not? Syntactically, the parentheses both even close, right?!

The real reason for this bizarre behavior is because JavaScript is very efficient, but also somewhat “simple minded”. Think of how JavaScript reads programming code as much like leading a horse with a carrot tied to a string. The animal may not look ahead, but instead merely follow what it sees immediately in front, blindly stepping forward with little regard to what is happening. All that the horse thinks is “carrot, carrot, carrot…”. Look again at that part where return happens:

funcbool5

When return happens, JavaScript drops out of the function immediately. Going back to the carrot on a string comparison, there is no awareness. JavaScript sees return and return means LEAVE THIS BLOCK OF CODE*. Parentheses opening and then closing in this case is not going to stop that decision on JavaScript’s part. Think of the horse eating the carrot: it keeps taking big bites out of the carrot anyway as he follows what is in front of him. Until the carrot is yanked away entirely, the horse will continue to step forward. Therefore to remedy, keep leading on JavaScript with an open brace on the same line to let it know there is something extra attached here.

funcbool6

*Or instead of shouting LEAVE, one could quote Dr. Chuck from his Programming For Everybody class (my personal favorite teacher ever, for programming), and see it as the JavaScript essentially goes ahead and immediately asks “what’s next?” – and very enthusiastically in this case.

Namespacing in JavaScript

Sure, JavaScript can create some amazing formatting on the fly through on-clicks and on-loads. It makes interactivity between the web user and website both breathtaking and useful. But JavaScript suddenly becomes quite complex when it can do so much. While it is not only regarded as a “loosely typed language” – yes, it actually makes variables without the type being defined, it also does something even more quirky – all variables are actually global too. And when the same variables (or objects) start being used all at once – intentionally or unintentionally – code can start getting garbled and confusing and maybe even stop working, especially if something clashes. This is called polluting the global namespace when that happens.

(A more simplified example would be how in school classroom, perhaps one might find two students have the same first name. How does one distinguish one from the other if the teacher wishes to acknowledge only one of them? How will each student know who is being called on? They can’t. The same problem can happen with programming.)

Namespacing is the technique of keeping everything separate, or rather perhaps better put: contained. So while the designer’s interactive changes found in a website (simple things like color displays) can happen with different unique ID tags labeled as variables in JavaScript, namespacing covers far more serious programming territory for back-end developers, involving holding everything else together.

Functions Signify Scope (aka “my home is your home”)

Imagine that you have just moved into a new house and this weird outgoing person suddenly spots you in the front yard, introducing herself as your neighbor. She gives you massively big hug, drags you into her house by pulling your arm, forcing you have a cup of her coffee and have some of her cake. She goes on to assure you, “If you need anything at all, just come by – any time! My home is your home.” You go on to nod and smile and wonder how anyone can be so open to visitors seeing you just met them. Oh well, they seem nice enough.

This is how JS also operates…

In JavaScript, functions are not walled fortresses where variables are safe from outside influences. This is not your typical programming rule! It required so much brain bending for me to accept that.

I actually finally started to understand how this could be possible when I learned how “this” works. “This” is a special word used for objects in JavaScript that points immediately one level up within that object being declared. Why? It just does. It’s useful.  It makes sense if you need to use it. Sometimes you might have a program that needs to backtrack its own steps. It’s not too different to when one is making conversation and what you just literally just talked about is also specifically referred to as: “THIS”. It is exactly the same concept. Anyway, going back to namespaces…

Ultimately, “this” (in programming) literally points one level up from where you have your current line of programming code. Applying this reasoning, everything one level up from any function used in an HTML page, will incidentally automatically be the window object where the HTML resides. And yes, that means in a way, that the whole thing is one giant object! So to go one level up from a variable in a function can in theory mean you are in the global scope of that one big “function” (think “also object” – they are the same thing in this case) is therefore accessible EVERYWHERE – even in other functions you might choose make. They really are just like very close neighbors – perhaps even uncomfortably close.

How This Relates to Namespacing

Going back to the neighbor analogy, it is best not to shrug off the neighbor as merely  being just nice enough. Who knows, she might start even barging into your home next time with the same degree of openness under the guise of friendship:

“As a well-behaved ‘citizen’ of the global namespace, it’s also imperative that you do your best to similarly not prevent other developer’s scripts executing due to the same issues.” – Addy Osmani’s post entitled, Essential JavaScript Namespacing Patterns.

Your home is their home and their home is your home! Things also get complicated when sharing happens. In a work environment, people will of course almost always work together to code. They will share code to break down the workload and break down complex tasks into simpler ones:

“In any modern day application, Namespace is a must to have because at the end, we need third party libraries and components.” – Code Project

Perhaps the most widely used example of a third party library for JavaScript would be JQuery. And yes, that of course also uses its own sets of variables and objects, separated by namespaces.

Namespacing in Action

SETUP

Now it’s time to see an actual example of namespacing. This example is meant to be very hands-on. Feel free to try it yourself. Four files are be used: one is the main file, two other files contain blocks of JavaScript, and the third one is a separate file meant to run the JavaScript code.

Imagine you have a main file called index.html:

 namespacing1

Imagine you have a file called announcement1.js

 namespacing2

Imagine you have another file called announcement2.js

 namespacing3

Imagine you have a third file that calls for all the action

 namespacing4

RUNNING THE PROGRAM

PROBLEM! This will not work as expected! Instead of displaying “President” on one line and “VicePresident” on another, it will print the second variable twice. While the functions have different names the variable name was the same (in the global scope) and was overridden.

 namespacing5

HOW TO FIX!

Create separate objects with properties as a work-around. Change announcement1.js to be as follows:

 namespacing6

Change announcement2.js to be as follows:

 namespacing7

Change the third file that calls for all the action

 namespacing8

SOLUTION!

This should now work as expected! It will print:

namespacing9

Real-Life Example

All things mean much more when applied in an actual setting where you can see the code in action. Here is some example code from CodeProject before it was made namespace-friendly:

namespacing10

(screenshot taken from Code Project’s article entitled: JavaScript Namespace)

It looks like your typical program, right? And here is that same code made so that it is namespaced:

namespacing11

(screenshot taken from Code Project’s article entitled: JavaScript Namespace)

Can you see the difference? The sections of code are now lumped together as one big chunk now: a global object called MYAPPLICATION and “To access any of the methods or variables, you need to fetch it through the MYAPPLICATION.”

namespacing12

(screenshot taken from Code Project’s article entitled: JavaScript Namespace)

It clearly takes some more work to make something namespace-friendly, but as Code Project points out, these three global items, calculateTax, product, doTaxCalculations “will really put us in trouble if we are using 3rd party libraries and they also contain the same name. Like if it is used before other library, it will be overridden by Library and vice versa.” In this case, record keeping and handling data for sales are involved, and one cannot help but imagine can potentially create serious problems if the money matters are not computed correctly.

Namespacing Tools

Efforts have of course been made to make namespacing easier. Ever heard of Angular JS or React? Those are some of the latest ways to get JavaScript better organized and in the form of a framework that uses it’s own namespace.

In thanpolas tech blog, it is pointed out that medium to large scale web applications are so complex that they have to use namespacing for Javascript. This is understandably so. Try to make sense of this screenshot below taken from a browser console! Perhaps even more intimidating is to realize that the it has already been made “easier” by being organized with drop down arrows because the browser recognized which parts of the JavaScript were made into namespaces and realize this is only part of an even bigger chunk of programming code:

namespacing13

(Screenshot taken from thanpolas post entitled, Development Using Namespaces)

Conclusion

Namespacing matters a lot! It should be evident now why JavaScript is a must-learn programming language from a back-end perspective. Namespacing adds safety to programming code so that it won’t break. Namespacing reveals a whole side of web development that involves a lot more than just using JavaScript for designing interactive visual design aspects for a web page.

 

Creating a Website With SEO in Mind

Keywords

Read anything about Search Engine Optimization (SEO) and it will demand the use of them. But what exactly are keywords? In Inc.com’s article 5 Secrets to Selecting Highly-Effective SEO Keywords, keywords are described as “what we type in when we are searching for products, services, and answers on the search engines…”

Wow, it’s that simple!? Yes and no. Here’s the tricky part: how to use them to where they actually speak the same language as a search engine. There are multiple ways to accomplish this. In the article “Are Keywords Relevant to SEO in 2015?”, Search Engine Watch mentions  some important things to keep in mind when it comes to deciding where those keywords need to go on a website:

To this end, the placement of your keywords matters far more than their frequency. Posting “auto repair shop” once in the title tag of your site and once in the header matters far more than stuffing it five times into the body copy. Google breaks your site down into key areas, with meta information and headers taking top priority, body copy taking secondary priority, and side bars and footers taking the last priority.

Continuing on, here are some more details as to how to make a website more SEO-friendly:

Title Tag

This is the title included in the HTML part of the web page, found on the top of the browser window. From a website…

exampleoftitletag

And here is what you see in a search engine result (such as Google)…titlesearch

Example of the title in the HTML:

titletag

Writing Tips:

  • Unique relevant keywords
  • Limit to 55 characters (512 pixels)

The Meta Tag Description

This is the text preview that shows up when a website is listed in a search engine…

description

Example of meta data in the HTML:

htmldescrip

Writing Tips:

  • Use keywords
  • Call for action
  • Keep under 155 characters

Headings

Similar to an outline in formatting, headings are the titles for each relevant section. In HTML, these are the H1, H2, and H3 tags.

W3schools.com, summarizes it perfectly as to why headings matter:

Search engines use your headings to index the structure and content of your web pages.

Users skim your pages by its headings. It is important to use headings to show the document structure.

h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

Writing tips:

  • Only include 1 H1 Tag on each page and add the remaining H2, H3, H4 (…and so on) tags as needed.
  • Headings should include keywords
  • Headings should stay to the point and attention grabbing

Alt Tags and Relevant Naming

This applies to images, video, and links. For example, img4.jpg is neither descriptive nor helpful when it comes to making it identifiable piece of information.

All images and video must also include the “alt” Tag. Why? This provides an alternative option for when images do not load properly and also allows screen readers to inform the user of the image they cannot see.

Example:

<img src=”bears.gif” alt=”Hugging Bears”>

Outside Links

Usability and SEO can be intertwined at times. While links are how users visit websites, search engines are often the means of getting to that website. But when it comes to keeping the visitor on your website, that part is largely influenced by you. Here is a very helpful set of advice made by one person in their article, 10 SEO Tips for Food Bloggers:

Make External Links Open in New Window.

This is more of just a usability tip, not so much SEO. But sooooo many bloggers don’t do that. For example, if I mention any external website in my blog post, I always make it open in new window by clicking on the link button and checking off the box above. Why? because you don’t want to lose your readers. Of course some will come back but some won’t. And finally, it’s a pure convenience.

Oh and while on this subject of linking, keep in mind that while a user is navigating a website, the amount of active traveling around via clicking should be kept within reason also. Excessive linking (via clicking) can become irritating to the user and it can frustrate them because they may feel like they are not getting where they need to be as expected. According to WikiWeb, A well-known rule in SEO is that no page on your site should be more than 3 clicks away from the homepage.

Schema

Schema microdata is a way of helping search engine crawlers recognize what types of information is being used. For example, if using schema in html to label some specific data on a cooking website,  a search engine can use that schema to recognize which parts of are listed as recipe ingredients and which are not. For this reason, schema is quite similar to the description meta tag in the sense it helps the search engine know what needs to be interpreting as search-worthy.

itemprop

In the photo above, itemprop contains the schema pointing out which image on the web page is for the cherry pie recipe. Then, when this particular recipe is found in the search results, it not only shows a title and a description, but also displays an attractive picture also.

And so by using schema, “Clear, concise rich snippets can result in higher click-through rates, as users can quickly and easily determine whether the content on your site is what they’re looking for.” (Source: How to Use Schema Markup for SEO: Making Your Site Easier to Find for Stupid Machines)

Schema can be used to define a wide variety of ideas and concepts: things like names, addresses, authors, and even dates are some other common ones just to name a few. While the schema website itself provides a very detailed set of Getting Started documentation, I find the most popular types of useful schema are the Creative Work ones. Either way, it really depends on what type of website content you have in order to determine which schemas are best to use.

Use this online tool to test your Schema markup: Google’s Structured Data Testing Tool.

URL Naming

Giving URLs meaningful names is always a good practice. Here is an example of a fictitious, not-so-good url:

www.gohere.com/0032.htm

This is not SEO-friendly! All links should have meaningful names, like this:

https://gohere.com/seo-guide.html

Incidentally, WordPress is already well aware of just how important this practice is. On each newly created page or blog post, WordPress will automatically name the URL (the “slug”) after each specific headings/title provided.

URL Writing Tips:

  • Only use letters or dashes. No underscores!
  • “Sub-domains can rank better than sub directories.” – Should I Change My URLs for SEO?
  • Make URLs short. Shoot for around 3-6 words, under 100 characters.

Creating Links

Text identified as links should be specific as possible. For example, don’t just link to Google when you can link to the About Google page.

Writing Tips:

Content

Google itself is becoming very smart and SEO is becoming something where if you have something to say, just go ahead and say it and it will be found by search engines. Below is an excerpt from Search Engine Watch’s article, “Are Keywords Relevant to SEO in 2015?”

Google Looks for Meaning, Not for Specific Words

This feature perfectly illustrates why keyword specificity is dying. When Google scans your site for information, it no longer pulls out the keyword phrases it thinks are relevant and pairs them to user queries. Instead, there’s an intermediary step. Google interprets the data on your website, and begins to form its own conclusions about what your site and your business really deliver. If that seems a little spooky to you, you aren’t alone — Google is becoming exceptionally sophisticated.

As an example, according to Google’s own research, deriving meaning from the synonyms of keywords accounts for up to 70 percent of searches. That means it doesn’t matter that you used the phrase “auto repair shop” exactly several times throughout your website. You could use “auto repair shop,” “car repair specialists,” and “vehicle repair facility” on different pages, and Google could theoretically put you in the exact same category. Therefore, it’s far more important to optimize your site for a specific meaning rather than a specific phrase, and you can likely forget about keywords altogether in an effort to post relevant content and naturally build yourself as an authority in a given space.

What this means for SEO is that the importance of quality content writing is huge in itself! Effective content is therefore truly the core of everything that makes a website worthwhile to visit. Users have to have a good experience, because without it interest will not be formed, and without interest, search engines find no interest either in following or recognizing the search trail.

Web Writing Tips:

  • Quality over quantity
  • Uniqueness of material
  • Stay relevant
  • Use attractive and attention grabbing language
  • Stay up-to-date

Duplicate Content

When I first heard about “duplicate content” I wondered if it was about redundancy on a web site. Instead, it is conceptually more similar to what can happen when the same stuff from one website appears on many other pages in an abusive way. A search engine like Google can potentially find it and cause that site to be removed from their searches. Duplicate content issues sound a lot like plagiarism in real life with actual consequences.

Related to this subject, “web scraping” is something that strikes me as as similar to somebody taking something and claiming “it came from the Internet”. This type of distributing can be something somebody found and shared- not necessarily claiming as their own. Undeniably, the Internet is full of that- people finding other people saying anything, and sharing that found material anywhere.

People who are making websites shouldn’t be trying to plagiarize or steal other people’s content, so this shouldn’t be a concern for those who really care to be original anyway. For more information, Kissmetrics has an excellent article that does a good job explaining duplicate content in greater detail, how to handle abuse and also how to avoid duplicate problems:

3 Myths About Duplicate Content

Programming and SEO

A set of advice that I find terribly irrelevant to SEO is talk of not mixing JavaScript and HTML. As of 2016, I feel like this almost not worth mentioning, since it is not a good programming practice in general to mix programming into the HTML page. Things like that should always be set aside in a different file anyway.

However, what still does matter is when programming code interferes with the way a search engine recognizes what the user is dealing with. For example, what if every single piece of data is dynamically created? There is nothing left for search engines to crawl and certainly no footprints of what was even clicked on or viewed if actual web pages are not being loaded.

 Web Tools

Putting everything together, the Meta Tag Analyzer is a useful online tool as well. It acts like a validator to check meta data.

Also, being aware of the Google Webmaster Guidelines is also a must-know in ensuring Google can find and understand your pages.

Conclusion

There are certainly a lot of ways to make a website SEO-friendly, right? A word of warning: these rules are still changing. Keywords used to be stuffed everywhere and now that is considered not a big deal. Some “older” SEO articles can be found recommending things like using the name attribute in a link tag…but don’t try that now! It is no longer supported in the newest HTML5 of 2014. Even Google itself changes their mind as to what is SEO material: one can read about this thing called Google Authorship being all the rage in 2011. But then in 2014, this hot new feature is declared as completely dead.

The only thing one can definitely say is that the web is changing drastically for each year that goes by as to how SEO gets across. Ultimately however, the whole point of SEO continues to be all about having passion and drive about something and finding the means of bringing that to others.

GitHub Projects and Markdown Files

IMG-20160528-00237Reusable Code

As I am developing websites, I can’t help but find myself reusing the same code over and over. As a programmer, it is almost instinctive now that whenever there is a section of code, markup, text, anything that I have to literally copy and paste, alarm bells go off. There needs to be a better, programmatic solution for this

In terms of development on different projects, these are usually described as plugins, which are essentially little scripts that can easily be used and re-used, regardless of the website or project. Just “plug in” the script file, maybe make on or two very minor additions to the markup, and use the preconceived functionality.

Copy & Paste

I like the openness of the web. I like that if there is no apparent solution to a problem, you can go on the web, type in fragments of the problem and if not the whole solution, find enough information to come up with a solution yourself. And part of that—part of what makes web development so attractive as a whole—is that the code is technically always open source. (Sure you may try to obfuscate it, but it essentially is). I’m sure there is (lots of) code in “my” code that I took from other code, that came from somebody else’s code that came from somebody else’s code, etc.

New GitHub Projects

Long story short, I added a couple of my plugin repos to my GitHub, so that they may be available for the world and if nothing else for myself as a sort of cloud backup. In the process, I found myself learning what an .md (Markdown) file is, and that GIT supports versions (though they don’t see to want to push… maybe I’m missing something).

Right now you will find my always-used smooth anchor scroll, and also tabscroll a quick and easy jQuery tab-script that lets you set up a webpage with indexable, history-functioning, bookmarkable tabs with literally a couple of lines of code (with functioning fallback, in case Javascript is disabled). And of course it even plays nicely with the smooth anchor scroll plugin, as well!

The newest Plugin is part of a larger library I plan to release when it is ready, called Scrollanimate (maybe I’ll rename it still), which lets you do cool things in relation to the scrolling point of the page.

I branched a little part of that library—I called it saPopIn —that “pops in” certain elements into view, any element, from the bottom left or right. Checkout the updated version of the schrift.co homepage for a live and working version.

I will probably add a couple of posts detailing each plugin in a little more depth—and maybe and link to some examples—but right now, you can check out the GitHub here .