A workshop for codebar students: Build a portfolio or blog site | Charlotte Jackson, Front-end developer
Charlotte did a fantastic job putting this workshop together on the weekend. It was inspiring!
Charlotte did a fantastic job putting this workshop together on the weekend. It was inspiring!
Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:
It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.
This looks like a great resource for beginners looking to learn HTML and CSS.
Story of my life:
I have to confess I had no idea what a technical leader really does. I figured it out, eventually.
Seriously, this resonates a lot with what I find myself doing at Clearleft these days.
The joy of starting from scratch:
I remembered a really nice thing: how to be goofily, absurdly proud of myself for figuring something out, a kind of pride I usually reserve for my children. This is the best part of dropping back to zero. The list of things you have to master is endless. And when you get one right — even a little, tiny one — everyone notices and gives you an adult version of an extra candy in your lunchbox.
Here’s the full text of Charlotte’s fantastic short talk at the Dot York event last week. I’m so, so proud of her.
I’ve been thinking a lot about learning, teaching, mentoring, coaching …this article by Ivana McConnell from last year is packed with gold nuggets of wisdom concerning apprenticeships.
As lifelong learners, we may be reluctant to call ourselves “masters.” But that’s missing the point, and it discounts the fact that teaching is learning. We’re not there to guarantee mastery—we’re there to give our apprentices fundamentals, to foster their respect, and make journeymen (or women) out of them. Mastery will come; we just offer the tools.
I really love what Dan is doing with his apprenticeship programme—I hope we can do something like this at Clearleft.
Y’know, I think PPK might be on to something here. It’s certainly true that developers have such an eversion to solving a problem twice that some users end up paying the cost (like in the examples of progressive enhancement here).
I will be pondering upon this.
One of these days I’m going to step outside of my PHP comfort zone and actually build something in Node. One of these days. When I do, this book looks like a good place to start (and the online version is free).
Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.
You can read the whole thing for free online or buy an eBook.
There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.
Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.
In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.
Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.
Y’know, all too often we’re caught up in the latest techniques and technologies. It’s easy to forget that there are people out there trying to learn this whole web thing from scratch. That’s why I think blog posts like this are so, so important!
Based on her experience teaching CSS at Codebar, Charlotte describes how she explains margins. Sounds simple, right? But is that because we’ve internalised this kind of thing? When was the last time we really thought about the basic building blocks of making websites?
Anyway, this is by far the best explanation of margin shorthand properties that I’ve seen.
More of this kind of thing, please!
An examination of how sites like The Session are meshing with older ideas of traditional Irish music:
There is a very interesting tension at play here – one that speaks directly to the design of new technologies. On the one hand, Irish musicians appear to be enthusiastically adopting digital media to establish a common repertoire of tunes, while on the other the actual performance of these tunes in a live session is governed by a strong etiquette that emphasizes the importance of playing by ear.
There’s an accompanying paper called Supporting Traditional Music-Making: Designing for Situated Discretion (PDF).
Codebar had a very good 2015.
Of the 137 workshops run, “100 of those workshops were organised by our two busiest chapters, London and Brighton”—50 each.
I love this. I really love this. Remy absolutely nails what makes the web so great.
There’s the ubiquity:
If the viewer is using the latest technology beefy desktop computer that’s great. Equally they could view the website from a work computer, something old and locked in using a browser called IE8.
Then there’s the low barrier to entry—yes, even today:
It’s the web’s simplicity. Born out of a need to connect documents. As much as that might have changed with the latest generation of developers who might tell you that it’s hard and complex (and they’re right), at the same time it is not complicated. It’s still beautifully simple.
Anyone can do it. Anyone can publish content to the web, be it as plain text, or simple HTML formed only of <p> tags or something more elaborate and refined. The web is unabashed of it’s content. Everything and anything goes.
I might just print this out and nail it to the wall.
If you sit back for a moment, and think about just how many lives you can touch simply by publishing something, anything, to the web, it’s utterly mind blowing.
It’s okay to feel stress in response to this rapid development. It’s natural. I hate change, I hate it so so much. I like things to be consistent and for it to have it’s own place. If it doesn’t, I get stressed and my obsessive compulsive tendencies run riot in a desperate attempt to preserve order. This both benefits and hinders my work.
Chimes very nicely with the latest episode of Ctrl+Click Cast.
Adam Onishi on teaching and learning:
As web developers, with the constant change in our industry, learning becomes a necessary part of our jobs. However with the right environment I think we can make that learning experience easier and actually a fun part of what we do.
Jake describes the pivotal moment of his web awakening:
I explored the world wide web. I was amazed by the freedom of information, how anyone could publish, anyone could read. Then I found a little button labeled “View source”. That was the moment I fell in love with the web.
It all goes back to having a ZX Spectrum apparently. Pah! Luxury! I had a ZX81—one K of RAM …1K! Tell that to the young people today, and they wouldn’t believe you.
Anyway, this is a lovely little reminiscence by Jake, although I have no idea why he hasn’t published it on his own site.
I got a little verklempt reading this.
The best ARIA role is the one you don’t need to use.
This looks like a great resource for anyone setting out to learn how to make websites.
This seems like a decent endeavour:
A collaborative research project aimed at designing better tools and practices for learning web development.
This is superb!
Flexbox can be tricky to get your head around, but this exercise does a great job of walking you through each step in a fun way. I highly recommend trying all 24 levels.
Be willing to look like a dork:
Embarrassment about what others think has to be the biggest block to any learning. Embarrassment of looking silly. Embarrassment of looking stupid for asking the question everyone else is wondering about but no one is willing to make.
Chimes nicely with Charlotte’s recent piece, Be comfortable looking like an idiot.
You read a lot and like the idea of writing. You know the best way to get better at writing is to write, so write!
I completely agree with Cennydd (and Peter, and Leisa). If anyone working on a project—whether they’re a designer, developer, or anything else—isn’t considering the user experience, then what’s the point of even being there? By extension, labelling your work as “UX Design” is as redundant and pointless as labelling it “Good Design.”
But my complaint is with the label, not the activities. It’s the UX Design label that has little value for me. These activities happen in all good design: if you’re not trying to create positive experience then I don’t really understand what you are doing.
This is the best moment to write a blog post:
I just had my responsive images epiphany and I’m writing it all down before I forget everything.
Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.
Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:
Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.
She also makes this important point:
As you are doing this don’t forget to share what you know.
Every single word that Lyza has written here speaks to me so, so much.
I have no idea what I’m doing and I’m nervous about messing up, but I keep doing this week after week because it feels important.
Get out of my head, Lyza!
I felt a great swell of pride watching Charlotte give an excellent presentation at the Talk Web Design conference at Greenwich University.
This is just like a real conference call.
Trigger warning: this is just like a real conference call.
Charlotte’s opening remarks at the most recent Codebar were, by all accounts, inspiring.
I was asked to give a short talk about my journey into coding and what advice I would give to people starting out.
Before there was radar, there were acoustic mirrors along the coast of England—parabolic structures designed to funnel the distant sound of approaching aircraft.
Jo writes about hosting Codebar Brighton. I share her enthusiasm—it feels like a great honour to be able to host such a great community event.
Still a few days left to back this great project for Brighton:
Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
Rushing doesn’t improve things, it might even slow you down. Focusing on a few things and doing them well is worthwhile. Sharing what you learn—even while you’re still figuring things out—is even better.
We hired Charlotte, our first junior developer at Clearleft recently, and my job has taken on more of a teaching role. I’m really enjoying it, but I have no idea what I’m doing, and I worry that I’m doing all the wrong things.
This article looks like it has some good, sensible advice …although I should probably check to see if Charlotte agrees.
A fascinating look at how the humble password gets imbued with incredible levels of meaning.
It reminds me of something I heard Ze Frank say last year: “People fill up the cracks with intimacy.”
I’m at Disney World for a special edition of An Event Apart, so this lightning talk from Dan Williams seems appropriate to revisit.
A deeply thoughtful piece (as always) by Wilson, on the mindset needed for a sustainable way of working.
When we start with the assumption that optimizing for rapid, unbounded growth is a goal, we immediately narrow the possibility space. There are only so many choices we can make that will get us there. The same choices that made annual monoculture and the shopping mall the most efficient engines for short-term growth and profit are the same qualities that made them unsustainable in the long term.
There are more ways to scale than growth. There are more ways to deepen our impact than just reaching more people. What if we put just as much effort into scaling the impact of our work over time? Can we build digital products around sustainable systems that survive long enough to outlive us, that are purpose-built to thrive without our constant cultivation?
Alan Kay’s written remarks to a Joint Hearing of the Science Committee and the Economic and Educational and Opportunites Committee in October 1995.
I guess it goes without saying at this point, but this piece from Frank is beautiful and thought-provoking.
This part in particular touched on some things I’ve been thinking about lately:
Design’s golden calf is simplicity. Speaking as someone who sees, makes, and uses design each and every day, I am tired of simple things. Simple things are weak. They are limited. They are boring. What I truly want is clarity. Give me clear and evident things over simple things. Make me things that presume and honor my intelligence. Shun seamlessness. It is another false token. Make me things that are full of seams, because if you give me a seam and I pull the thread, I get to see how the whole world is stitched together. Give me some credit. Show me you trust me.
Bruce’s love letter to BASIC.
The closest I’ve ever come to that “a-ha!” moment I had when I first wrote something in BASIC was when I first wrote something in HTML.
This visual approach to demonstrating how CSS selectors work is really handy.
The transcript of Malarkey’s recent talk. Good thoughtful stuff.
Tom is running a Node School at 68 Middle Street on the evening of March 27th. I plan to attend and finally wrap my head around all this Node stuff.
This nifty place in Brighton is just down the street from me:
Our classes allow kids to get creative with exciting, cutting-edge technology and software.
Here’s a heartwarming tale. It starts out as a description of processing.js project for Code Club (which is already a great story) and then morphs into a description of how anyone can contribute to make a codebase better …resulting in a lovely pull request on Github.
Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.
This is the worst idea for a W3C community group ever. Come to think of it, it’s the worst idea for an idea ever.
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
Josh has been teaching HTML and CSS schoolkids. I love the pages that they’ve made. I really mean it. I genuinely think these are wonderful!
I concur with Ryan’s findings:
The best way to get better at what you do is to teach others how to do it, too.
I can empathise with Scott’s worries about fragmentation on the front-end with Saas, Styles, LESS, Compass, yada, yada, yada.
I want to share my code with everyone who writes CSS, not a subset of that group.
This is handy—a month by month list of which vegetables you should be planting right now.
What Dan said.
This makes me so happy! Matt is using Huffduffer. Specifically, Matt is using Huffduffer together with Instacast and this is how he’s doing it.
I wish to cover the entire Brighton Pavilion in Bakelite for my own amusement.
I really like these thoughts on the importance of design systems for the web. It’s not about providing a few perfect deliverables that won’t survive once they go live; it’s about designing for the unexpected, the unpredictable:
Design for every state, not the best state.
A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.
A great short talk from Clare about Code Club.
And this is why Code Club is such a great initiative.
It’s a long one, and it’s kind of meta, but if you have any interest in the idea of programming, this in-depth knowledge bomb from Bret Victor is well worth your time.
I’m going to be attending Seb’s CreativeJS and HTML5 course in Brighton on September 13th and 14th …and I strongly suspect that it’s going to be great.
Tim’s book is ready for pre-order. Looks like it’s going to be good one.
More on View Source, this time from Bruce.
The Web has thrived on people viewing source, copying and pasting, then tweaking until they get the page they want.
Stuart on the importance of View Source.
I think I might volunteer my services.
This is an excellent idea: get a whole bunch of after-school code clubs going to teach kids how to code in Scratch.
Here’s a challenge for the new year: use each month as an opportunity to try out a new web technology.
Set yourself small, achievable projects to work on and use 12412.org as a support group. We will all help to motivate each other and join in to offer help where we can.
Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.
A plea for more time.
We tend to think in 2 to 5 year scales, maybe we need to be thinking in longer time lines about our own careers and skills.
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.
Roll up, roll up! Get five nights food and lodging at a fantastic luxury horse ranch in the Rockies in March.
Oh, and myself and Aaron will be running workshops on progressive enhancement for you during that time too.
A very honest post from Meagan that I can relate to (and Jessica too, I suspect).
Naz shares his advice for up-and-coming designers …and the institutions that educate them.
A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).
You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.
I look forward to seeing Eyes Wide Shut as a series of Foursquare check-ins.
A celebration of horrendous kerning all over the internet.
An excellent zero-edit counter-proposal from Anne detailing why version numbers are unnecessary and undesirable for HTML.
A lovely idea, nicely implemented: time-conditional CSS.
Excellent! Warning labels for bad journalism for you to print off and stick on.
This looks like an excellent event: learn about programming without being a programmer.
Soon the trilogy will be complete: a documentary on urban planning sounds like the perfect way for Gary Hustwit to follow up Helvetica and Objectified.
A cute little mashup: find out what you were listening to according to Last.fm when you were posting to Twitter.
Hixie needs your help. Document examples of augmented video (or audio) such as captioned or subtitled media.
I don't agree with everything in these vignettes but they make for an good, thought-provoking read.
Since Amazon decided to require signed requests for its API, I'm going to have to use this code to keep Huffduffer and The Session working. Grrrr... cool APIs don't change.
Announced at SXSW, this is the curriculum that the Web Standards Project has been working on. Education, education, education.