#it's the CSS learning level up from neopets
Explore tagged Tumblr posts
Text
shall i lay down arms in tumblr's war against custom themes
#this is so sad i made themes back in high school#it's the CSS learning level up from neopets#but i have other outlets for front end dev and i wasn't that pleased with the theme garden of 2024 to begin with#♃
1 note
·
View note
Note
do you have any posts already or if not would you be willing to share any information about what the process of getting the website up and running was like? i'm really interested in getting a site going for some other photo/record keeping projects and i know a decent amount about website design and basic html, but not that much about the process of actually getting it online;^;
Happy to share!
To be clear, my level of coding skill began with teaching myself html for neopets and ended with cobbling together vaguely custom css for my OG personal tumblr in 2011. So in terms of the physical backend of the website… it’s just Squarespace.
Getting it online is pretty simple if you’re not writing the code yourself, but there’s some stuff you’ve got to figure out first: what the name of your site will be, what url (domain) you want it to have, where to buy it, and where you want to host the site (like squarespace or Wordpress).
Once you’ve got the details sorted, you get an account on the hosting platform you want to use, and then set up the site and connect a domain. Squarespace lets you buy domains directly through their interface, but it tends to be more expensive than buying it directly from a registrar company like Namecheap or GoDaddy. If you’re comfortable teaching yourself to navigate basic internet stuff via Google, it isn’t too hard to learn how to tell a domain you bought elsewhere to point at your site. (Everything I’ve done to run all my websites has been self-taught via Google and Reddit, with the assistance of some very patient techie friends).
Once you’ve got the crunchy stuff set up, you build the site! I use Squarespace preferentially over Wordpress because a) I like the aesthetic of the templates and b) it’s what I know how to use. Wordpress is cheaper but trying to navigate the visual layout of the site annoyed me to the point it wasn’t fun anymore, so I personally will pay for ease of access on layout and design stuff.
To build the site, I thought through what I wanted the user experience to be, and how I wanted people to navigate, and I built with that in mind. For the photo repository, my goal was very clean visuals that really showcased the photos, and I wanted people to be able to navigate the taxonomy both visually and from a list. Honestly, just play with it, and try different things until you find a layout you like.
Then you try to break the site you’ve built. Because there will be errors and bugs and as much as I do appreciate it when y’all send me problems you encounter, I’d rather fix it first. I always check a new site on a desktop computer, tablet, and phone, and then ask a couple friends running different operating systems to do the same. That’s a good time to get feedback on things like layout and font size and readability, too.
The biggest time sink for the project has actually just been the photo management. I had to figure out how I needed things organized to build the site, and then taking the time to upload them all is the major rate-limiting factor.
You can launch the site so it’s “online” at any point during this process after you’ve paid for hosting and the domain and set it up, but I tend to wait until I’ve built the site and beta tested it sufficiently.
I’m happy to answer other questions, I’m just not sure what else would be helpful!
38 notes
·
View notes
Text
Lost files and the future of my online creative endeavors
Morning, gamers. Yesterday I was devastated to learn that over 20 years worth of my art projects, music projects, YouTube videos, writing, journaling, photos, videos, and more, were lost to a hard drive malfunction. I am in the process of finding out if I can restore even some of the files, but until then, we have to assume they’re gone forever.
A good handful of those files were works in progress for things like upcoming music albums and YouTube videos. This is an enormous setback for me as the projects I was so excited to share in the near future now have to be scrapped completely or I must start over from scratch. It’s incredibly frustrating as I put in a lot of time and effort into these projects and some of them were near completion.
So what does this mean for me, for my online presence, and for future creative projects?
Well, on a personal level, this experience was a huge wake up call for me. I need to learn to back up my files and not rely solely on physical hardware to store things on. I was born in the 90’s, so suffice to say I’m a little old school when it comes to computers. I don’t enjoy using or paying for cloud services and I don’t trust that they’ll be able to keep my numerous files safe and secure. But I might just have to get over myself and use a cloud service to back up my files so that this doesn’t happen again in the future.
On an artistic level, this experience made me want to double down and work even harder to establish myself as an online artist and creator. No more switching back and forth between projects, leaving most of them unfinished. I want them to be finished and ready to be shared with the World Wide Web, where they will (hopefully) be preserved for as long as the internet continues to exist.
I will be more active online than ever before, posting WIPs and sharing my creative process with you guys. I’ll start posting on YouTube again, and I’m even considering making a Neocities website as a sort of headquarters for all my projects (all that html and css coding I learned from Neopets will finally be put to good use!)
Though this has been a devastating blow to my creative journey, this has also given me a chance to start over. I have been slacking in my creative works over the last several years and I think this was the push I needed to start taking it more seriously.
So expect to see a lot more of me in the upcoming years. Because I didn’t come all this way in my creative journey just to give up now.
0 notes
Text
Friends?
So I just re-used an old tumblr blog to pen down my thoughts on depression. Actually, I am not sure if I even have depression. Would it be more comforting to be diagnosed with depression rather than to solve an unknown problem?
So what is depressionkat? Maybe using the moniker depressionkat is bad, because that is self-labelling myself as depressed, and of course when you believe you are depressed, you start acting depressed. But whatever.
depressionkat (small d) is a cat who is kinda depressed. How did it even start? As a wee little kitten, depressionkat would lie in bed, pondering about the meaning of life. If all we ever feel is sadness and suffering, surely there must be a purpose. Would depressionkat be able to change the world?
But depressionkat felt despondent about that hope. depressionkat felt sad and lonely most of the time. It didn’t help that momma and popa cat weren’t around very often, moma cat was busy working while popa cat didn’t even live in the same home... that is another story for another day.
In school, depressionkat envied the others who seemed cheerful and smiley and pretty and had a lot of friends and had many wonderful hobbies. Of course ruminating about all of that did not help. depressionkat felt inferior in every aspect. Whenever depressionkat walked up to the mirror, depressionkat would think, why do I look so terrible with little shifty eyes and length awkward arms and rough fur everywhere, I don’t look like a proper cat, I don’t think anyone would want me. Sometimes the thoughts got so bad that depressionkat just cried, whether it stemmed from poor grades or feeling ugly or anything at all. It caused the class to call her ‘crybaby’.
It’s not like depressionkat had no friends, depressionkat started a blog, a comic, and a storybook with a few of them, writing/drawing and passing them around class. It was one of the only times depressionkat felt that she truly felt at peace and belonged with the rest of them. She loved it when the classmates laughed and smiled and asked for more sequels and continuations. But that didn’t help her to feel that they were close friends at all. There were the times where there were birthday parties and she wasn’t invited. There were the times that the teacher orders the kids to line up in twos and she had no partner. There were the times where she didn’t know what to say exactly to make friends. There were the times she was sick and no one messaged her to ask how are you. Those times stung badly and again depressionkat was reminded that she had no true friend to stick with. The world is a lonely place to be in.
Luckily, depressionkat was hardworking and fortunate enough to be in a family with adequate financial resources. The numerous tuitions and ‘learning camps’ and ‘enrichment’ helped depressionkat to adopt positive study habits and discipline. Even though depressionkat felt sad most of the time, she told herself to stop being sad or angry. Hence her results were pretty good, while not the best, it was always among the upper percentile. At least she was smart enough.
To be fair, depressionkat wasn’t always sad. The times punctuated with happiness included: going over to the neighbours’ and playing video games, reading books, drawing and talking to self about a fantasy world, writing guides for Pokemon, neopets or any other online games depressionkat chanced upon. All these activities passed the time, allowing her to tide over the day and forgetting about sadness for a moment. The internet was a safe place, where no one could know how ugly or lonely she was in real life. Plus she felt proficient in using computers, as there was this class in primary school where the teacher would instruct the kids on how to use certain programs, and depressionkat would be one of the first few to finish the task at hand.
When depressionkat was moving on to the next phase of education, she vowed that she had to become a new version of herself. The old depressionkat was gone. The new depressionkat was going to be popular, pretty, and smart. So she avoided going to the secondary school where most of her primary school friends had gone to, and went into one where everyone else was new. It was going to be a new start.
Even though depressionkat had more friends, she still felt horrible. It was not what she had expected. Most of the times spent together was so routine and boring - just grabbing some Burger King, Starbucks or 7-11 Mashed Potatoes and Slurpee. Where were the sleepovers and actual fun activities, the things she saw on high-school movies? I guess it was ok, but I wish it could be better. I still felt the tinge of loneliness whenever the teacher asks us to line up in pairs, because the cliques tend to be in even numbers, I seemed to be the odd one out... not sure who to pair with.
But overall it was better. She bonded with her new-found friends over nerdy things like anime, coding on blogskins.com, and of course blogging on blogger.com. The one thing she remembered fondly was the times rushing home from school to grind on maplestory with one of her friends, playing until the wee hours of night. In a span of one month of intense playing, she managed to level her character to 107. She even managed to get a certificate for high level of computer proficiency, as well as code Flash sites and MINDSTORM robots. That is so.. nerdy.
School was still pretty easy (ie. other than homework, there was still time to pursue mundane hobbies/time-wasting activities) so depressionkat managed to enter into a class with triple Science and Additional Mathematics. It was a bit sad because she had barely any old friends in her new class, but she re-assured herself that it was gonna be ok.
That was when her life began to change drastically. She found an online community where lots of ah-lians and ah-bengs resided. Feeling lonely and craving for excitement in her nerdy life, she reached out to them and met up to play in the arcades and hang out, go to clubs and smoke. She quit her ‘nerdy cca’. And a lot of bad things happened then.
There was this time where she was sending out a micro-tweetlike-message on the site. Suddenly she was meeting up some guy, who was her then ‘stead’s friend, at his place. It was her first time. His home was filled with foreign people like his aunties and what not. She didn’t know what to do. He offered her some respite in his room so she obliged.
And then the bad thing happened. A game of ‘truth or dare’. The dare was... taking out of clothes. I don’t remember much of it, except intense crying and begging to let me out. Eventually the guy relented and I fled the block, ran to the bus-stop and continued crying, texting my ‘stead’ about what had just happened. My ‘stead’s gang walloped the guy (who was also part of their gang) for the gang no-no of ‘stealing yo girl’.
That wasn’t the end of the drama and the bad company. But she felt popular. She felt wanted. She felt pretty with a little eyeliner on. She loved drinking because she felt good at it. There was the high and excitement in the life that she had craved. There was all the typical girl drama of getting boys, cheating on boys, getting found out, losing friends over getting found out, being sad and crying for days on end on the floor, wanting the boy back.
At this point, depressionkat’s grades plummeted down and she almost could not be promoted, but miraculously scraped by. It was a harsh wakeup call. At this point depressionkat’s looks also started to become worse, the acne had flared up due to stress and aggravation from a malicious facial company. Her scalp became so unbearably oily. Stop being depressed over boys, your ‘O’ levels are next year and you’re failing almost everything other than English. No more boys, no more social media, just study. The daily routine became something like this: wake up and attend school plus extra classes from 6am to 4pm. Go for tuition from 6pm to 8pm. Do homework from 9 to 11 or even 12/1am.
The efforts paid off eventually and depressionkat’s grades improved so much, that she got a ‘Most Improved!’ award from the school :’) She could go anywhere she wanted. What did she want?
Perhaps writing? Maybe journalism. She loved writing so much (as you can tell from this really long post).
Perhaps design? She loved drawing, and more so she discovered she loved digital design from the photoshop and html/css she did for school and her own personal hobbies.
With that regard, depressionkat’s goals was to enter a course for Mass Communication. She knew that course was perfect, she could write eloquently, she could dabble in web-design and collateral design, and maybe even DJ (not the remixing kind, but the ones in the radio station!)
But depressionkat soon got intrigued by psychology. Having such a (self-proclaimed) depressing past, she wanted to know what to do to get better. So she enrolled in psychology instead.
Bad move.
(I will detail about this in a future post!)
3 notes
·
View notes
Text
How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)
About The Author
Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.
As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”
This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.
Understanding The Raw Materials
Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.
I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:
“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”
— Kyle Thayer
By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.
What About “Low Code”?
Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)
We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.
That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.
Where To Start?
There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.
Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.
The Terminal: An Essential Tool
The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.
The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.
Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.
Regular Expressions
A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:
If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.
If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.
Here are some basic terminal commands* to help you getting started:
cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.
ls lists the files and folders in your current folder.
pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.
mkdir and a folder name will create a folder in your working directory.
using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.
Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.
Note: The following will work on the Windows command line (cmd):
cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).
The more modern Windows command line (Windows PowerShell) supports all of them:
cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.
For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.
Mass-File Management
You can manipulate files and folders en masse via the terminal — here are a few ideas:
You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!
You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.
Create 36 folders on your computer with a single line of code! (Large preview)
Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.
Scripting And Maintenance
Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:
criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done
What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.
There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.
Advanced Tips And Tricks
Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.
But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)
If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.
If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:
Oh My ZSH
zsh-autosuggestions
zsh-syntax-highlighting
z-jump-around
Choosing A Text Editor
There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.
Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.
VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.
All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.
Editing With Multiple Cursors
Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!
This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.
Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)
Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.
[embedded content]
Using a text editor to quickly manipulate lots of text in Sublime Text (short video).
Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.
We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.
You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.
Which Code Editor Should I Use?
I’m a designer — so of course, my answer is “it depends”.
If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.
If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.
Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.
Conclusion, And What’s Next?
In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.
Anything Amiss?
There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.
(mb, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
Via http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/
source https://scpie.weebly.com/blog/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1
0 notes
Text
How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)
About The Author
Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.
As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”
This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.
Understanding The Raw Materials
Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.
I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:
“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”
— Kyle Thayer
By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.
What About “Low Code”?
Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)
We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.
That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.
Where To Start?
There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.
Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.
The Terminal: An Essential Tool
The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.
The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.
Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.
Regular Expressions
A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:
If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.
If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.
Here are some basic terminal commands* to help you getting started:
cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.
ls lists the files and folders in your current folder.
pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.
mkdir and a folder name will create a folder in your working directory.
using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.
Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.
Note: The following will work on the Windows command line (cmd):
cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).
The more modern Windows command line (Windows PowerShell) supports all of them:
cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.
For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.
Mass-File Management
You can manipulate files and folders en masse via the terminal — here are a few ideas:
You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!
You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.
Create 36 folders on your computer with a single line of code! (Large preview)
Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.
Scripting And Maintenance
Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:
criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done
What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.
There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.
Advanced Tips And Tricks
Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.
But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)
If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.
If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:
Oh My ZSH
zsh-autosuggestions
zsh-syntax-highlighting
z-jump-around
Choosing A Text Editor
There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.
Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.
VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.
All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.
Editing With Multiple Cursors
Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!
This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.
Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)
Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.
[embedded content]
Using a text editor to quickly manipulate lots of text in Sublime Text (short video).
Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.
We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.
You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.
Which Code Editor Should I Use?
I’m a designer — so of course, my answer is “it depends”.
If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.
If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.
Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.
Conclusion, And What’s Next?
In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.
Anything Amiss?
There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.
(mb, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/ source https://scpie1.blogspot.com/2020/03/how-should-designers-learn-to-code.html
0 notes
Text
How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)
About The Author
Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.
As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”
This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.
Understanding The Raw Materials
Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.
I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:
“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”
— Kyle Thayer
By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.
What About “Low Code”?
Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)
We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.
That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.
Where To Start?
There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.
Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.
The Terminal: An Essential Tool
The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.
The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.
Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.
Regular Expressions
A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:
If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.
If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.
Here are some basic terminal commands* to help you getting started:
cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.
ls lists the files and folders in your current folder.
pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.
mkdir and a folder name will create a folder in your working directory.
using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.
Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.
Note: The following will work on the Windows command line (cmd):
cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).
The more modern Windows command line (Windows PowerShell) supports all of them:
cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.
For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.
Mass-File Management
You can manipulate files and folders en masse via the terminal — here are a few ideas:
You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!
You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.
Create 36 folders on your computer with a single line of code! (Large preview)
Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.
Scripting And Maintenance
Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:
criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done
What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.
There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.
Advanced Tips And Tricks
Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.
But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)
If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.
If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:
Oh My ZSH
zsh-autosuggestions
zsh-syntax-highlighting
z-jump-around
Choosing A Text Editor
There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.
Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.
VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.
All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.
Editing With Multiple Cursors
Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!
This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.
Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)
Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.
[embedded content]
Using a text editor to quickly manipulate lots of text in Sublime Text (short video).
Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.
We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.
You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.
Which Code Editor Should I Use?
I’m a designer — so of course, my answer is “it depends”.
If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.
If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.
Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.
Conclusion, And What’s Next?
In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.
Anything Amiss?
There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.
(mb, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/ source https://scpie.tumblr.com/post/613013830782599168
0 notes
Text
How Should Designers Learn To Code? The Terminal And Text Editors (Part 1)
About The Author
Paul Hanaoka is a Design Manager at Liferay, based in the suburbs of Los Angeles, and serving the North American teams. His passion is at the intersection of … More about Paul …
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will highlight different opportunities for their everyday application. In this first part of the series, we’ll take a look at getting comfortable with the command line and text editors.
As a designer with many years of experience, I often encourage my colleagues and reports to pick up some coding skills. While many are open to the idea, others balk at the notion. I usually hear some variation of “I didn’t study design to become a developer.” Although this is a valid concern, I’d like to emphasize two points: a better understanding of the materials usually leads to better outcomes, and there is an important distinction between “coding” and “software engineering.”
This two-part series of articles should be useful for any designers out there who’d like to gain also some coding skills.
Understanding The Raw Materials
Contrary to what some may think, design isn’t about creating beautiful mockups, it’s about delivering an intuitive, functional experience to the end user. That simply can’t be done without an understanding of the building blocks of a solution. An architect isn’t going to be very good at her job if she doesn’t understand the materials her plans demand and a designer isn’t going to be very good if he doesn’t understand the materials that make his designs come to life — the code. Experience with coding helps designers understand what’s possible and what’s not and whether or not their designs will be able to effectively perform their desired functions.
I also reassure my colleagues that knowledge of coding doesn’t mean one has to become an engineer. The two refer to different, though related, skill sets. As Kyle Thayer, a PhD candidate at the University of Washington recently wrote, the field of computer science (or engineering) is about giving students “an overview of the scientific field of computing”:
“The purpose of a Computer Science degree is to give students an overview of the scientific field of computing. While this includes some programming, programming is done primarily for the purpose of learning about other areas (e.g., operating systems, algorithms, machine learning, human-computer interaction). A CS degree is a good first step into the academic field of computer science.”
— Kyle Thayer
By contrast, coding simply means becoming familiar enough with a given programming language to complete a task. Asking someone to learn basic HTML or JavaScript does not necessitate their becoming a full-stack software architect. Despite what some might think, forking a repo and copy/pasting Stack Overflow answers in does not make you a software engineer — but it can increase the value you bring as a designer to a product development team.
What About “Low Code”?
Some may say that we’re entering a low code future where designers (and developers) are able to build applications through drag-and-drop functionality and a GUI (graphical user interface). So taking the time to learn a programming language isn’t “worth it.” The emergence of tools like Webflow, Modulz, FramerX, UXPin, etc., seems to support this line of reasoning. And this can be very true for many applications — it’s easier than ever to create a site or app without a single line of code. However, if you don’t understand the underlying principles, you will be capping the value you can deliver with a low code application.
Modulz, Studio.Design, FramerX, and other apps — there’s still a lot of code in there… (Large preview)
We’re also not yet at the point where you can build enterprise-scale applications with low code platforms. As designers we have to work in the world we live in, not the one we imagine is coming.
That being said, everyone brings a unique blend of skills to the table. Knowledge of code is not an absolute necessity and it should just be encouraged, not required.
Where To Start?
There is an endless amount of tools, languages, schools, guides, and other resources available for anyone who has access to the internet — so where to begin? An important disclaimer — I am by no means an expert, or anything close to a software engineer — and the following are insights from my personal experience, not a guaranteed path to success.
Many of the designers/developers I know have usually started hacking HTML and CSS templates on sites like MySpace, Geocities, Tumblr, Neopets, or others. Now that I have sufficiently dated myself, for anyone starting out today, I would recommend beginning in your friendly command-line interface (CLI) shell.
The Terminal: An Essential Tool
The go-to application for Hollywood directors whenever there’s a computer hacker on the screen, the terminal is simply an interface that allows you to execute actions via a text input rather than the graphical user interface (GUI) that most people are accustomed to. I’ll let real developers explain the intricacies and technical how-to, but for our purposes it’s good enough to know that familiarizing yourself with the CLI is beneficial for a number of reasons.
The terminal gives you access to your computer’s file and folder structure — the same way that you click through Finder or Explorer, you navigate using your keyboard in the terminal. It definitely takes some time getting used to, but developing your mental model in this area is foundational to working in code.
Like a lot of designers, I am using the macOS environment (formerly known as OS X), but the following applies to other *nix operating systems (LinUX, Unix), and also to Windows PowerShell. While there is a lot of overlap between different modern operating systems, there are some differences that I will do my best to highlight.
Regular Expressions
A key feature in a CLI is the ability to use regular expressions (regex) in your commands. Think of regex as boolean search operations (using quotation marks to search for exact phrases or the minus sign to exclude words) on steroids — they allow you to define a pattern in a string of text so that you can perform some action on the output. Here are some real-world examples:
If you have a long list of phone numbers in a variety of formats, you could define a script that would give you a consistent output based on a regular expression — e.g.: (###) ###-#### for the U.S. phone numbers format.
If you want to quickly rename a group of files to a specific case — from kebab-case to CamelCase or anything in between.
Here are some basic terminal commands* to help you getting started:
cd stands for “Change Directory”, type this and then a file or a folder path to go — note that you can type a folder name but it needs to be inside your current folder to go to it.
ls lists the files and folders in your current folder.
pwd stands for “Print Working Directory” — this will list out where you currently are in your computer.
mkdir and a folder name will create a folder in your working directory.
using cd with .. takes you one level up — if you’re in /users/username/documents/2019 and you enter cd ../.. you’ll end up in /users/username.
Bonus tip — hitting the Tab key will autocomplete as you type a folder/file path.
Note: The following will work on the Windows command line (cmd):
cd, cd .., mkdir, Tab key for path autocomplete (ls and pwd won’t work).
The more modern Windows command line (Windows PowerShell) supports all of them:
cd, cd .., ls, pwd, mkdir, and Tab for path autocomplete.
For a complete list of commands available in PowerShell, check this Microsoft’ Help page “Using Familiar Command Names”.
Mass-File Management
You can manipulate files and folders en masse via the terminal — here are a few ideas:
You can create three years of folders with subfolders for each month in a single command — using mkdir -p and {list-of-years}/{list-of-months} will create folders for each year with subfolders for each month. Use your imagination, I’m sure you can put this to good use!
You can quickly clean up your desktop by using mv Screen\ Shot* Screenshots — this will move all of your files that start with “Screen Shot” to a folder named “Screenshots”.
Create 36 folders on your computer with a single line of code! (Large preview)
Note: These two examples will most likely only work in *nix environments — but the theory still applies. And Windows PowerShell is also a very powerful command line tool, you just need to learn its features and specific commands.
Scripting And Maintenance
Now that we have a glimpse into the power of regular expressions and the options available in the terminal we can start combining those things into scripts. One very simple, yet powerful and commonly used script is Mike G’s file renamer:
criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done
What this script allows you to do, is define the scope (criteria), define what you’d like to change (re_match), and what you’d like to change it to (replace) — and then execute it.
There are countless other scripts that you can create beyond creating and renaming files — Vlad’s Batch Resizing script is an excellent example of the time-saving capabilities that you can create using bash scripts.
Advanced Tips And Tricks
Something I have found over the years is that regularly resetting my computer and reinstalling the operating system helps it stay relatively clutter-free and prevents the slowdowns everyone experiences after years of digital detritus that accumulates on harddrives. For many, the prospect of wiping a computer and re-setting everything back at best sounds like a few days of work, and at worst an impossible nightmare that you may never recover from.
But it doesn’t have to be — by using a few command-line tools, once you’ve backed up, wiped, and reinstalled your OS, you can install not only your list of favorite apps, but also fonts in a matter of minutes using Homebrew. (Homebrew is for Mac and LinUX only. For Windows, try Chocolatey which is a solid alternative.)
If you’re interested — we’ve created an easy-to-follow setup guide to get your computer in good shape for most development. Our guide is for macOS, but Owen Williams has written a solid guide for Windows as well.
If you don’t have the time for Wes’ entire series of tutorials about the command line — at the very least I highly recommend the following stack:
Oh My ZSH
zsh-autosuggestions
zsh-syntax-highlighting
z-jump-around
Choosing A Text Editor
There are many options when it comes to choosing a code editor — Sublime Text and VS Code (Visual Studio Code) are the two I have the most experience with and am currently using.
Sublime Text was one of the earlier text editors that became popular with front-end developers — it was the gold standard up until a few years ago. Features like multiple cursors, a powerful package manager, and highly customizable shortcuts that allowed you to quickly navigate in and between files and folders. Not to mention it was an incredibly lightweight and fast application which made it an easy choice.
VS Code (Visual Studio Code) came on the scene around 2015, it took a while for people to switch from Atom and Sublime, but VS Code has established itself as many developers’ favorite editor. In addition to pretty much all of Sublime’s features, VS Code differentiated itself with a built-in terminal and tight integration with Git. In addition, Visual Studio Code has a rich plugin ecosystem that allows you to extend and customize your environment to your heart’s delight.
All that is to say — you don’t need to be a developer to appreciate the features of a good code editor. I have found many uses for it in my daily work; two, in particular, are the ability to use multiple cursors, and using regex to find-and-replace text across folders of files. Let’s take a closer look at both.
Editing With Multiple Cursors
Picture your typical word processor — that blinking vertical line that shows where the text you’re entering will go? Now picture the ability to add more than one cursor to this window so that whatever you type will appear wherever there is a cursor!
This might not be blowing your mind just yet — so here’s an example that shows a few ways that an advanced text editor can help you create everyday efficiencies in your workflow.
Mass-editing in a text editor is much faster and more intuitive than in a spreadsheet. (Large preview)
Here we have a list of names that we need to convert into email addresses — we’d also like to make them all lowercase and then sort them alphabetically. This can be done with a few keystrokes.
[embedded content]
Using a text editor to quickly manipulate lots of text in Sublime Text (short video).
Once you paste the list in, Cmd + Shift + P brings up the Command Palette (fancy term for a searchable menu that gives you all the available functionalities). You can basically type in this menu what you want to do, pretty much anything you can do to text is available here. If it’s not, there’s likely a plugin or an extension that you can find.
We’re able to change the case and sort the lines in a matter of seconds — then pressing Ctrl + Shift + arrow keys adds cursors, then whatever we type gets added to every line — in this case, we’re turning the names into email addresses, but your wild imagination could find myriad other ways to use this.
You might be saying — well I can do this in Excel or Google Sheets, which is true, but I have found that it is a lot quicker to handle these types of things in a text editor. You avoid having to write formulas and select things with a mouse.
Which Code Editor Should I Use?
I’m a designer — so of course, my answer is “it depends”.
If you’re new to these concepts, I would recommend getting a free trial of Sublime — it continues to be a very lightweight app and does not consume too many system resources. You can customize Sublime’s key bindings (fancy word for hotkeys) and extend its built-in functionality with plugins.
If you’ve been using Sublime, Atom, or another editor — I’d recommend checking out VS Code as well. The team at Microsoft has really done an excellent job making it a powerful, yet easy-to-use text editor.
Personally, I use both editors — Sublime is lightning quick and opens in a fraction of a second allowing me to easily paste and manipulate text. But when I want to get some more serious work done, I use VS Code. It’s difficult to top the all-in-one package that VS Code provides — a vibrant plugin and extension ecosystem, powerful command palette, and hyper-customizable interface means you can really make it your own. Not to mention the fact that Microsoft is very incentivized to ensure that it’s a first-class experience for developer productivity.
Conclusion, And What’s Next?
In this first article, you will have learned the basics of the terminal, a few productivity hacks to get you started, and should have a better idea of what code editor to choose. In the next part, we’ll continue with the topics of version control, HTML and CSS, and an introduction to engineering principles.
Anything Amiss?
There’s a good chance that something in this post was obscure, obtuse, and/or obsolete and I’d love the opportunity to make it better! Please leave a comment below, DM me, or @mention me on Twitter so I can improve.
(mb, yk, il)
Website Design & SEO Delray Beach by DBL07.co
Delray Beach SEO
source http://www.scpie.org/how-should-designers-learn-to-code-the-terminal-and-text-editors-part-1/
0 notes
Text
What It’s Like to Be a Female Coder in the Male-Dominated Tech World
http://fashion-trendin.com/what-its-like-to-be-a-female-coder-in-the-male-dominated-tech-world/
What It’s Like to Be a Female Coder in the Male-Dominated Tech World
In partnership with Olay.
The recent conversations around gender disparities in the workforce have focused on a variety of things: pay, mobility, respect. But woven through all of those things is culture. Cultural norms shape professional environments on visible and invisible levels, and shifting that narrative takes time, energy and resistance to the status quo. This is especially true in male- and white-dominated industries, where tradition and legacy still play a huge role in how companies grow and change.
In a four-part series with Olay, Man Repeller will speak with six different women who work in primarily male-dominated fields to learn more about how that change is happening — and what it’s like to be in the middle of it. Below, meet Kirsten Koa, Software Engineer at Niantic, Inc., the software development company behind Pokémon GO.
An Intro to the World of Coding (and Video Games)
I’m a software engineer. Part of my job is writing code, but there are a lot of other aspects, like trying to architect the code that you’re writing. You have to plan ahead on how you want to structure the code before you actually dive in and write it, or else you can just get into a huge mess. There’s also a lot of collaborating with other people across disciplines (product, design, art, marketing, etc.) to figure out what we are going to build and then actually working together to build it.
The main reason I got into coding is because of video games. When I was a kid, I would play video games with my sisters or my cousins, sometimes with my dad. I loved playing Mario Party, Smash Brothers, Pokémon (it’s really cool to be able to work on a video game franchise like Pokémon that I grew up loving). In middle school, I was really into Neopets, which was my first introduction to coding because you could code in HTML and CSS to make your profile look better.
Actually, this is a funny story: I kind of got an intro to coding through Neopets. In high school, I knew you had to code to make video games, but that was basically all I knew about it, so I went to the library and I checked out C++ For Dummies. I had no idea what C++ was except that it was some programming language. I started reading it and was like, Okay, so you write this code to do a loop or something — where do I write it? Then I was like, If I write it in a text document, will the code actually do something? So then I tried writing it in a text document and nothing happened. I was like, “Okay, well obviously there’s more to this that I don’t understand.”
My high school didn’t have AP computer science, so I didn’t really get to try software engineering or coding during high school. But when I applied to colleges, I thought, This is something I want to try again even though I got nowhere with it before, and luckily I ended up falling in love with it in college.
On Discouragement and What Keeps Her Going
I think a lot of women don’t see themselves as software engineers while growing up. I wanted to study computer science or programming because of video games, but I think video games are mostly marketed as a boy thing. I usually play video games with my guy friends and not my female friends. But software engineering and computer science is way more than video games. Now, there’s more visibility into that, so hopefully it’s getting better.
I also think having negative experiences while working could really discourage people from continuing in the field. I used to tutor an Intro to Java class in college, and I had students say to me, “Oh, you actually know what you’re talking about,” or, “Wow, you’re actually really helpful.”
I was really happy to be able to help them, and at the time, I didn’t think anything of it. I was just like, Oh, they’re just surprised that a tutor was able to help them with their problem or something. But looking back, I feel like maybe it’s because they didn’t expect me to actually know what I was talking about as a woman, even though I was hired to be a tutor for that class.
So I’ve had some experiences like that, or with someone else taking credit for something I did (in that particular case, I talked to a manager about it). But those were actually pretty small pieces of my overall experience. I made a lot of friends in my computer science program and we were all taking these classes together, struggling to learn these concepts together. I also had a few friends who were older than me who I met through tutoring — they were upperclassmen when I was a sophomore or freshman. I really looked up to them and they were all really encouraging and inspiring. They were doing internships, working at Google, working at Facebook, doing all these really cool things.
I also have a really good friend, her name is Brina Lee, who was the first female software engineer at Instagram. We went to college together and tutored for the same professor. She’s a few years older than I am, and has been a really great friend and a role model in software engineering — but also, just in general. She encouraged me to apply for the Facebook Grace Hopper Scholarship (Grace Hopper is a conference for women in computing). She encouraged me to apply for the Out in Tech Scholarship, a conference for LGBTQ students. And she’s always available to help me.
On Loving Her Job
I think the thing I love the most about my job right now is being able to build things that make people happy. Right now I’m working on Pokémon Go, which has a lot of passionate players. We just came out with the social and trading features; I was the tech lead on the Pokémon GO side, and implementing these features was a huge cross-functional team effort. We spent a lot of time iterating on what we wanted to build to help players have fun playing with their friends, and also to help them make new friends.
When the feature came out, the reception was so positive and players were so excited that it made me really happy. All the hard work was worth it. There’s a lot more that I want to do to improve the feature, and we’re working on that now, but I think seeing how my work positively affects other people is really the best part.
The Advice That Helped Her Through Her Early College Career
When I started in college as a Computer Science major, I basically only had my Neopets programming experience. During my Intro to Computer Science class, I went to all the lectures and read the book, but then I took my first midterm and I got a C on it. Coming from high school where I was almost a straight-A student, I was like, “Oh my God! This is my major! What am I doing?! How can I get a C? I want to be good at this!”
The professor that I had for my intro classes was really great and always gave awesome advice. One of his first pieces of advice was to make friends with people in the same major and form study groups, so a group of people around me formed a study group together. By the end of the quarter I was able to bring my grade up back to an A.
I had similar experiences with other classes as well; it was a lot of work to learn the material. It was also hard to not feel discouraged because people come into college with different levels of programming experience. I had pretty much zero experience, and some people had already gotten internships or had AP computer science at school. But I decided to do my best.
Another great piece of advice that same teacher gave was to get an internship, to get real world experience — even if you get rejected 500 times because you’re a freshman and you don’t know that much yet. “You have to get rejected,” he said. “You’ll get rejected. But just keep applying, and you never know, maybe someone will say yes to you.” I really took that to heart and applied for all the things.
On the Challenges of Being One of a Few Women in Software Engineering
Most of my experiences have been very positive, and I’ve met a lot of cool and nice people. I’ve worked on many teams where I was the only woman, and usually, it wasn’t really a problem. There were a few instances early on in my career where I heard sexist remarks (like, “I could never have a female manager”), or where I asked for help on a difficult project and it was dismissed as an easy problem, or it was assumed that I was doing something wrong — only to later have that person admit I was right, or that it was hard to solve.
Because of those experiences, I try to be mindful when people ask me questions or need help. I don’t know everything, and I don’t have the answer to everything. Even now that I’ve been out of college for four years, there’s still so much to learn. If someone is asking for help, I try to come at it with an open mind and see if we can solve the problem together.
Those experiences also taught me the importance of looking for a good group of people, a good team, while interviewing. It’s really important to work well with your coworkers, but also, I love when you really like your coworkers, because then it makes going to work fun. You never feel like you need to one-up anyone. It makes work so much better, less stressful and happier.
When I started working full-time at Google, I was placed on a really great team. I was able to learn so much and grow so much as a software engineer because nobody made me feel bad for asking any question. All my teammates would teach me. And I would make sure that if I had a question and somebody helped me with it, I would write down how we solved the problem together so that next time I wouldn’t have to ask the same question. It was a great environment because it was open and collaborative.
Why Having Fun is Her Main Career Goal
In terms of my career, my main goal is to keep having fun and enjoying it. I love my coworkers that I work with and I feel like we can do so much more together if we continue working together. I also love the product and the game that we’re working on. It’s definitely been super fun, and makes me really happy to be able to work here and work on this product.
I want to keep learning new things. I learned a lot the past year and few months I’ve been at Niantic. I want to grow more as an individual and as a software engineer. But I also think that it’s really important for me to enjoy the type of work that I’m doing and to have fun and just be happy. I feel like that’s basically my goal in life, too.
One thing I’ve been thinking about recently is more work/life balance. Everyone I work with is super passionate about what we’re doing, and so sometimes, for me, work/life balance takes a back seat. I’ve been talking to my manager and other people in the company and I think it’s something that could be improved upon. Everybody loves what we’re doing; we’re super passionate, want to make the best features for our users, but work is only a part of life. It’s not all of life. It’s important to be able to balance that with our family or our hobbies or just taking time for ourselves.
Advice for Anyone Looking to Get Into Computer Science
I encourage anyone in high school or college to take a computer science class to see if you like it. There are also a lot of great YouTube videos where people teach how to code or talk about their experience as a software engineer. If you think you might be interested, search “life as a software engineer.” Or if you have a specific thing you want to learn, like how to make an app or a game, search for that. There are tutorials for everything.
When you’re first getting into computer science — or maybe any field — it seems like there’s people who know everything, and you don’t know anything. I’ve heard a lot of people say stuff like, “You’ve got to fake it until you make it,” but honestly, I’m not very good at faking it, so that [didn’t help] me.
When I was just starting, it might have helped me if I had realized that even though people seem like they know everything, and they might actually know a lot, nobody knows everything and there’s so much more to learn. And you shouldn’t feel bad if you don’t know everything about a certain topic. As long as you’re able and willing to learn, you’ll be able to do great things.
This interview has been edited and condensed for clarity.
Up next in this four part series, meet Abyah Wynn, the vice president of business development at a venture capital firm called Trimantium.
Photographed by Ashley Batz.
0 notes