DEV Community: Wren Summerset

Getting the grid (CSS)

Wren Summerset — Sat, 02 Nov 2019 20:20:57 +0000

One of the things I’ve heard a number of people refer to when preparing to create a website is the “whiteboard plan”. The idea is that before you sit down to start working your code, you need to have a vision of what the end product will look like. This of course makes sense, but when you’re only a month in, its hard to understand where you’re going to go after the whiteboard.

This week however, things started clicking. You see, this week I learned about the grid. Picture your monitor (that you’re probably staring at if you’re reading this on a computer) with 12 columns slightly spaced across the width of the screen. This is how a lot of information can be enticingly organized to create enjoyable experiences for your user. Do you know they used to use multiple windows on one screen (really! They even had separate URLs and they had to be coordinated). This made things a bit clunky and slow.

In the past, trying to accomplish something similar required setting up HTML tables. Not the best but it got the job of positioning done. However trying to go from design to final product was a pain and the code could be fragile. One of my favorite quotes while reading from the website https://blog.froont.com/brief-history-of-web-design-for-designers/n “It was also the time when so many developers decided not to like front-end coding.”

Javascript and Flash saved designers briefly but quickly gave way to CSS. While the Cascading style sheets reigned supreme in the design world (keeping a separate declarative sheet to the code, that described the code, helped to solve a lot of problems and is still in strong use today) for a solid decade. It eventually shared its time on the stage with the grid system.

The grid system allowed for one simple layout that could be used over and over again to produce the huge variety of website design we see today. I couldn’t help but wonder if the KISS method was here to rule the day, or if I would see this evolve in my lifetime.

What a beginner has learned about CSS

Wren Summerset — Fri, 25 Oct 2019 14:43:58 +0000

Imagine that you’ve bought a house. The structure is fine. There are no problems with termites or previous flooding etc, but you want to change a few things. This is CSS (Cascading Style Sheets). You step into the living room, and the first thing you’re going to change is take out the carpeting and replace it with wood floors. Then you change the look of the mantle piece framing your fireplace... in fact, lets put in a wood burning insert... with a glass front so you can enjoy the glow of the fire as well as the efficiency of heat. You decide you want to have taller ceilings, so you do the work necessary for that.

Maybe you want to change a few of the walls. As long as they are weight bearing walls, you know this is a possibility. You add new colors to the walls and add nice touches with the decorative pieces you include. After you’ve done everything inside that you want, you turn your gaze towards the exterior to improve the curb appeal.

You decide to add metal siding and drains. You change up the landscaping ... to include a labrynthine maze of hedges... with a minotaur statue hiding around one corner! Maybe you replace the shingles with a copper roof. Lets even expand the porche to be a wrap around porch.

By the time you’ve finished, the entire house is unrecognizable from its original structure and form. With CSS you can move things around, stylize, and shape things, so that all of the elements HTML brought to the page are still present, but look completely different.

There are different ways that CSS can be applied. “inline” CSS is included straight into the HTML tags as an attribute. An example might be <p style=”color: red”>text of the paragraph</p>. Another way to apply CSS would be an “internal” insert on the HTML page as well contained within the <style></style> tag

See the Pen xxxrxRM by wren (@wrensummerset) on CodePen.

A third style, and the way considered “best practice” (because leaving the HTML document alone and linking to a seperate sheet with the CSS code is prefered) is called “external”. This is where you have a seperate file for your .css page. This way, your HTML file simply has the following tag to link to that file. <link rel="stylesheet" href="style.css">

Simple, right? Maybe, but I still haven’t gotten my website to center even after trying all three CSS styles.

Intro to Web Development

Wren Summerset — Fri, 18 Oct 2019 17:20:32 +0000

Being a student at a bootcamp for web development has been a fantastic experience. Its as though I have this 1000 piece puzzle sitting in a box in front of me. Teachers and mentors have been pulling pieces out of the box and telling me about it, and I look at this piece in my hand and say, “aaaahh...” followed by a though like, “ok... what do I do with it?” Every once in awhile I find that two of the pieces connect, and then maybe a third. These connections are seriously exciting and fun. So even though the idea of doing a 1000 piece puzzle feels intimidating and impossible even, People are telling me that I’ll be able to function well in the workfield with only several groupings of 50 pieces or so. I don’t have to have the full puzzle completed before I’ll be “good enough”.

I’m seeing that this is a community of people who seem to love their jobs and are interested in being mentors. Its a community of people constantly learning and adding to their own puzzles. Its a community of people who seem excited that I’ve started working on the puzzle, and all of that feels very exciting.

What is Git?

Wren Summerset — Fri, 18 Oct 2019 13:26:04 +0000

One of the truly exceptional things about the 21st century is the way that humans have begun to amass human knowledge and how we share it widely. We have evidence of humans doing this as far back as 5000 years ago in Mesopotamia where over 30,000 clay tablets were found in a single collection. There have been unfortunate setbacks like the destruction of the Library of Alexandria, the greatest collection of human knowledge to that date, but ultimately, one of the reasons for human success is this drive to offer education to the collective.

The internet is a truly great library of knowledge (and lets face it, cute cat videos) and its important to protect it. One of the best ways we protect the loss of knowledge is through version control. Git is able to record each iteration of a project and share it.

In Git, there are 3 states your documents can be in. You can think of it in the same way one might prepare to present a theatrical performance. There is the point at which your files and folders are strictly available to you. They haven’t been saved. These are the documents you haven’t deemed worthy of sharing to the great library of humanity. This is similar to learning your lines for a script and determining the best costumes and backgrounds to use in the performance. The advantage to this is that you can test code and check for bugs on your local computer.

When you think you’ve done what is needed for that folder, you’ll take it to the second state, known as the staging area. This is like assembling everyone behind the curtain for the dress rehearsal. You’re making sure each character that is meant to be presented is properly placed and those you won’t be presenting are still tucked safely away from audience view.

The third stage is known as committing. Its taking a snapshot of the current iteration of your project. Git is recording each update you make to these documents, so if you royally screw up... its ok. Breathe, go back to a previous version and start again. Not from scratch, but from experience!

When your folder is ready to place into the library of the internet, your audience has assembled, the lights have gone dim, and the curtain is getting drawn back. This is when you are ready to “push” your project out of your local git space and present it to the wide audience of the world. You have added something (of quality?) to the collective knowledge of mankind. Congratulations!

Overcomming obstacles in the tech world:

Wren Summerset — Fri, 11 Oct 2019 13:22:10 +0000

This week in class we were given the assignment of connecting our local git to GitHub on the internet via an SSH connection. For someone who only figured out the difference between git and GitHub this week, it was a daunting task.

Your ability to overcome obstacles is only as good as the tools you have on hand. Thats why so many different people come up with a variety of solutions to the same problem in the tech world. Its based on your personal experience, your ability to google/ask others, and perhaps most of all, your ability to ask the right questions.

I started out trying to work the problem until I came up against a command line I couldn’t get past. Enter Google. I pasted the failure message from the command line into google, and I researched SSH... nothing was working. Others in class working the same problem started collaborating, and I began calling on my people, asking in the local tech community slack channel. Several people piped in, for which I was grateful, but I wasn’t making progress even after studying their posted links. I was trying to ask about something specific, but I wasn’t getting the right answers... I must not be asking the right questions, but the exposure I got through studying their materials is what allowed me to recognize the right answer when an assistant teacher was helping me look at several things in my computer!! Okay, I had the key I wanted... but still not the understanding of how to use it. Another instructor posted a YouTube video which was finally the step by step help I needed to overcome the hold up I was experiencing in the command line.

I was able to continue with the assignment. A few more speed bumps but nothing to stop me! It was exhilarating spending hours trying to solve this puzzle. The main thing that strikes me as I interact with others in the tech community is a certain air of engagement, and interest in their personalities. I feel nearly certain that this comes from the nature of the job which involves a constant need to learn and overcome obstacles.

1st dev post

Wren Summerset — Wed, 02 Oct 2019 15:31:12 +0000

Here I am world!