My Dyslexia Makes It Hard for Me to Read Programming Code

Hey CSS-Tricksters! A lot of folks tweeted, emailed, commented and fifty-fifty courier pigeoned (OK, maybe not that) stories about their personal journeys learning spider web development after we published "The Nifty Dissever" essay. I of those stories was from Tim Smith and, it was so interesting, that we invited him to share it with the broader community. So, please help u.s.a. welcome him as he elaborates on his unique personal experience and how it feels to be in his shoes as a front-ender.

Hi folks, my name is Tim Smith

I accept Add, OCD, Bi-Polar, Dyslexia… and non to mention that I am on the Autism spectrum. This combination (autonomously from causing me to feel a lot of personal shame) makes coding very hard — especially learning how to code, which I am trying to practise. Things get mixed up in my head and announced backwards to the point that I observe it nearly impossible to focus whatever longer than 15-20 minutes at a time. Mayhap I volition expand on this in another post. Even now as I write this, I feel pulled to rate each song on YouTube Music and attempt to correct every mistake I make. And since I keep switching "write" with "right," this becomes infuriating and discouraging, to say the least.

I exercise not read well, so learning from books is the to the lowest degree effective fashion for me to learn (sorry O'Reilly). Online tutorials are OK, but I tend to sell myself short past being lazy with copy and paste for the code examples. If I force myself to hand-type the examples, I get the do good of muscle retention but drown in the words of the tutorial and eventually lose involvement birthday.

Video tutorials are my platonic learning method. There's no reading involved and no way for me to copy and paste my mode out of things. Having to finish and start the videos in order to type the lawmaking is maddening, but well worth information technology. YouTube is a great place for video tutorials if you have the patience to wade through them… which I don't.

I constitute Chris Coyier in the early on 2000s. The treasure trove of articles, guides, and videos contained here on CSS-Tricks has been a major benefit for me and actually progressed my ability to acquire lawmaking. After, I establish Wes Bos. He, also, has been a leading contributor to my web learning. Wes unlocked many of the things I struggled with, namely React and the new features of ES6.

Together, I'd say Chris and Wes are responsible for at least 80% of my commonage front end-terminate noesis. (Personal bated: Chris and Wes, you two are my heroes and undercover mentors.) Both Chris and Wes have a way of giving me the information that'south relevant to what I'k learning in a way that is fun and entertaining as well as straightforward and precise. They don't just present the code; they explain the why and history behind each topic. Wes is a piddling improve at this, but the sheer number of videos Chris has created has kept me busy for years and volition go on to into the future.

Simply writing code is another effective manner for me to learn. I like to geek-out and setup development servers for various web languages and libraries and play around. I have learned a lot near MacOS and Linux (mostly Ubuntu) while also learning the basics of many web languages and libraries: PHP (for WordPress themes), Python, React, Vue and many others. I learned to cover the command line and avoid GUIs when possible. Null confronting GUIs; I simply find the command line more precise (and just between you and me, way cooler to brag most to not-coders).

I still do use the command line — or at least I would if I still had a laptop or desktop to work on. I am actually writing this on an iPad Mini two. Nonetheless, I have institute another not bad style to write and share code without the demand to set up upwardly servers and complicated environments: CodePen. I joined an early beta way back when and it was dear at offset sight. I can now write lawmaking, share information technology and get feedback all in i place (here'due south my profile). Every time I get a fun idea or find a fun kata, I burn upward Codepen and just start coding. No tricky dev setup. There are other apps that do this but CodePen is unique considering of the social aspect and the ability to easily embed code samples on forums.

And then, that'due south a little near me. What I want to get into is how I learn HTML and CSS because it's probably somewhat like to yours, but different than how you might have gone about information technology.

Breaking into HTML

I learned HTML in a few different ways. At first, I would look at the source code of popular web sites. In the early on nineties, when I started to learn HTML many, if non most, web browsers had the power to show the source code of a website. I saw all of the tags, how they were used and the basic structure of the sites. I was able to contrary-engineer them. I had not learned CSS at the fourth dimension, and so my get-go websites were single column and very boring.

Quick aside: Without CSS, all websites are perfectly responsive and look bully on any device or screen size. Nosotros break them with CSS, then demand to fix them… ponder that a bit.

Thanks to source code, I began reading manufactures on the web and studied constantly. I plant the DreamInCode forum which serves as a forum for all code disciplines and languages — similar to StackOverflow because, like StackOverflow, the people were arrogant and rude to newbies, at to the lowest degree in my experience. Even so, I was able to see how people approached various HTML concepts and problems and this was the springboard upon which I launched my learning adventure. I received edgeless, often harsh feedback on my code examples. As hard as it is to hear difficult criticism, information technology benefitted me as it taught me the right and — fifty-fifty more than chiefly, the incorrect — manner to approach and write HTML.

Like nigh things, writing and mastering HTML is all almost trial and error. I had to create hundreds of horrible websites (if you could phone call them that) before it "clicked" for me. Merely that's better than nothing, as we've all heard information technology said before:

Just build websites!
— Chris Coyier

It was not long after that I was introduced to CSS, and and so the real journeying began…

Along came CSS

The easiest fashion for me to describe CSS is this: It's the code that makes your HTML look nice." I had to adopt a KISS mental attitude as I learned CSS considering I constitute that I was overthinking information technology. CSS is simple if y'all let information technology be. Let'south have a look:

Meet the Pen
Matter by Tim Smith (@WebRuin)
on CodePen.

This is nigh as unproblematic equally CSS is. Name your block in HTML (e.chiliad. <div class="Tim">...</div>), so target that name in a CSS file with properties to describe the block, similar colors, borders, font treatments among much, much more than.

At first, I would spend all my time trying to memorize as many CSS backdrop equally I could. I would "Alta Vista" (remember that?!) around for what sort of things others were doing with CSS and how they were doing it. This was fun and informative but merely served to misfile me to no finish. Trying to reverse-engineer CSS every bit I did with HTML only got me and then far. My retentiveness for stuff similar this is poor, at best. I had to footstep back, take a deep breath (literally and figuratively) and notice a new approach.

My thought procedure typically goes something like this:

1. Do I want the words to be blackness? If and then, exercise nothing
2. What about the groundwork color? The default white is boring so… give information technology a background color.
3. How big do I want the chemical element to be? Don't overthink this every bit far as measurement units go, because pixels are fine and, well, height and width seem pretty logical to me.

And so on. Unproblematic questions with simple holding names. My point is you lot tin can do some amazing things with simple CSS. It was that simplicity that made me want to learn and apply everything I constitute. But, at the same fourth dimension, I was so overwhelmed that I almost quit web evolution for good. It's an awkward disharmonize: the simplicity and elegance are welcoming and fun just the myriad possibilities are dizzying and impossible to retain.

What worked for me was taking an incremental arroyo to learn CSS. By starting small and slowly calculation more equally I truly learned and understood the backdrop. I institute I could have fun and be creative at a comfy pace without putting too much pressure on myself.

I won't prevarication. I am not a designer. Given a bare canvas, I will freeze or come up up with a mediocre blueprint that'south derivative of a mish-mash of other designs I like. That said, I am nifty at coding a design that someone with actual blueprint skills can put together (like this).

I brutal in love with CSS for i reason: it is the perfect balance of logic and design. A lot of coding is like this. Lawmaking can be cute, but CSS is the bee'due south knees for me!

JavaScript is hard! But I'm trying.

HTML and CSS came relatively hands to me. I stumbled a bit on CSS Grid and some of the more than advanced stuff, but it only clicked for me. Equally I alluded to earlier, I am a visual learner. Both HTML and CSS are inherently visual languages, and they give me the instant gratification my Add together needs. Both are straightforward and utilitarian to me.

In contrast, Javascript is something I find to exist very, very difficult. It is a logic-based language which would usually be my cup of tea; however, I take found it challenging to "click" with. Despite a few epiphanies while learning information technology, JavaScript seems to elude me beyond the basics. I have completed Wes Bos' JavaScript30 class along with many other tutorials. They brand sense in the moment it's beingness explained to me, but even still, when presented with a "bare canvas" so to speak, I forget nearly of the concepts and either write the same ol' stuff over and over or simply surrender.

Surprisingly, React came much more than naturally to me. I call up it has to practice with its modularity and my love for blocks, LEGOs, and puzzles. I have learned it well enough that I have been able to be artistic with it and accept started writing an app with information technology: a crowd-sourced urban bath locator. I have written and rewritten the start of the app with various Flux libraries and backend data libraries. I invariably give up only to start again, like the famous definition of insanity. I merely keep thinking I volition effigy it out and/or find someone to do the hard parts for me.

My roadblock with React is JavaScript, of class. That may not brand sense, merely remember my opinion on blocks. I know React is JavaScript. To me, though, it is quite different than vanilla JavaScript. Closures, pure functions, arrow functions, let vs. const vs. var, the enormous set of built-in methods, not to mention imported libraries, classes, and of grade, my nemesis, Big O (how I loath Big-O)… my head is spinning fifty-fifty as I write this.

I want so badly to be, at the very least, decent at Javascript so I go along trying. Hundreds of tutorials, code schools like freeCodeCamp.org, Treehouse, Khan University, and aye, even muscling through many books (I love JavaScript: The Adept Parts).

I accept no trouble learning the syntax. The hangup, I think, lays in a lack of informatics knowledge and this inability to think mathematically. Algorithms make sense in concept, but their practical application simply blows my listen.

For mental health reasons, it was necessary for me to step abroad from my web development career in 2005. I was able to get dorsum into it around 2010 when I worked for a few startups, just I never truly got dorsum in. Javascript is my Achilles heel. I was lucky to find a few jobs that were truly light on JavaScript so I could focus on HTML and CSS — the things I thought added upwardly to front-cease development — simply inevitably, I was expected to write JavaScript across bones interface enhancements and the jobs brutal autonomously. Then I either quit or was fired.

The ongoing search for work

Looking for work in recent times has been a nightmare! We now live in a world dominated by JavaScript and it seems no 1 wants a front-end developer whose strengths lie in HTML, CSS with an intermediate knowledge of Javascript — especially those without a degree in Reckoner Science. I can't even notice a job posting for this on whatever major job site.

I have had the honour of interviewing with recruiters at Facebook, Google, and Apple just I could non get past the first round of phone screening. I was asked questions that I felt accept piddling-to-nothing to do with what I understand front-end development to be. In that location were no questions about CSS all-time practices and even nothing about semantic HTML or the proper use of ARIA attributes. All they seemed to care about was Large O and efficient loops. Even interviews with smaller companies were similar this. Have services like Wix and the similar taken all the core forepart-terminate jobs away?

Despite all the challenges I have faced, I feel I accept mastered HTML and CSS and take a baseline grasp on JavaScript. I am very proud of that. While I dream of getting a job at a large visitor like Facebook, Google, or Apple tree, I really simply promise to discover a role where my HTML and CSS skills will shine and I tin gain existent-earth feel with JavaScript as a junior developer with the benefit of mentoring somewhere, similar the San Francisco Bay Area where I currently live.

We all have different learning styles and paces, so don't surrender before you accept tried every possible way to learn what you lot are trying to exercise. And, if you come with a new way, delight share and so we can all broaden our individual and collective cognition.

I hope this article has reached at least one other developer similar me! Cheers to all my predecessors. Happy coding!

constablelesellizen66.blogspot.com

Source: https://css-tricks.com/hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world/

Share this post