Tag: web_development

Everything You Ever Wanted To Know About Images

Jessica Tate, senior user experience designer at Portland’s ThinkShout gave a very good presentation at Devsigner entitled “Everything You Ever Wanted To Know About Images”.

On the outside, images on the web seem simple: save an image, compress it, and upload it to a website. If only it were that easy. What file type do I use? What size compression (or k-weight) should I aim for? What way is the “proper” way to save an image for the web? Are there different rules for images in Drupal and WordPress? If you’ve asked yourself any one of these questions, then this is the perfect session for you.

We will begin by setting a baseline for image standards and the basics of images as applied to the web. We will explore guidelines and practical applications of saving images for web optimization, image file types, and what they are best used for from a technical perspective.

Here’s a link to her slide deck which is packed with great information.

Taking control of the Browser Security Model

This past weekend at the Devsigner Conference held in Portland, Oregon, Dylan Tack gave an excellent presentation entitled “Taking control of the Browser Security Model”:

Since the birth of the web, the browser security model has remained nearly static. Recent evolutions make it possible for site operators to fine-tune the security model, and enforce mandatory access controls. This session will focus on Content-Security-Policy, and other browser security features like Strict Transport Security and Public Key Pins.

47% of all web applications have a cross-site-scripting vulnerability, and this potential security flaw ranks in the top three classes of all vulnerabilities. [ White Hat Security, 2015 Website Security Statistics Report ]

A Content Security Policy is a systematic way to block these attacks, by whitelisting allowed sources of script, style, and other resources. The holy grail – blocking “unsafe-inline” code – offers the strongest defense, but can be a big surprise for front-end developers when inline scripts and styles stop working!

If you are developing for the web you need to take a look at his slide deck. If you have any questions, feel free to let let me know.

And I’m Back

IMG_0221.png

I’m delighted to be part of Clark College for another year. This marks my fourth year at the college teaching web development. Here’s a list of all the courses that I have taught:

  • Intro to Programming and Problem Solving with Python (CTEC 121)
  • HTML Fundamentals (CTEC 122)
  • JavaScript (CTEC 126)
  • Business Web Practices (CTEC 165)
  • PHP with SQL 1 (CTEC 127)
  • PHP with SQL 2 (CTEC 227)
  • API & Advanced Integration (CTEC 228)
  • WordPress Development (CTEC 260)

On Teaching

As a college instructor, there is one thing that I rarely have ever talked about and that is how I have improved my skills. Every day in class I am constantly being asked to help solve student programming problems and demonstrate and explain my solutions. There has rarely been a time when I couldn’t come up with a solution.

The other skill that I have developed is solving problems “over the air”. What this entails is being able to solve a student’s problems without even seeing their code. I ask a series of questions and by the time we get to the second or third question the student has resolved their own problem.

I highly recommend that you give teaching of any kind a try. It will not only help your students but yourself.

Now Available – Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites

Micah Godbolt’s new book “Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites” has been published. 

51aerzppjdl-_sx346_bo1204203200_

Imagine what a large-scale web project would look like if frontend development were not treated as an add-on, but as an equal partner with backend development and content strategy. This practical book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level.

Using real-world examples, case studies, and practical tips and tricks throughout, author Micah Godbolt introduces you to the four pillars of frontend architecture. He also provides compelling arguments for developers who want to embrace the mantle of frontend architect and fight to make it a first-class citizen in their next project.

Order Your Copy Now >

We Made it Onto the “Best List”

SEATTLE — Nine Washington community colleges, including Clark College in Vancouver, are on list of the 150 best in the nation.

The Aspen College Excellence Program picks its top 150 by doing a data review. It picks the schools that show the most student success, in term of persistence, completion and transfer.

The program wants to see consistent improvement over time, as well as equity in outcomes for students of all racial/ethnic and socioeconomic backgrounds.

This web development insructor is very proud of Clark’s students, administration, staff and faculty.

More >

A quick and simple image placeholder service

Have you ever needed to insert an image placeholder into a web page? Well look no further. placehold.it is an easy to use service that can provide you with placeholder images. You can specify the image dimensions, background color, image format, text and text color:

An image placeholder service

More >

UPDATE: Here’s a list from tuts+ of the top 8 image placeholder services for web designers

A Complete Guide to Flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

CSS Tricks – A Complete Guide to Flexbox >