惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
PCI Perspectives
PCI Perspectives
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Google Online Security Blog
Google Online Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
The GitHub Blog
The GitHub Blog
S
Secure Thoughts
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
WordPress大学
WordPress大学
SecWiki News
SecWiki News
B
Blog
小众软件
小众软件
Hacker News - Newest:
Hacker News - Newest: "LLM"
Webroot Blog
Webroot Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
L
LINUX DO - 热门话题
Recent Commits to openclaw:main
Recent Commits to openclaw:main
酷 壳 – CoolShell
酷 壳 – CoolShell
IT之家
IT之家
The Cloudflare Blog
Google DeepMind News
Google DeepMind News
Know Your Adversary
Know Your Adversary
Y
Y Combinator Blog
F
Fortinet All Blogs
W
WeLiveSecurity
博客园 - Franky
MongoDB | Blog
MongoDB | Blog
Last Week in AI
Last Week in AI
The Last Watchdog
The Last Watchdog
S
Schneier on Security
爱范儿
爱范儿
V
V2EX - 技术
L
LINUX DO - 最新话题
月光博客
月光博客
博客园 - 【当耐特】
Latest news
Latest news
阮一峰的网络日志
阮一峰的网络日志
博客园 - 司徒正美
U
Unit 42
Schneier on Security
Schneier on Security
E
Exploit-DB.com RSS Feed
J
Java Code Geeks
Cyberwarzone
Cyberwarzone
T
The Blog of Author Tim Ferriss
TaoSecurity Blog
TaoSecurity Blog
博客园 - 叶小钗
T
Troy Hunt's Blog
大猫的无限游戏
大猫的无限游戏
AI
AI
Security Latest
Security Latest

Matthias Ott

Hello Again, World This, Still Not for Everyone The Shape of Friction WeissKlang L1 – Punching Above Its Weight Continvoucly Morged Value Webspace Invaders To Affinity and Beyond The Mystery of Storytelling Amateurs! Echoes of Connection Linear() Is Not (That) Linear View Transitions: The Smooth Parts Adding AVIF and WebP Support to My Craft CMS Site Challenge Acoustic Room Treatment and Building Sound Panels, Part 1: Planning Play On Overshoot The HTML Output Element Listening Closely Compressed Fluid Typography The Lifeblood of the Web What Could Go Wrong? That’s My Rank Making Space CSS :is() :where() the Magic Happens Visual Regression Testing for External URLs With Playwright Jane Goodall’s Famous Last Words European Tech Alternatives 🇪🇺 Independent Type Foundry Advent Calendar – Day 24: NaN Independent Type Foundry Advent Calendar – Day 23: Typotheque Independent Type Foundry Advent Calendar – Day 22: 205TF Independent Type Foundry Advent Calendar – Day 21: HvD Fonts Independent Type Foundry Advent Calendar – Day 20: Frere-Jones Type Independent Type Foundry Advent Calendar – Day 19: Fontwerk Independent Type Foundry Advent Calendar – Day 18: Vectro Independent Type Foundry Advent Calendar – Day 17: Studio René Bieder Independent Type Foundry Advent Calendar – Day 16: R-Typography Independent Type Foundry Advent Calendar – Day 15: David Jonathan Ross Independent Type Foundry Advent Calendar – Day 14: Interval Type Independent Type Foundry Advent Calendar – Day 13: Newglyph Independent Type Foundry Advent Calendar – Day 12: Swiss Typefaces Independent Type Foundry Advent Calendar – Day 11: Sharp Type Independent Type Foundry Advent Calendar – Day 10: Colophon Foundry Independent Type Foundry Advent Calendar – Day 9: Commercial Type Independent Type Foundry Advent Calendar – Day 8: Letters from Sweden Independent Type Foundry Advent Calendar – Day 7: Lineto Independent Type Foundry Advent Calendar – Day 6: Ohno Type Company Independent Type Foundry Advent Calendar – Day 5: Milieu Grotesque Independent Type Foundry Advent Calendar – Day 4: TypeMates Independent Type Foundry Advent Calendar – Day 3: Klim Type Foundry Independent Type Foundry Advent Calendar – Day 2: Dinamo Independent Type Foundry Advent Calendar – Day 1: Grilli Type The Independent Type Foundry Advent Calendar 2022 A Conversation With ChatGPT ChatGPT, please explain websites in the words of William Shakespeare Transient Frameworks Leaving Twitter Behind Converting Your Twitter Archive to Markdown The Wrong Question It Wasn’t Written Syndicating Posts from Your Personal Website to Twitter and Mastodon Suspension None of Your Business Doing Our Part Patch That Package Brain Dump Generating Accessibility Test Results for a Whole Website With Evaluatory The CSS Cascade, a Deep Dive Updates About Updates How to Delete Your Commit History in Git Unblocking Your Writing Blocks, Part 2: I’m Not an Expert nor a “Thought Leader” Connections No Wrong Notes Better Options Design Debt Finite and Infinite Games Don’t Assume, Validate. Necessity Is the Ultimate Teacher One Egg Go Deep There Is No Secret Code Balancing Risk Blue Eyes, Brown Eyes The Shortcut Boomerang My RSS Feed Collection of Personal Websites Frequency The Illusion of Control The Decisions Journey Write It Down Nownownow Into the Personal-Website-Verse Considering the Opposite What is it for? Unlimited Bowling. Never done. We Are Team Internet. We Need to Save #NetNeutrality. Progressive Search Data loss (also) by JavaScript Books I Will Definitely Maybe Read in 2017 Starting to Write Notes
Closing the Gaps
Matthias Ott · 2016-10-24 · via Matthias Ott
Manhattan Bridge Construction 1909 Blue

Do you remember when you wrote your first line of HTML? Watching my students sweat blood while I introduce them to the basics of HTML and CSS always reminds me of my teenage self, learning the ropes of HTML back in the 1990s. Although I loved to fiddle around with my computer (which included tinkering with config.sys and autoexec.bat) my real passion was arts and drawing, so learning HTML felt like a bit of a challenge to me back then. But in the end, it turned out to be quite a lot of fun and really exiting to be able to put something out there.

Since that time, the web has grown up and with it, making websites has become increasingly complex. I am not only talking here about the wealth of development tools like APIs, libraries, frameworks, linters, pre- and post-processors, build tools, boilerplates, and generators that our industry uses today and which continue to grow in number and depth at tremendous speed. Increased complexity is not a development issue alone. Increased complexity is a phenomenon that affects all areas of creating for the web. Let me take web typography as an example.

A Few Good Friends #

Back in the 1990s, web designers only had a really limited number of fonts to choose from: Web-safe fonts, this smallest subset of system fonts that is most likely to be installed on most of the users’ machines. So the decision process usually went something like this:

Serif?
Use Times New Roman or Georgia.

Sans-serif?
Pick Arial / Helvetica, Verdana, or Tahoma.

Monospace?
Courier New.

And because the overall on-screen readability of fonts was pretty bad back then, there was another vastly popular option: Pixelfonts.

From a typographical perspective, working with such limited options was often challenging, because you had to stick to the few fonts available. But you could easily learn the constraints of the medium within no time and then get used to it.

Yahoo In 1999

Yahoo!’s website back in 1999.
This rad table layout basically uses only two (system) typefaces: Arial and Times New Roman.

Retrieved from oldweb.today

An Explosion of Possibilities #

Today however, we have hundreds of thousands of typefaces to choose from and dozens of different techniques for getting the fonts onto our websites. We can either host them on our own servers or use free or paid services like Google Fonts, Typekit or Webtype. We need to address (rendering) performance issues and find ourselves struggling with things like FOIT, FOUT, and FOFT, which is why we should be aware of the many different and ever evolving webfont loading strategies. We are able to use powerful OpenType features like ligatures and alternates, and we even enjoy proper kerning! If we want to provide the best possible user experience for all the different device types out there – which is of course always what we want to do –, we also have to consider the responsive behaviour of typography. And even the important conclusion that we need to embrace the uncertainty of the medium and the fragility of web typography as a feature – as exciting as this challenge may be – doesn’t make things easier, to be honest.

While this richness provides us with great flexibility and a variety of ways to express ourselves, it also makes it harder for beginners to learn what it takes to build a thing for the web. Compared the 1990s, the multitude of options to choose from and new things to learn is so enormous that it can be really overwhelming for the next generation of designers and developers.

But not only newcomers are having a hard time catching up with all the different techniques. Many designers and developers with decent experience see similar problems regarding their own daily work: Keeping up with the current pace of innovation is not impossible, but still a major challenge. It requires constant research while staying curious, combined with the ability to reflect on current developments to be able to pick the right tools for new projects. It’s almost a full-time job. What makes it even harder, is that many agencies and studios still don’t reserve dedicated time for the necessary research and advanced training and expect it to happen, well, magically. Which is to say: in your spare time. And ain’t nobody got time for that, right?

Web designers and developers! How much effort is needed today to keep up with the latest trends & tools? Please RT!

— Matthias Ott (@m_ott) 15. Juli 2016

So for the majority of beginners and seasoned professionals we can observe growing knowledge gaps compared to the industry leaders and a relatively small percentage that somehow manages to keep up with the pace of innovation. For the sake of the further development of the web, we need to find a way to close these gaps. On the one hand, we need to make sure that the next generation of designers and developers is ignited in the way we were, so that we continue to see the best aspiring talent choosing the web as their profession. On the other hand, in order to further raise the quality of what gets created, it is equally important that seasoned professionals don’t lose confidence in the power of the web and keep pushing at the edges of what is possible.

But how?

Education: Laying a Solid Foundation #

When we think of ways to bridge those knowledge gaps with the help of the educational system, we soon realize that trying to always teach students the newest tools would be a Sisyphean task: As soon as students are ready to use a tool in the wild, chances are that it will soon be gone. This is exactly what happened to me: I created my diploma project with Flash, for which I learned how to code in ActionScript – just to see Flash being wiped away shortly thereafter. Remember Macromedia FreeHand? It used to be our favorite tool for vector illustration works, until Adobe bought Macromedia and decided to discontinue FreeHand. Others were using Director in their projects, or Fireworks. Both discontinued. I think you get the point: Tools come and go. Tools are temporary.

But this doesn’t mean that we should jump to the conclusion that learning new tools is unnecessary. Because tools might be out of date one day, but one thing won’t: Basic concepts. Flash might be gone, but through it I learned how to code in an object-oriented programming language, I read a book about ActionScript design patterns and by this developed a basic understanding of, for example, the model-view-controller pattern. FreeHand might be a thing of the past, but through it I mastered the skill of drawing vectors which would later help me draw a font, logos, icons, and other graphics.

Almost every tool you learn shapes a basic understanding of some underlying core principle. And while tools are only the vehicle, those basic concepts are the road that guides your way. They are the foundation you will always be able to refer to when in doubt. The same is true for the basics of typography, for example. Concepts like balancing contrast, rhythm, and proportion(s), defining font sizes, line height, leading, kerning, and measure will become constant and reliable companions throughout your professional life. Because fundamental knowledge like this forms the foundation of what we create, often developed by others over the course of centuries and therefore here to stay. Basics are permanent.

So whether you are a student or a professional: Don’t hesitate to jump right into the hottest tool that the cool kids are using right now. Try to soak up as much of it as you can. But also try not to concentrate on the peculiarities and quirks of the tool too much. Instead, focus on the core functionalities and the underlying concepts. Try to extract the essence.

Practice: Creating a Learning Environment #

As mentioned earlier, the rapid advancement of our industry leads to a high need for on-the-job training for professionals as well. The times where you could learn the most necessary things for a job – also known as „to finish your studies“ – and then go out and practice your craft for the next 40 years are long gone. Yet still many agencies, especially if their roots are in advertising or editorial design, still haven’t changed their culture accordingly. It used to be that they would look for well-trained and talented young people and then let them work on different jobs just as they came along. And there was nothing wrong with that as long as the only things that changed were brought to you by the guy from the paper company with the newest coated paper products, the printer who introduced you to a new finishing technique, or the type foundry that sent you a beautiful specimen of a new typeface you could then use in one of your next projects. That is not to say that everything was easy and that there was less craftsmanship involved. To the contrary: Maybe we also lost a bit of the creative power and virtuosity of those days. But things surely were different – more predictable, more reliable, steady. And so there was less need for training your staff.

Our fast-moving times call for new approaches to how we combine working with learning. Establishing such a culture of learning is key to remaining successful when the only constant is change. In agencies, this could mean to foster the exchange of knowledge between employees and between project teams. And by that, I don’t mean setting up a Wiki and hoping for the best. A culture of knowledge exchange starts with the realization that there is no such thing as a stupid question and that sharing your knowledge, even the smallest bit, is basically a good thing. Although it might sometimes seem like a waste of time compared to other tasks – an organization where everybody has a solid understanding of the problems that are being solved, will in the end be more efficient and effective in every respect, because teams will find solutions that are more creative in nature by combining existing knowledge in unexpected ways and which tap the potential of current possibilities to a greater extent. So the primary goal should be to create an environment where information can flow freely from one person to another and thus constantly learning new things in your job becomes the norm.

The ways to achieve this will of course vary from organization to organization and they also need to fit into organizational structures and habits. For example, it can be a great idea to set up a Slack channel to collect the most valuable links and new resources. You could also schedule weekly learning meetings, where everybody contributes something valuable and explains it to the team. Collaborative design or code reviews can help bridge knowledge gaps between team members and thus be really worthwhile. All of those measures can facilitate knowledge exchange and are a first step towards a workplace where research and knowledge exchange are integral elements of the organizational culture. But to really get learning – and teaching – baked in into your organization, it needs to gain center stage.

Apprenticeships #

Daniel Mall recently gave a talk at 99u about an interesting concept that could provide just that combination of on-the-job learning and teaching: apprenticeships. An apprenticeship can basically be thought of as a replacement for the good old internship. The main idea is, that instead of just using the work power of an untrained intern as needed, an apprenticeship opens up the opportunity to teach young talent on-the-job, let them test their hypotheses, and guide them through the multitude of available options. Ultimately, an apprenticeship can be the starting point to create well-rounded professionals. It is also a way to take the responsibility seriously that comes with being part of a much larger community and, as Ivana McConnell writes in her great essay on apprenticeships in the creative industry, means to “value learning, our craft, and each other.”

So there is a lot organizations can do already to create a culture of learning that will make ideas thrive and help close the knowledge gaps in the professional field. And I am sure that we will continue to see really exciting approaches in the future. But in the end, the most important factor is the individual.

Individuals: Learning to Explore #

When it comes to how individuals keep themselves up to date, one thing certainly is a prerequisite: curiosity. Without curiosity and the spark resulting from it, nobody will walk the extra mile that is sometimes required to finish a book, explore a new technique, or acquire a new skill. But beyond that, everybody has to find a way that fits to personal habits and preferences.

Jonathan Snook, for example, shared his learning process in his post How do I learn?. He identified three phases in his process:

  1. Reading
  2. Building
  3. Writing

In the reading phase, he will read a lot and by that acquire an overview of what is new out there. The second phase is where he explores how something works by building something with it. The last step is to write about a thing which deepens the understanding even further. I experienced the same with teaching: The need to communicate how something works requires a deeper understanding and broader exploration of the edges of a topic.

Slowly but Surely #

Combining working with learning and finding a routine for exploring new ground as an individual won’t happen overnight, but it is certainly worth it. So go talk to your colleagues about how you could improve the current situation. And then learn, explore, and share your knowledge and experiences, may it be through mentoring, teaching, or writing. But also ask yourself: What are the basics that I want to build upon? Which tools do I really want to learn? What are the tools you feel the most comfortable with? Because as Bastian Allgeier put it: “If we stop moving, we die. But we don’t have to jump all the time.”

I for myself will start by sharing in my next posts what I do to stay up to date and what I hope can be a good starting point for you. But in the meantime: What do you do to stay informed? How do you learn new stuff? Does your employer offer anything that facilitates on-the-job learning? Do you have an idea that you would like to share? I’d love to hear from you – via Twitter, email, or through a follow-up post.

Let us close those gaps together.

Header image shows the Manhattan Bridge under construction, 1909.

~

44 Webmentions

8 Reposts

19 Likes

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.