DEV Community

loading...
Cover image for A server article by a Designer

A server article by a Designer

eduardonwa profile image Eduardo Cookie Lifter ・6 min read

I think I can speak for designers or graphic designers (believe it or not, it's not the same) when I say that we imagine things first, our minds have to wonder and get lost in the world in which we will begin our composition, visualizing empower us. Its important that we have complete control of the visuals and that's of course is CSS related though a designer may value more inserting SVG rather than drawing with CSS. Implementation phase will require the use of our web skills and technicalities such as: knowing how to render typography, inserting IMG's, how to render lines (borders), dividing content via columns (HTML columns for any beginner), "white space" (margin and padding), and of course CSS Grid and CSS Flexbox. HTML Forms I'd say is a more advanced and complicated concept and should only be reviewed when the server talk begins. These are powerful basic tools that only cover the mere basics of what you can accomplish on a webpage. A designer wants to visually communicate thoughts.

For non-designers

If you have to think too much when you interact with a website or anywhere for that matter (magazines, posters, etc) it usually means that the abstraction level of it it's too low, meaning "it has too much", and "it has to have" so it let's you think and enjoy. When your'e around somebody that won't shut up, that person is not being flexible with you, your'e either trying to be part of the conversation but your'e finding it difficult to coexist in this conversation. However that makes you feel bottom line is that it's not cooperating with your intellect, it's interupting when everything you wish to say something. The same thing can be applied to a design where you find yourself forgetting the location of "that" button, or when websites too much information (some have to have a lot) whatever the case, visual structure is a must, familiar patterns help us reach for a better workflow.

What's a web-server?

When it comes to writing programs, websites, desktop applications and/or software the viualizing part doesn't come anywhere near, it's not on the playbook at all, and it's not a required element if you read the documentation carefully. Folks writing these tools, theyr'e idea of data consists of carefully performing other actions, triggering functions to activate and deactivating code. It's just not included in the discipline, the program might have images by the way but the value of writing something like a program is achieved when the it is unbreakable, the information is secured and users are able to perform complex tasks in the comfort of 1 or 2 clicks.

If anybody were to ask me what's a web server and how to make it work with a computer I think they'll mean a web browser, honestly sighs. I would have to literally initialize a database of images that are located in my brain, query the table "images" and enter the string of "computers". And as the conversation progresses fetch more images from it. Well as you can imagine this doesn't happen to Software Enginners, because it's almost like an unwritten rule for designers to know the outcome of things to know exactly how to do things, questions such as: "who is going to use this?", "what is going to be the use for this?", "can this be "big" or "small"?", and others are so important for us because it helps us reach a better outcome for the usability of our composition. Understanding concepts visually will make the learning process better.

When the outcome is unknown and just described in words, the process can become very painful, like swimming into the abyss without a sign saying: "Exit this way"

Designers vs Servers

If a designer wants to know more about servers they probably want to figure out databases at first because theyr'e not that difficult to understand but it does have a steep learning curve like anything in Web programming. Having a language like PHP turns out to be quite helpful, PHP was the first language that I learnt when I got my first localhost database. It's messy but it does the thing! It does feel fun and when you get the hang of it, the process should be simple. Unless you want to reach for the sky.

  • I have a thing called MySQL or phpMyAdmin.
  • All im doing is transfering information from "here" to my HTML.

But then:

  • How do I make a checkbox work with MySQL?
  • How to upload images to a database?

Then it gets complicated, but it shouldn't.

As far as having my own "mental picture" of this process for me, that's never been the case. I couldn't help myself to imagine this from the beginning, nobody taught me this, the names of my instructors were: "Youtube" and "StackOverFlow".. so, figure that one out, right?

Framework vs Framework talk

Like I mentioned in the first paragraph, knowing the usage of the tools is imperative, but when it comes to designers none of the framekwork stuff has had an effect on me. The difference is obvious to programmers but if you don't know what your'e dealing it's not a matter of choosing a framework because a framework it's like trying to tell a drawing beginner to choose between 2 Wacom tables, they might not even need that. You should know what your'e getting into first before deciding having something that can do a lot.

"i WaNt To MaKe A wEbSiTe" vs Reality

In reality this is what you should learn:

  • Your browser makes a bunch of "requests" to a server, not the website.
  • Yes, you have to understand (at your own capacity) how that works.
  • Knowing how to work under a framework will not teach you these things.
  • Get used to writing syntax.

Plain and simple. So many people getting caught up with the frameworks that things like the HTTP protocol and how DNS work, they get lost in a deep sea of information. What are your chances of getting into an expensive Bootcamp that will include server knowledge? Laravel is a wonderful, wonderful framework when it comes to writing requests to a database, its almost a seamless delicate process, but it's still as difficult when the focus of everything is the server.

 My experience

I remember that I had just completed a few basic courses on CodeCademy, and I remember starting my own database was a struggle because it came down on me from every possible angle, I had to learn PHP, I had to learn about SQL, and on top of that I had to worry about friggin hackers man, parsing information with HTML forms was no joke, htmlSpecialChars?

The first PHP program that I was able to do (copy and paste) was a "Contact Me" form and I couldn't be happier. I had the world I felt. like.

It never ocurred to me that the HTTP Protocol played an important role in all of this, in fact that's how the internet works basically.

 In the business of teaching others?

If your'e a content creator and your stuff is based around Web Development and you love helping people achieve their goals, then I suggest you talk more about servers. (extra points if you work with Laravel <3), talking about Frameworks from the get go doesn't help anyone, recommending things to do in "this" enviroment vs "this" it's useless. Try to teach the basic server stuff with oranges and apples, what's a request and why is so important to grasp. Anything can help make it crystal clear that a 5 year old can understand this use images as much as you can but don't over do it. When the time comes travel as much lenght and do expand the talk on frameworks but if your goal is to attract more viewers and have different types of people from various different work genres, dont give them that framework talk before you discuss: Static websites vs Dynamic websites. Start with a little bit of Javascript (which im assuming most people do) and then jump to a DNS talk, or HTTP protocol aka "The web"

 Thanks for reading, honestly.

  • Having a crystal clear picture is better than knowing all the nitty gritty facts of "Java" vs "PHP".
  • "Vue" vs "React" = it. simply. does. not. matter.
  • If my request in good shape. Señor Server will acknowledge my website, and I think my website is super fun! :-)

Discussion (0)

pic
Editor guide