A better Front-end Developer

Everyone wants to hire the good front-end developer – but you need a way to identify future potential WordPress front-end developers.

What are the transferable skills and characteristics someone could look for in a potential WordPress developer?

Understands key server-side web development concepts through experiences such as:

  • Interpreting graphic visual or interaction designs in PSD to HTML pixel perfect conversion, style in CSS and create dynamic function on Javascript.
  • Creating visually appealing web pages or interfaces such as hover effect, web intros and animation.
  • Creating, editing or modifying templates for a CMS or web development framework.
  • Programming interaction with JavaScript and/or a library such as jQuery, YUI or Prototype.
  • Testing cross-browser, cross-platform, and/or cross-device compatibility for inconsistencies.
  • Testing for compliance to specified standards such as accessibility standards in the clients region or domain.
  • Conducting observational user testing, or reviewing designs against usability and loading time.
  • Created a SEO Friendly Website.

Software familiarity and knowledge base.

HTML

  • HTML syntax for multiple specifications, including HTML 5.
  • Knowledge of the semantic meaning of all HTML elements.
  • Familiarity with the semantic markup for display of lists, tabular data, forms, articles, etc.
  • Knowledge of markup used for layout such as dividers.
  • Knowledge at the level to be able to hand-code markup.
  • Including media and images.

PHP

  • Familiarity with modifying WordPress Theme plugins to display data
  • Understanding how to utilize PHP to filter, process and output html, json, xml

CSS

  • Specifying different CSS for various media, devices and displays.
  • Best practices in CSS file organization and structure.
  • Methods for including CSS inline, internal and external via linked style sheets.
  • How to define, combine and group CSS selectors for HTML elements, ID, classes, pseudo classes, child or sibling.
  • Syntax of CSS declarations, properties and attributes.
  • CSS box model and methods for CSS positioning, absolute and relative.
  • Knowledge of properties and attributes to control the display.
  • Familiarity with differences in CSS 2 and CSS 3.
  • Proficient with a CSS Preprocessor such as Sass or LESS.
  • Best practices
  • Methods to ensure browser & device compatibility
  • Methods for degrading gracefully for older browsers and displays.
  • Methods to ensure accessibility.
  • File compression techniques for improving speed.
  • Familiarity in CSS3 Animation

JavaScript

  • Knowledge of the operators, variables, datatypes, objects, properties and methods.
  • Familiarity with control structures such as objects, functions, conditional statements, arrays, loops and expressions.
  • Forms and regular expression validation and submitting data.
  • Knowledge of how to apply logical operators and conditional statements.
  • Knowledge of the DOM HTML objects and their properties.
  • Event handling.
  • Creating and controlling windows and dialogs.
  • Processes for troubleshooting and debugging
  • Familiarity with development and debugging tools for cross-browser issues.

jQuery

  • Knowledge of how to employ the jQuery library for visual effects, event handling, and document manipulation.

Tweeter Embed How tos

Starting in WordPress 3.4, WordPress added Twitter as an oEmbed provider. What this means is that you don’t need to install any plugins or configure any settings.

Simply go to Twitter and find the tweet that you want to embed. You need to get the URL of that status. When you click on the tweet, it will expand and show you several options. Click on the Details link. Just get the url something like this “https://twitter.com/applebyte/statuses/492639776319614976” and it will gives the result below.

 

CSS3 Filters

CSS3 Filters are a powerful tool that web authors can use to achieve interesting visual effects. Originated as part of the Scalable Vector Graphics (SVG) specification. Browser vendors such Mozilla, Chrome, Opera and IE added SVG capabilities. It now realized effectiveness and usefulness of filters when it became popular on Front End Developers and Designer. IE’s deprecated their own old CSS Filters to adopt the changes on CSS3 on their IE latest version.

CSS3 Filters, check the Compatibility and W3 Samples includes the following:

filter: blur(0px);
filter: brightness(1);
filter: contrast(1);
filter: url(0);
filter: drop-shadow(0);
filter: grayscale(0);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: sepia(0);
filter: saturate(1);
filter: custom(); – Check Here

Tutorials
Understanding the CSS Filters