DEV Community: Eduardo Cookie Lifter

Asking technical questions (from a non-technical person)

Eduardo Cookie Lifter — Fri, 11 Mar 2022 19:00:07 +0000

I felt like writing. Also im excited to use my Logitech MX Keyboard and type away, exactly what I needed, minimal, low profile keyboard without being a mechanical keyboard, I basically wanted a keyboard that felt just like the Macbook Pro, and I am not a super technical user, if it feels good im all up for it (this often means the cheapest thing)

So the topic of today is: "how to ask technical questions (from a non-technical person)" of course I go online and I literally just copy and paste the actual error message that I get either from the terminal or the browser. Most of the time I do end up in StackOverflow which could lead me to the right answer or the right starting point and ask more questions.

I actually learnt how to ask proper technical questions based on this repo https://github.com/videojs/video.js and this happened to me when I was trying to implement VideoJS into a passion-project I was working on at the time (a bit ugly now, http://thpsvido.com, that Flickity "flickity" needs some tweaking if you know what i mean)

But being the n00b-lord-n0rmi3.jpeg that I am, I, like most people in need, I went into VideoJS repo and started a question, I remember thinking "omg a guide on how to ask wtf"

## Description
Briefly describe the issue.
Include a [reduced test case](https://css-tricks.com/reduced-test-cases/), we have a [starter template](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0) on JSBin you can use.

## Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue.
1.
2.
3.

## Results
### Expected
Please describe what you expected to see.

### Actual
Please describe what actually happened.

### Error output
If there are any errors at all, please include them here.

## Additional Information
Please include any additional information necessary here. Including the following:
### versions
#### videojs
what version of videojs does this occur with?
#### browsers
what browser are affected?
#### OSes
what platforms (operating systems and devices) are affected?
### plugins
are any videojs plugins being used on the page? If so, please list them below.

VideoJS at that time offered me with something I never thought I would be thankful for, because I was able to not only understand what the other person needs but it introduced me to new "asking ways".

They offered me with a "template"
This is very important because unlike many repos out there, yes they might offer you with a few guidelines but I don't think many offer a template, something on CodePen or JSBin. This gives you access to a minimal configuration which can later be used to add your existing code-
I understand this exact plugin is more visual but some frameworks do have "playgrounds" (https://laravelplayground.com/#/) though not as highly mentioned or praised but they do exist, for other things like C++ or C#, things that aren't necessarily the web, I am unsure how that would play out, but them giving me a template helped me a lot.
The fact that it literally had this:

1.
2.
3.

in the "Steps to reproduce", it helps to see what format they are expecting to see, for example a list, this makes it more organized and even snippets of code can be pasted here, it lets the other person know what changes you made without copying the entire block of code, but if you must you must I guess.

Probably the most important thing (if not the 2nd) "what happened vs what was the expected outcome", this helps in a lot of different ways, it helps me think about other possible approaches, helps me visualize the end goal, in a way, probably not for other people but it's helpful to let the other person know what you're trying to "see" or the browser to display.

And then of course you need to copy and paste the actual error message but when you get to this part you already know, as an outsider, what is the motive or end goal, the issue your dealing with but not only the message of the error, but why it's become an issue on your project.

In other words you described why you have an issue.

Sometimes by just utilizing step 1 2 and 3 people are able to understand because you're providing an actual, visual example. As previously mentioned this exact thought process might not work in every single issue on the face of the tech.

I think that's all, cya.

Responsive design with SVG & CSS

Eduardo Cookie Lifter — Fri, 12 Mar 2021 01:58:06 +0000

Today I want to show you something very cool that I think you're gonna like and this is mostly about designing with CSS and what it essentially does is to use an SVG and depending on the breakpoint we can pick and choose what elements we will show to the user, it's very simple and at the same time it's very powerful to companies. So for example if you are working on a site, and you have a logo buuuut you have 2, 3 or even 4 variations and don't know which one to use, what if there was a way to show all of them?

With CSS it's possible and im gonna show you a way how to do this, the concept of "responsive design" works like this:

You have a logo with 1 or 2 variations and this typically means that your logo either has black color applied when it will be shown on white backgrounds and viceversa, this is one of the many situations where you might want to reach for an alternative design on a logo, or say you already have a logo and the background color is not that important, but you just want to show a portion of it when it's viewed on larger screen sizes because as you might've guessed, it doesn't really matters if you show a circle that goes in the background of your logo, or any shape for that matter.

Using media queries can help you choose which elements to hide or show. Ok so let's begin.

Majik Whistle, because they don't make like this no more!

SVG workflow

Ok so the first thing we're gonna need is to have our SVG logo, for this example I made up my own using Adobe Illustrator but any program that can save SVG's such as Corel Draw or Gimp we just care about the SVG. In Illustrator you can copy your vectors by just selecting everything and hitting Cmd + C or if you're on Windows Ctrl + C. Alternatively, what you can do is to save your file because what we are going to be working on with next, is SVGO. In here we can paste our SVG markup or upload a file, I think this tool is pretty awesome because it will give you a compiled SVG format which you can then later use on your HTML and that's what we want to do.

After you're done copying or uploading what you're gonna want to do next is to copy the newly rendered markup by clicking on the icon that has 2 squares, below the paint bucker and above the turquoise-color-button, it should be at the bottom of the page next to the all of the options SVGO can do for you, and this panel is where you can toggle on and off whatever you want to include in your markup, so for example if you want to add the viewBox property this is where can search for it and toggle (by default it's not included which I think it's pretty rare but that's okay)

Okay, so we got our SVG markup on our HTML and so the last thing we need is to define our media queries and the way we're gonna handle this is NOT by creating a CSS file, we are going to be writing CSS but this time it's not going to be on a separate file we are simply going to handle all the breakpoints inside the SVG element, after that we will hide and show what we want, it's up to us.

So you probably have something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

Now all you need to do is to style your content, for this im gonna use TailwindCSS which is a utility first CSS framework which means it uses Javascript to render classes I think it's really neat im using it all the time now, it's one of those things that get me on the edge, it lets me focus on the design and if im writing server side logic I now don't have to spend any time trying to organize my naming conventions for all of my CSS classes, however since we are going to be writing CSS inside the SVG we might reach for Tailwind only for the containers, wrappers and it will be for alignment purpouses only, we are also going to be making use of the Tailwinds breakpoints as a point of reference to determine what are going to be some of the elements inside our logo that we're gonna be working with.

Awesome, let's begin!

Just HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

</head>

    <div class="bg-gray-600 h-full flex flex-col md:grid md:grid-cols-8 w-screen h-screen">
        <div class="md:col-span-3 p-4 text-white flex items-center justify-center flex-col">
            <ol class="list-decimal pl-6">
                <li class="md:mb-20 mb-0 font-mono">We can change the look of our logo by being explicit in the CSS Media Queries.</li>
                <li class="md:mb-20 mb-0 font-mono">We can show as much or as little as we want, it's up to us.</li>
                <li class="md:mb-20 mb-0 font-mono">It's all done by using SVG, CSS elements, media queries and nothing else.</li>
            </ol>
        </div>
        <div class="h-full bg-white md:col-span-5 p-4 flex items-center justify-center text-white">
            <div class="mt-10 md:mt-0 container mx-auto lg:border-4 lg:border-purple-500 lg:bg-white md:border-4 md:border-yellow-500 md:bg-gray-900 sm:border-4 sm:border-red-500 border-4 border-green-500 rounded-md">

            </div>
        </div>
    </div>

Ok, this is all of the Tailwind we're going to use, you're more than welcome to use the same style but if you prefer you can of course use your own layout or if you want you can use CSS it doesn't matter, we just want to give our logo enough space so we can know what's up with it, also im just using a sidebar to provide some insight into the final outcome, it's just an organized list with 3 bullet points or the most important things we can get out of from responsive design. Im gonna go over the classes really quick and then we will be able to start constructing the ins and outs of each breakpoints.

We need a "general" wrapper, container call it what you want but essentially what we are going to be building to display our logo and the list are: a sidebar and we're gonna most of the space to the logo, so that's 3 columns for the sidebar and 5 for the SVG.

As you can see I've used flexbox for my mobile layout and when the screen is at larger screens we're gonna be using CSS Grid, which I think it's pretty awesome. We're gonna style it very simple with a gray background. Tailwind color classes are pretty cool, in fact if you decide you want your own custom palette you can do that in tailwind.config.js and do any change you want but that is out of the scope for this article so we're gonna stick to our 8 column layout.

For the height and width of the layout I will be using the full screen as my parameter so it's going to take over the whole screen, the whole width and height of the screen, that should set us up with a basic and simple looking 2 column layout.

The Main Layout

As you know, our layout doesn't exactly has 2 columns not even close, we want 8 columns im going to show later on why.

    <div class="w-screen h-screen bg-gray-600 flex flex-col md:grid md:grid-cols-8">
<!-- add content here -->
    </div>

Next, we need to define the sidebar, ok so let's do that:

    <div class="bg-gray-600 flex flex-col md:grid md:grid-cols-8 w-screen h-screen">

        <div class="md:col-span-3 p-4 text-white flex items-center justify-center flex-col">

<!-- we should add something here -->

        </div> <!-- 3 column wrapper ends -->

    </div> <!-- main layout -->

Okay, by now you should have 3 column from your left to right side, what we need to do next is to define the following 5 columns:

    <div class="bg-gray-600 flex flex-col md:grid md:grid-cols-8 w-screen h-screen">

        <div class="md:col-span-3 p-4 text-white flex items-center justify-center flex-col">

<!-- organized list goes here -->

        </div> <!-- 3 column wrapper ends -->

        <div class="h-full bg-white md:col-span-5 p-4 flex items-center justify-center text-white">

        </div> <!-- 5 column wrapper ends -->

    </div> <!-- the main layout ends -->

Tailwind

Like I mentioned earlier we are going to be displaying 2 columns but in fact what we really have are 8 columns only that we are going to span them across the entire screen, starting from the left with 3 columns and once it reaches column number 3, we are going to create a new div that will now take over the remaining space of the screen, and that is 5 columns.

Earler efined that we wanted 8 columns only on our medium breakpoint:

md:grid md:grid-cols-8

all we had to do after was to decide how we would be splitting them, and that is 3 starting from the left, and once that reaches the limit, we create another div and we let that one have the most space of the screen, pretty simple right? Yea as you can see we added a flex behaviour to our sidebar and what that means is that we are going to set a flex column that is going to align our content at the center and Tailwind provides with those classes, by using;

items-center

we are basically saying:

align-items: center;

and when we provide to our div element:

justify-content: center

we are letting the browser know that what we want is to have a column with our content centered, from top to bottom and left to right,

justify-center

does that for us.

For the remaining space of the layout, which will be where our SVG will be, we are going to repeat the same process we are going to need a flexbox only that this time we are going to skip the column and just stick with a simple row, that's all we want, we are just displaying the logo and nothing else.

Because we want our logo to occupy the full height of the screen for all screen sizes we defined h-full and that's all we need. If you want you can add a background color in this area, it's just so we are aware of the division it really doesn't matter. I think it's a reminder of the space we have for each space, it lets us know that there is a separation on our items this is important to know when you have different elements and both of them are as equally important, by defining a width and a color to each you're basically saying "both are important" or "you should look at both", of course you don't want to over do it and assign the minimum space to a sidebar just because it's just text, no, you want to give each section the right amount of importance.

SVG & Media queries, but first..

Moving on, now we are going to finally build the SVG with all the media queries required for this little demo project. First, inside the SVG element we will be adding a couple of Tailwind classes and then we can move on to build the neccessary CSS that will allow us to toggle portions of the logo depending on the breakpoint of the screen, very simple we are just going to add 2 classes in the SVG element, we are going to say we want some padding and that we want the content to be centered like this:

class="mx-auto pt-4"

That is all we need for the SVG element in our little project, next thing will be to toggle the visibility of the components of the logo when the screen hits a certain breakpoint and this is done with CSS Media queries and CSS properties, more especifically we will make use of the opacity property and fill because as it turns out sometimes you don't want to hide or show an element but change the way it looks because often times when a client hands you a logo they might give you 2 images, one that is only used when there is a dark background and one where there's a white background and for this case we don't want to hide but we just want to change the fill value. Let's write our first media query, let me show you how my SVG markup looks like, remember we copied and pasted the markup from SVGO? For the wrapper or the container we are going to be inserting a couple of Tailwind classes in a div and we will add these after the wrapper of the organized list inside the wrapper we previously created.

    <div class="bg-gray-600 flex flex-col md:grid md:grid-cols-8 w-screen h-screen">
        <div class="md:col-span-3 p-4 text-white flex items-center justify-center flex-col">

<!-- this is where the organized list goes -->

        </div> <!-- 3 column wrapper ends -->

        <div class="h-full md:col-span-5 p-4 flex items-center justify-center text-white">

            <div class="mt-10 md:mt-0 container mx-auto lg:border-4 lg:border-purple-500 lg:bg-white md:border-4 md:border-yellow-500 md:bg-gray-900 sm:border-4 sm:border-red-500 border-4 border-green-500 rounded-md">

<!-- this is where we will paste the SVG markup -->

            </div> <!-- svg wrapper ends here -->

        </div> <!-- 5 column wrapper ends -->

    </div> <!-- the main layout ends -->

Come join the SVG!

Let's begin by adding the markup now.

<div class="mt-10 md:mt-0 container mx-auto lg:border-4 lg:border-purple-500 lg:bg-white md:border-4 md:border-yellow-500 md:bg-gray-900 sm:border-4 sm:border-red-500 border-4 border-green-500 rounded-md">
                <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    viewBox="0 0 330 377"
                    class="mx-auto pt-4"
                >
                    <style>
                        .st3{fill:#333}
                        .st4{fill:#040006}
                        .st6{fill:#fff}

                        svg * {
                            transition: fill .1s ease-out, opacity .1s ease-out;
                        }

                        @media all and (min-width: 320px) {
                            svg {
                                width: 144px;
                            }
                            #orange-circle {
                                opacity: 0;
                            }
                            #whistle-inner {
                                opacity: 1;
                            }
                            .st3 {
                                fill: #040006;
                            }
                        }

                        @media all and (min-width: 640px) {
                            svg {
                                width: 144px;
                            }
                            .st3 {
                                fill: #fff;
                            }
                            .st6 {
                                fill: #000000;
                            }
                        }

                        @media all and (min-width: 768px) {
                            svg {
                                width: 89px;
                            }
                            #purple-circle {
                                opacity: 0;
                            }
                            .st6 {
                                fill: #fff;
                            }
                            .st4 {
                                fill: gainsboro;
                            }
                        } <!-- md -->

                        @media all and (min-width: 1024px) {
                            svg {
                                width: 377px;
                            }
                            #orange-circle, #purple-circle {
                                opacity: 1;
                            }
                            .st6 {
                                fill: #fff;
                            }
                            .st3 {
                                fill: #333;
                            }
                            .st4 {
                                fill: #040006;
                            }
                        } <!-- lg -->

                    </style>

                        <!-- purple -->
                        <circle cx="161.7" cy="140.2" r="140.2" fill="#63c" id="purple-circle"/>
                        <!-- orange -->
                        <circle cx="147.8" cy="150.7" r="114.7" fill="#f93" id="orange-circle"/>

                        <g opacity=".55" id="whistle-inner">
                            <path 
                                class="st3" 
                                d="M61.6 167.4c.6 9.4-6.8 17.1-16 17.1v-32.1h1c8 .5 14.5 7 15 15z"
                            /> <!-- whistle inner dot  -->
                            <path 
                                class="st3" 
                                d="M45.5 198.3c17.1 0 30.9-14.4 29.8-31.8-.9-14.9-13-27-27.9-27.9h-1.9v-12.5c27.2 0 51.8 14.9 69.9 39 1.5 2 1.5 4.7 0 6.7-18.2 24.2-42.8 39-69.9 39v-12.5z"
                            /> <!-- whistle smooth curve -->
                        </g> <!-- eye -->

                        <g id="isotype">
                            <path 
                                class="st4" 
                                d="M35.8 239.2l-4.2 19 18.1-7.2 8.9 7.6-26.9 31.6-8.9-7.6L33.5 270l-18.1 7.2 4.2-19-10.7 12.6-8.9-7.6 26.9-31.6 8.9 7.6zM69.9 263.6l-5.8 45.2-11.2-6.4.7-4.4-5.2-3-3.4 2.9-11.2-6.4 36.1-27.9zm-13.7 26.5l.9-4.3-3.2 3 2.3 1.3zM81 308.9c-.7 1.7-1.6 3.2-2.8 4.5-1.1 1.3-2.4 2.3-3.8 2.9l-10.5-4.4c1.4-.6 2.7-1.6 3.8-2.9s2.1-2.8 2.8-4.5l13.8-32.9 10.5 4.4L81 308.9zM93.9 319.6l-11.1-3.7L96 276.5l11.1 3.7-13.2 39.4zM138.7 287.2l-12.5 15.5 3.9 25.1-12.3-2.5-1.6-10.2-6.8 8.5-10.2-2.1 8.3-40.7 11.4 2.3-2.7 13.3 9.6-11.8 12.9 2.6zM173.2 287.2l12.9-.3-10 42.3-12-13-11.3 13.7-12.3-41.7 12.9-.4 4.7 18.6 5.5-8.3 6 8 3.6-18.9z"
                            /> <!-- "MAJIK W" -->
                            <path 
                                class="st4" 
                                d="M205.2 324l-3.1-14.6-3.1.7 3.1 14.6-11.4 2.4-8.5-40.6 11.4-2.4 3.1 14.6 3.1-.7-3.1-14.6 11.4-2.4 8.5 40.6-11.4 2.4zM232.8 316.2l-11.1 3.7-13-39.4 11.2-3.7 12.9 39.4zM255.7 291c1.7 3.7 1.9 7.4.7 11.1-1.2 3.7-3.8 6.4-7.7 8.2-3 1.3-6 1.7-9.1 1.2s-5.7-1.8-7.8-4l7.9-8.8c1.3 1.1 2.6 1.4 3.8.9.7-.3 1.2-.9 1.4-1.6.2-.7.2-1.5-.1-2.2-.3-.6-.8-1-1.5-1.3s-1.8-.2-3.2 0c-3 .6-5.9.3-8.7-.7-2.8-1-4.9-3.1-6.3-6.2s-1.6-6.3-.4-9.4c1.1-3.1 3.2-5.4 6.3-6.8 1.6-.7 3.2-1.1 4.8-1.1 1.6 0 2.8.1 3.7.5l-2.7 12.1c5-1.1 9.1-.8 12.2 1 3.1 1.7 5.4 4.1 6.7 7.1z"
                            /> <!-- "HIS" -->
                            <path 
                                class="st4" 
                                d="M265.9 301l-15.3-25.6-6.9 4.1-6-10.1 23.8-14.2 6 10.1-6.9 4.1 15.3 25.6-10 6z"
                            /> <!-- "T" -->
                            <path 
                                class="st4" 
                                d="M288.4 271.6l8-6.3 7.3 9.2-17.1 13.5-25.8-32.6 9.2-7.2 18.4 23.4zM294 242.3l2.2 2.2 7.7-7.8 8.3 8.2-7.7 7.8 2.3 2.2 7.7-7.8 8.4 8.2-15.9 16.1-29.7-29 15.9-16.1 8.4 8.2-7.6 7.8z"
                            /> <!-- "LE" -->
                        </g> <!-- "MAJIK WHISTLE" -->

                        <g id="whistle"> 
                            <path 
                                d="M269.5 170.1l-42.2-21.2c-1.9-.9-4-1.1-6-.5l-18 6-18.2-9.2 3.5-7c2-3.9.4-8.6-3.5-10.6l-63.3-31.9c-38.8-19.5-86.2-3.8-105.7 35s-3.8 86.2 35 105.7c34.8 17.5 76.6 7.1 99.2-24.1l97.5 7.8c3.2.3 6.2-1.5 7.7-4.3l17.7-35.2c1.7-3.8.1-8.5-3.7-10.5zM68.6 201.3c-19.4-9.8-27.3-33.4-17.5-52.9 9.8-19.4 33.4-27.3 52.9-17.5 19.4 9.8 27.3 33.4 17.5 52.9S88 211.1 68.6 201.3z" 
                                fill="#0c6"
                            /> <!-- whistle -->
                        </g>

                        <g id="white-stripes">
                            <g> 
                                <path 
                                    class="st6" 
                                    d="M241.5 67.9c-3.9-2-8.6-.4-10.6 3.5l-21.2 42.2c-2 3.9-.4 8.6 3.5 10.6s8.6.4 10.6-3.5L245 78.5c2-3.9.4-8.6-3.5-10.6z"
                                /> <!-- 1 -->
                            </g> 

                            <g>
                                <path 
                                    class="st6" 
                                    d="M196.4 101.6l-7-38.8c-.8-4.3-4.9-7.1-9.1-6.4-4.3.8-7.1 4.9-6.4 9.1l7 38.8c.5 2.5 2.1 4.6 4.2 5.6 1.5.7 3.2 1 4.9.7 4.3-.6 7.1-4.7 6.4-9z"
                                /> <!-- 2 -->
                            </g> 

                            <g>
                                <path
                                    class="st6" 
                                    d="M287.2 110.3c-1.9-3.9-6.6-5.5-10.6-3.5l-35.2 17.5c-3.9 1.9-5.5 6.7-3.5 10.6.8 1.6 2.1 2.8 3.5 3.5 2.1 1.1 4.7 1.2 7 0l35.3-17.5c3.8-2 5.4-6.7 3.5-10.6z"
                                /> <!-- 3 -->
                            </g>
                        </g> <!-- the white stripes -->

                </svg>
            </div>

It might look like a lot but don't worry we are just going to be focusing on the part where we can add CSS and that is below
the tag, and by default that is always included after SVG is initialized so let's focus our attention there and begin setting some properties, one thing before doing that, note that by default Adobe Illustrator exports certains classes and this is done by default we will use those classes whenever we want to change the fill of an element in the logo, for the cases where we might want to set a given opacity number we will target the ids of the element, and you can think of these as divs because they're just groups of XML elements they just group other SVG tags, such as and so on, okay, let's begin adding those now.

Transition effect

<style>

                        svg * {
                            transition: fill .1s ease-out, opacity .1s ease-out;
                        }

Media queries, you made it this far

What we want to do first is to target all the SVG elements in the page and set 2 properties, and for this demo we're just going to tell the browser whenever there is a change in opacity, we want to add a transition property to it and it should take 1 second to complete, and it should ease out.

After that let's add Media Queries and i'll be going 1 by 1. So Tailwind has responsive classes set to a specific breakpoints, for the first one we're not going to be targeting that instead what we are going to do is target the iPhone breakpoint that Firefox comes by default and that is a 320px resolution screen:

                        @media all and (min-width: 320px) {
                            svg {
                                width: 144px;
                            }
                            #orange-circle {
                                opacity: 0;
                            }
                            #whistle-inner {
                                opacity: 1;
                            }
                            .st3 {
                                fill: #040006;
                            }
                        } <!-- firefox iPhone 5 width resolution -->

Okay so as you see, and we are going to be doing this over again for all of our screen breakpoints, we are simply going to set opacity to 0 or 1, depending on what we want to do and change the fill property of an element if that's what the logo requires, we are going to repeat this process for every single breakpoint, and for that we are going to be using the Tailwind responsive classes and we are just going to be using sm md and lg, Tailwind has many more but for the purpouses of this tutorial that's all we are going to stick with.

Let's hit all of the breakpoints!

sm

                        @media all and (min-width: 640px) {
                            svg {
                                width: 144px;
                            }
                            .st3 {
                                fill: #fff;
                            }
                            .st6 {
                                fill: #000000;
                            }
                        } <!-- sm -->

md

                        @media all and (min-width: 768px) {
                            svg {
                                width: 89px;
                            }
                            #purple-circle {
                                opacity: 0;
                            }
                            .st6 {
                                fill: #fff;
                            }
                            .st4 {
                                fill: gainsboro;
                            }
                        } <!-- md -->

lg


                        @media all and (min-width: 1024px) {
                            svg {
                                width: 377px;
                            }
                            #orange-circle, #purple-circle {
                                opacity: 1;
                            }
                            .st6 {
                                fill: #fff;
                            }
                            .st3 {
                                fill: #333;
                            }
                            .st4 {
                                fill: #040006;
                            }
                        } <!-- lg -->

Wrapping up

Just one more time, whenever we want to change the color of an element inside our logo we are going to be targetting the default SVG class that it comes with from Illustrator, if we want to change the visibility, we're gonna be using the id of the element and as you can see I've added one for every single group there is in this markup.

Im gonna leave a Codepen for you to check it out and play with it, im also gonna leave you a link with a "progression chart" where you can see how it evolves from each breakpoint.

https://codepen.io/pen/?template=gOLZyMJ

View post on imgur.com

Fame and Hype

Eduardo Cookie Lifter — Wed, 23 Dec 2020 22:07:42 +0000

This article is an inspiration based on this post: https://dev.to/madza/what-s-your-attitude-towards-hype-1pag. I was actually going to write a response but I managed to type more than what I had intended. So, thanks @madza .

As an outcast here (I'm a designer) I believe "fame" plays a big role when it comes to frameworks, programming languages and I must say this, in the era where we have youtube tutorials, paid promotions and all of that good stuff.

When I was learning about Web development stuff (through Youtube) or whenever I need to search for a tutorial video (which, believe me it's not my first resource to go to) sometimes I see videos that compare 2 stacks, languages or things that similarly have the same purpose in mind. I say this with all compassion and integrity, some people think comparing "x" vs "y" is actually a viable source of information to other people, if anything what they're doing is misinforming the public and these type of videos tend to provoke and to construct an idea of what something can or can't be. The people that spend their times creating comparative videos also love to point out which company they belong to, that's fine because that's part of the information ultimately, but if you can, don't, because placing companies, known companies in a scenario may alienate the viewers from "x" tech stack. For example I dislike Facebook and Google views on Privacy, I don't use React, Facebook Google or Angular but the reason why I don't use them it's not because of who owns them or created them. I don't mean to question duality or your own morals but those stacks offer nothing to me, Iv'e gone through a lot of posts and videos and I had to form an opinion based on my own way of thinking, not based on the video, but from what really mattered to me.

One of the things that made me roll my eyes at the beginning was this video: https://youtu.be/EQndMLuDDCs "Java" vs "PHP". It just goes to show how people can be blinded by fame and it's hilarious. Some people consider PHP "bad", "dirty" because of how PHP was used at the beginning and the way it was written which is none sense, even more so if you look at it from where the language is right now. What I know as a designer is that Java and PHP are capable of handling big projects, they should have their differences here and there and their pros and cons but by no means one is bad, that's stupid to think.

Since I'm not a real Programmer/Software Engineer I want you to take this as it is: I'm somebody who did not needed to learn how to code, I simply had love for the interwebz <3, I wanted to. So I had to look out for what was convenient for me what resonated with me and since I'm a designer, what would allow me to grow as one, by this I think I had the strange opportunity to bypass any judgement of this "fame" passed on to me possibly by a mentor, a tutor or teacher or even studying colleagues.

Hype and Fame

For me, Hype is almost the same as Fame, both concepts are based on opinions led by other people, who at the same time are influenced by other people, it's all hear-say until we get our hands and minds to it. Something can gain traction for something collateral and that is known to be fame. When something hasn't gotten any fame, but gets talked about a lot, that's hype. Just because something hasn't reached a "fame status" and therefore is still being "hyped" doesn't mean it's good, at that point it's a waiting game, and when something breaks it goes bigger than if it didn't had any associated fame. We now live in times where people love to hype things up through social media, websites, blogs, youtubers, influencers and more.

Fame

For instance, if I'm in a band and our music resembles Led Zeppelin or Black Sabbath, meaning we basically "sound" like those bands, what the people will probably be saying is that we sound like "x" and "y", and that will grant us some kind of "fame". There are going to be 2 types of speeches: those who consider us as bad, that "stole" their music, "copying" their sound, and others that might find us amusing and probably will not care about the fact. This means we will have good and bad fame, but at the end it's just fame, it's "something" that encapsulates the overall perception or opinions of 1, 2 or more groups of people about what we do.

Hype

You can consider Hype as a preexisting notion of fame, though I believe something has to happen after, and something has to be happening now, the before moment of claim to fame.

Since the age of social media and Digital Marketing what marketers have successfully done to products "hyping" has played a huge role. They use any and all social networks to enhance their message associated with something, I believe this tactic has grown to be the standard for many businesses, people want their product to be unique, and they want to stand out but they also want to tell you all about their product so you can analyze it before hitting its peak. It's also a new standard (or maybe not) to have funnel websites, with freebies that let you have a peak or a portion of the real thing, and that's also where the hype is.

Console wars: Xbox vs Playstation

In reality it's just a marketing festival of 1 unit vs the other marketing unit, they're both recurring to the same audience and they both sell you a product that does the exact same thing, playing video games. But it's more important how they communicate their product and the way they say it to us, the users, which platform the consumer is going to need (I don't own a PS5 or Xbox). They organize major events broadcasted all over the internet with details about their system, what games they intent to release and what studios are partnering with them, so if you're a fan of "x" game we want your attention. This is when the hype is beginning and taking form.

Another example: Cyberpunk 2077

The game came out and up until december 10th, the game was receiving all kinds of press, mostly positive, it was "pushed back" several times (for whatever reason) and also an "anomaly" occurred when they announced that unfortunately BestBuy had "mistakenly" shipped out a few units of the game even before the postponed released dates and that nobody was going to be able to stream it or they would be receiving a ban or something (bs imo). But before it was finally released (I don't own Cyberpunk though) they did as much hype as they could possibly do, through social media. And once the game was finally released "officially" it began to slowly gain traction and with this it began to start gaining fame. Well as it turns out the game had many flaws which I'm not getting into but as all things it was now up to the fame part to take it's place and settle in.

Finishing up

The main thing here is that, if we distance ourselves from both of these events the "hype" and the "fame" states the better our own interpretations of a product can be if we simply go back to our needs, and that's because we are consumers, may be bad for some people to think of us in that way but products and offers are everywhere and the more we establish a way of going about these hyped or overpriced products, the smarter our decisions will be when it comes to spending our money on them and our efforts to master them.

A server article by a Designer

Eduardo Cookie Lifter — Tue, 15 Dec 2020 03:05:42 +0000

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! :-)

Why fixed pixels are great

Eduardo Cookie Lifter — Tue, 08 Dec 2020 07:23:15 +0000

In this post my aim will not be about comparing pixels units vs "you-name-it units", but rather I am going to show you with just a few examples a way in which you can too use fixed pixels as a way of sizing your own containers, buttons, CSS Grids layouts and more.

One definition of design that I personally agree with, is that it's an agent of communication that uses shapes, colors, typography and other stuff to represent an idea, a service, a product and other things too. Do we need design as theory? Yes, nope, maybe, it could help. What kind of practice does one need to create functional designs, layouts and other web stuffs, in my opinion the web looks alot like magazines and articles, in fact you could get so many ideas just by staring at a magazine cover and articles. This is the thing. HTML comes predefined with things like "lists", "forms", "columns", "options in a box" (select), "buttons" and more. You could use a div or any other tag and give that any shape you want, with any background color you wish, you can also give that box an amount of "padding", "margin", "height", "width" and, Gradient? Yea. Rounded corners, one porfavor. Neumorphism? Uh, sure I'll take it. By looking at a magazine your'e probably be thinking in terms of HTML, at least I know I do.

So this means we can make compositions like in magazines or a very close effort, in fact with CSS Grid this is nothing but a walk in wonderland, its so pretty. So we can build many things with HTML, and of course if your'e reading this here on this website it probably means that your'e able to use HTML to its full potential and probably a lot more than just plain HTML and CSS. So let's get to it!

I wanted to talk about fixed pixels because Im a designer and trust me when I say, I can be a little bit of a "perfectionist" when it comes to spacing things, organizing boxes, making sure everything is well alligned, horizontally and vertically, that nothing seems off and has enough "air to breathe", maybe you look at these things in the same way I do. Cool. And maybe you have heard about the "Fibonacci sequence"? Yep! Thats what this is about, finally Iv'e said it.

Turns out Fibonacci numbers are just a wonder to work with in web design, its become my "framework" of choice, those numbers. You can blindly set the height and width using those numbers and youll quickly get a template going.

For the example below I used cards to illustrate my point, but I also included a hidden "top bar" and a hidden "sidebar" with "fixed pixels".

Consider inspecting this pen with fixed pixels aka Fibonacci fixed pixels.

I have been using these numbers and most of the time if not every time my layouts look pretty good, I don't need percentages of any kind, all my widths and heights still maintain a decent aspect ratio.

In case you want to know more about the Fibonacci sequence: https://www.livescience.com/37470-fibonacci-sequence.html

The magic of Fibonacci numbers by Arthur Benjamin (TED talk)

This is my first post ever on DEV, please consider sharing your knowledge when it comes to bloggin. Thanks for reading me.