Forem: Kevin J. Estevez

CSS container queries with SASS mixins

Kevin J. Estevez — Wed, 23 Aug 2023 20:04:54 +0000

Have you ever wanted to apply certain styles based on the container width instead of the viewport width? well now you can do it using CSS container queries

That's pretty cool but as we used to do with media queries we might want to set standards for the codebase and define common breakpoints' variables to be used across the project.

Mobile devices – 320px — 480px.
iPads, Tablets – 481px — 768px.
Small screens, laptops – 769px — 1024px.
Desktops, large screens – 1025px — 1200px.
Extra large screens, TV – 1201px, and more.

If you're using some css pre-processor like SASS, then we will do something like a mixin to wrap the code:

For Media Queries

$breakpoint-xs: 480px;
$breakpoint-s: 768px;
$breakpoint-md: 1024px;
$breakpoint-l: 1200px;
$breakpoint-xl: 1900px;

@mixin x-small {
  @media screen and (min-width: $breakpoint-xs) {
    @content;
  }
}

@mixin small {
  @media screen and (min-width: $breakpoint-s) {
    @content;
  }
}

@mixin medium {
  @media screen and (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin large {
  @media screen and (min-width: $breakpoint-l) {
    @content;
  }
}

@mixin x-large {
  @media screen and (min-width: $breakpoint-xl) {
    @content;
  }
}

For Container Queries

If we try to do exactly the same for container queries, it won't work out, we need to make a slight change (scaping the variables values)

...
@mixin x-small {
  @container (min-width: $breakpoint-xs) { /* this will not work and you will see no error */
    @content;
  }
}

...

So to make it work for container queries we need to scape the variables with the breakpoints like this: #{$breakpoint-xs}

...
@mixin x-small {
  @container (min-width: #{$breakpoint-xs}) { /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */
    @content;
  }
}
...

The solution above is reported as an error (scss-(css-ruleorselectorexpected)) by VSCode, but when it compiles and runs just fine.

Thanks a lot to the solution I found in this thread by Michel Reij

Hope this could be helpful to someone else!
Thanks for reading.

I'm a lazy Dev

Kevin J. Estevez — Tue, 04 Jul 2023 18:17:22 +0000

Originally publish at: Jobsity Blog

Yes! I'm a lazy dev and I like it.

Don't misunderstand me I haven't said I'm not productive, it is the opposite, let me explain myself.

I hate doing that kind of repetitive task on a daily basis, I'm always looking for challenges, something that really puts my brain to work and then gets the best of it by figuring out creative solutions.

That's why I pushed myself through the way of automating repetitive tasks with scripts 😜

Scripts have helped me a lot to perform repetitive tasks and even to increase my productivity since I don't have to worry on spending a lot of time doing the same and focus on what's worth.

It might be tough to start but if you want to become a lazy dev too just let me give you some advices on tips you should keep in mind whenever you're writing a new script

Tips

Use a common scripting language known by the team
Keep it short, clean and understandable
Follow the same pattern in your scripts
Document your scripts

Once you identify a task where you could create a script for, please don't hesitate to automate it, your team and even you're going to love it.

What language should I use?

Well I prefer writing my scripts using bash, it's simpler, easy to learn and it comes with all the Unix based systems 😄
Javascript could be an option as well if your team is used to javascript.

Personally I've written most of my scripts in bash and some others with python.

One script to rule them all!

Please don't try to write a script to make everything, it's better to have several short and maintainable scripts well documented than a big bunch of code trying to control the world.

If that's what you want you might consider to write a complete CLI program instead. Though I wouldn't recommend

Patterns would make it easy

As a rule of thumb try to keep patterns on your scripts, that'd make it easy not only for you to start creating a new script but also for your teammates to understand how the script works.

The pattern I like to follow is flag's parameters where you pass them to the script as flags, for instance if you want to pass an external file path you add a flag like -f or --file if you prefer the full flag.

Document your scripts

Best way to document your scripts is a self explained code but we usually just need a quick documentation of how to use it without need to checkout the code, that's why I'd recommend you to always add a help -h|--help command.

Templates!

For those who reach the end I'll give you some templates you could use to start creating your scripts, and believe me this has helped me so much, improving my performance and accelerating several tasks in the projects I've worked on.

And on top of that, it makes my clients happy when I build tools to increase the development pace -- and it makes me happy to reduce the need to create and re-create those stressful repetitive tasks we've all grown tired of creating!

And for sure it makes my clients happier when I build tools to increase the development pace of those stressful repetitive tasks we've gone through.

Bash Template

#!/usr/bin/env bash -e

PARAMS=""

COMMANDS_FLAGS="
Help:
    In order to pass arguments use '--' after the command like: npm run script-name -- -f

  -f|--file:                    Pass file path
  -o|--output-file:             Sets the output file’s name
  -h|--help:                    Lists help options
"

# VARS
FILE=""

while (( "$#" )); do
  case "$1" in
    -f|--file)
      FILE=$2
      shift
      ;;
    -h|--help)
        echo "$COMMANDS_FLAGS"
        exit 0
      ;;
    -*|--*=) # unsupported flags
      echo "Error: Unsupported flag $1" >&2
      exit 1
      ;;
    *) # preserve positional arguments
      PARAMS="$PARAMS $1"
      shift
      ;;
  esac
done

# set positional arguments in their proper place
eval set -- "$PARAMS"

# execute your script
echo "Running script..."

if [ "$FILE" = "" ]; then
    echo "File not found."
else
    cat $FILE
fi

Alright let's split the code, first we will need a variable to store the positional parameters $PARAMS, those are the ones its order is important

COMMANDS_FLAGS is basically our documentation we're going to display when the --help flag is passed or if the passed params does not supply the minimum requirement.

Always supply short and full flags to your scripts, believe me users are going to love it.

Then you'd want to define all the default values for the vars you're using, because next is where most of the magic happens...

Here we're parsing our flags and storing the right values in our variables depending on what needs to be done, you can add as many flags as you wish.

Just add a new case like:

    -f|--flag)
      FILE=$2
      shift
      ;;

Remember the flag's value for non-boolean flags is going to be stored in $2 var.

And don't forget the last two conditions:

-*|--*=) is meant to throw an error when a flag is not valid
*) is meant to concat the positional params

while (( "$#" )); do
  case "$1" in
    -f|--file)
      FILE=$2
      shift
      ;;
    -h|--help)
        echo "$COMMANDS_FLAGS"
        exit 0
      ;;
    -*|--*=) # unsupported flags
      echo "Error: Unsupported flag $1" >&2
      exit 1
      ;;
    *) # preserve positional arguments
      PARAMS="$PARAMS $1"
      shift
      ;;
  esac
done

Also after parsing the your flags remember to put back the positional params on its place with:
eval set -- "$PARAMS"

And that's it! Now you can start running your script based on the conditions set by the flags the user passes or throw an error if the user passes each other exclusive flags, it depends on how you define your script after that.

Bonus! (For the Laziest Devs Only)

If you'd like to add more life to your scripts -- like showing an error message in red or a piece of advice in yellow -- I suggest you to define your colors like this:

red=$'\e[1;31m'
green=$'\e[1;32m'
yellow=$'\e[1;33m'
blue=$'\e[1;34m'
magenta=$'\e[1;35m'
cyan=$'\e[1;36m'
purple=$'\e[1;34m%-6s\e[m'
end=$'\e[0m'

The end var is to define where to stop painting your text, and it's used like:

printf '%s\n' "${red}Error! There's nothing to be updated!.${end}"

Well and if that's not enough for you, you can also create helper functions to help you better build your script or even better to add some enhancements to your script like the power of logging the batch of commands to be run in case your script performs a sequence of commands.

That way the user will be able to see before running the script what is about to be executed, I've made that abstraction for you, so don't worry just use it.

run_command() {
  if [ "$TEST_OUTPUT" = true ]; then
    echo "|$ $@"
  else
    printf "%s\n" "${blue}running -> $ $@${end}"
    eval "$@"
  fi
}

This function as you can read the code requires a variable called TEST_OUTPUT, you can define the flag whatever you wish I've done it with capital letter T -T|--test

And what it does basically is if true then echo the command about to be run otherwise print the command and also execute it.

A simple use example would be if your script wants to run git status to check out if there's any change then you'd run it with the helper function:
run_command "git status"

Note

With python you could use argparse to actually parse your flags in a fancy way than bash does it if you're more a python enthusiast

Get Lazy!

Well, that’s it, friends! Hope this could help you improve your productivity and find your way to being a truly lazy developer. If you follow these tips, my advice, and play with my templates, once you identify a task that can be automated by a script, you’ll be able to without much effort. And when you do, don't hesitate to get it written. Your team, your clients, and your lazy nature will thank you later! 🤗

Conciliation Branch in Git

Kevin J. Estevez — Wed, 09 Nov 2022 01:36:01 +0000

Have you ever fall in the situation where the commit chain from the main branch (prod) differs from the staging branch, either cause by:

A cherry-picked commit to main
A bunch of commits squashed and added as a single commit to the main branch

Well it has happened to me a couple times in different teams, and on each case several approaches had bumped up from my colleagues:

Address the conflicts manually? 😥
Revert (hard reset main) the conflicting commits? 😰
Hard push (force) the staging branch to main? 😖

To be honest I'm not a fan of forcing things, I like my Pull Requests to merge soothly into main 😌

so I'll give you the solution to this problem, which I've called Conciliation Branch even though I'm not sure if the term already exist or not, but it's an approach I've made several times to solve this. (as a git lover)

Well let's jump in!

Commands:

Note: all steps we're doing through terminal

$: git fetch
$: git checkout staging

# in case we're not up-to-date with upstream
$: git merge origin/staging

# Create a conciliation branch from staging-branch
$: git checkout -b <conciliation-branch-name>

# merge master back into staging taking "ours" preference
$: git pull -s ours origin master

# push new branch
$: git push <conciliation-branch-name>

And that's it!

Now all you need to do is create a Pull request from your new conciliation-branch to staging-branch

That will allow you then after merged to now open a new Pull Request from staging-branch to master smoothly 🚀 🥳

Thanks for reading!, Hope this could help you a lot.

My hacktoberfest adventure!

Kevin J. Estevez — Sat, 02 Oct 2021 00:54:51 +0000

It was a few years ago when I started this journey to participate in the Hacktoberfest event and I must confess I was quite nervous about it as I'm actually now too.

I've always looked up to dev who actively contribute to opensource projects since I know how difficult it is to keep up the pace and commitment it requires.

Back then in 2018 I started looking there for opensource project to contribute to during hacktoberfest and I realize even though most of them have a very strict process to get PRs accepted if there's a well defined guide to follow is because the core team is open to contributions, and if so they're also really open to help you out get started on it!

So my advice is to not be shy to start contributing and also reaching the core team with questions about the project!

I still remember that time when I received this package with that awesome T-shirt and the swag! I was excited about reaching my goal of completing the challenge.

from then on I continued participating on Hacktoberfest each year but later on last year was quite great! since I moved on a step on not only looking for opensource projects to contribute to but more known repos and tools used by hundreds on devs...

Yes I'm talking about GitHub-CLI it was a great adventure! I learnt a lot from it, using Golang in good known cli tool to add a new command

The thread started from a feature request I found in the issues section inside the repo, I picked that up and starting working (even without the approval of the core team to add that new feature) I started the R&D process and implementation, asking questions about the project to the core team and building the new feature

Finally I made a PR and bum! 🤯 Pipeline failed to build the app for Windows!!! and then I realized, of course I'm trying to build a feature for a tool which is used across OS (Mac, Linux, Win) and honestly I had never done that before

It was a huge investigation phase until I finally made the feature work for the three major OS, opened up the PR and prayed 🙏 to be accepted by the core team

Discussions stated in the code review until it turns out the core team decided that was not feature they wanted to include in the CLI.

Well! sadly it was not merged and release to the users but I got the experience of at trying it and also the added up benefit of getting all that new knowledge.

Right now I'm looking for some fun opensource project to contribute to, so if your a maintainer and want some sort of contribution please write it down in the comments so I'll check it out.

Let's go Hacking! 💪 and thanks for reading.

The font-size trick in layouts

Kevin J. Estevez — Thu, 22 Apr 2021 19:13:14 +0000

Have you ever faced the issue when 50% and 50% does not fit in 100%? 🤯 Where has the math gone?

I remember my first days learning CSS, putting markup tags here and there then styling them out! yeah! the least aesthetic page ever xD

Flexbox had just appeared and then barely used, we still fought aligning items with float: left and float: right and the famously used clear: both

Nothing worse than dealing with those properties and then boom! we played the fools trying to split a view evenly in two pieces 50/50 using display: inline-block and width: 50% ending with something like this:

HTML

<div class="container">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
</div>

CSS

.container {
  width: 100%;
}

.item {
  display: inline-block;
  width: 50%;
}

Fooling!

And you know the end, how 50% plus 50% is different than 100%? then more than one ended doing the weirdest thing ever done 50% and 49% 🤦🏻‍♂️ others tried to heal the wound a bit by evenly distributing the difference like 49.5% and 49.5%

But you know what? just to make it worse guess what? That's not gonna behave as well as expected if you're aiming for responsive views

Problem solved!

Do you know what's the real issue here?

Well it's even simpler than you thought! The reason why 50/50 doesn't fit 100 is because of the font-size yeah!

Remember we're using display: inline-block right? to change the default block value of divs, and as fact in CSS all the inline elements by default share a property called font-size.

Wait! divs could have font-size? for sure they can once you change their display property from block to inline, even inline-block

Conclusion

If you do not set a font-size property to your 50/50 elements they will inherit from their parent (which most of the time might not be zero)

All you have to do is set font-size: 0; to your items and boom! out of magic everything will work! Here's an example of the result so you could check it out:

Before you go!

Note: The example above it's working pretty well just because we don't have content inside those divs, once you have some content there by default most of the browsers set the property box-sizing: content-box; and I'd suggest you to set that property to box-sizing: border-box;.

Thanks for reading and see you soon... 🤗

EasyASM, Ramping up in Assembly

Kevin J. Estevez — Tue, 06 Oct 2020 23:17:16 +0000

I was remembering the time I was coursing Compiler lessons at my alma mater, and decided to check out an open-source project that helped me understand in a better way the core concepts of the compiling process, and even further in the Assembly languages.

Yeah! I know some might get scared by those lower-level programming languages but in the end they're just that: another language with its own complexity.

First thing we need to know is, there are different Assembly languages and we're going to list some of them here:

MIPS32
X86
ARM
X64
newly added to the family WebAssembly

And a famous widely used assembler for X86 is NASM

But for education purposes

I came here to introduce to you all to this awesome open source project, an interpreter of the MIPS32 and X86 instruction set EasyASM.

ideras / EasyASM

MIPS32 and x86 simulator for easy learning of assembler language

EasyASM

EasyASM is a simple simulator for a subset of MIPS32 and x86 ISAs. The main purpose is make easy the process of learning the assembler language. For this purpose EasyASM provides a simple command line interface were the user can type assembler instructions and test them without the need of using some assembler program. The program provides instant feedback to user, in case of an error. Apart from that the simulator provides some useful commands which are described in the section commands.

Installation

To install the program you need a C++ compiler and the source code. Once you have both you just need to enter the directory with the source code and type the commands

Linux (Debian based distribution)

$ make deps
$ make

Windows

It might work if you use msys

Usage

Once you have the simulator compiled, you can run it by typing ./EasyASM in the source…

View on GitHub

It’s a project where you can play around with a vast instruction set for either MIPS32 or X86 and have good feedback of what’s going on. Also you have available some helper instructions to pre-fill a register with a desired value and then use it later in the code.

I've made very few contributions to it, the most recent being an easy way to set it up and running in your Debian based distribution.

A bit of History

The project was made by a professor I had during my major and was developed while we were having lessons with him, so we were pretty much like Beta Testers 😆 at the time.

A few of us made very few contributions back then, and it wasn't until recently that I came back to see if the project was still alive and noticed there were some changes which weren't quite well explained in the Readme.md file about:

specific i386 dependencies
custom version of Lemon

It really wasn't easy to set the project up and running at once, so I decided to figure out the needed dependencies and the custom version of Lemon myself.

I added a script to install all those dependencies easily just by executing one shell command... Yeah, I went through all that pain to simplify that process to future users.

Setup

$ git clone https://github.com/ideras/EasyASM.git
$ cd EasyASM
$ make deps
$ make
$ cp ./EasyASM /usr/bin/EasyASM

The last command is optional. It is mostly there so that you can use it from any directory you are in, like any other CLI program or you could easily use it directly from the project folder.

Running

If you followed all the steps above just type:

$ EasyASM

And if you skipped the last step:

$ cd </path/where/you/cloned/the/project>
$ ./EasyASM

You should expect this output in your console:
(there's a blinking cursor waiting for you start typing)

--- EasyASM MIPS32 mode (big endian) ----

Global base address = 0x10000000
Stack pointer address = 0x7fffeffc
Global memory size = 256 words
Stack size         = 256 words

ASM> _

Usage

The default mode is MIPS32 (big endian)

To run it as X86 (little endian): $ EasyASM --x86

EasyASM's own helper commands

#set store a value into a register or memory address
#show display what is stored in a register or memory address
#exec execute a whole assembler file
quit exit the command line prompt

Now let's see a simple example running in EasyASM

ASM> start:
ASM> #set $t0 = 10
ASM> #set $t1 = 20
ASM> lbl_add1: add $t2, $t0, $t1
$t2 = 0x1E 30 30
ASM> #show $t2
$t2 = 30
ASM> _

We can see right after a calc operation, EasyASM will show us the result value stored in the register in three different formats:
[target register] = [HEX] [Signed Decimal] [Unsigned Decimal]

Note: We can add labels but we cannot jump to not existing labels, so if we want to jump to a label further down in the program, we'd better use a file.asm and execute it with the #exec command

I hope this can be helpful so that someone can really take full advantage of the power of this project.

Thanks for reading! 😊

My GitHub Profile

Kevin J. Estevez — Tue, 08 Sep 2020 01:25:34 +0000

Recently I read a few posts and articles about the new feature of GitHub to customize your profile with a Readme file.

Then I took ideas from those posts and updated my profile, so here's the result:

KenyStev / KenyStev

Hi there, I'm Kevin 👋

I'm a software engineer who is passionate about making well structured clean and deep core algorithms, so I'm pretty oriented to game development, hyped by compilers developing and all kind of data structures like trees, graphs, maps, sets, hashes and so on.

Although when working for a company I've been more oriented and experienced to work as a Full-Stack developer, from bottom up making Database decisions, Controllers, API endpoints (Backend), Templating views and Implementing full Frontend pages whether Single Page Applications, Server Side Rendering or Hybrid.

I've got sharped the skills of fast learning, fit in the desired environment and performing deep useful researches; so it doesn't matter the stack, I'd better handle the task, I bet I'll commit it.

I'm eager to learn every single day and become the better version of myself. Although most of the technologies I've been used to work with…

View on GitHub

Pretty simple I know but it's better than nothing.

Here the plugins I used to have polished like that:

Interview Tests/Challenges, what companies are looking for?

Kevin J. Estevez — Thu, 23 Jan 2020 19:47:35 +0000

I was recently looking for a new job as middle developer, spent about one and a half month having interviews, applying here and there to whatever job opportunity I thought it was a good match for me or if it looked like something I'd like to get involved in as a new technology or a new programming language even if it meant to apply as a junior dev.

And to be honest, it has been exhausting doing those code challenges which some of them took me about a week to complete; others were shorter but even though I guess doing those code challenges like a short project is quite more legit to test a developer's skill than some kind of timed quizzes, which ask you to make some sort of math algorithm in short period of time as 30 mins for example.

My reasons? there we go:

Real life is about solving problems and getting things done, which is one of the hardest skills to get for most of the developers.

That's why I say challenging developers this way is even more legit for making a developer probe their skills and look if they are good at finishing stuff even if they had some issues during the process with any of the technologies implied.

Buuut! and here is where I want to be careful: when you are hunting for a job you Must be careful about what kind of company are you targeting and plan ahead your expectations for it (same as companies does).

although I think those kind of challenges are good at choosing the right developer, it will depend on what the company is looking for, what is the company's developer target, some companies look for:

devs who are good at finishing things even if they don't have a degree in computer science at all
devs with a deep understanding in certain technologies

And that's the reason why I say that you better target the type of company you are looking for, the kind of company you think you fit better based on your personality.

Do you homework and know more about the company you want to work in, the kind of culture, the kind of developers this company grows, how much long in depth this company goes for in the tech field!

good luck!

Looking for a Junior compiler position

Kevin J. Estevez — Fri, 02 Aug 2019 15:38:37 +0000

Hello everyone,

I'm currently looking for a job and I want to move from a web developer to a compiler developer, I'm looking for remote and junior positions in the field if do you have any suggestion or know about any opening.

Thank you so much!

Understanding how `this` works in Javascript - Default Binding

Kevin J. Estevez — Mon, 18 Mar 2019 19:34:30 +0000

We've seen in the previous post that this is bound depending on where is called, if you haven't read it please go back to

Understanding how `this` works in Javascript - The call-site

Kevin J. Estevez ・ Mar 18 '19

#javascript #programming #ignoredconcepts #gettingdeeper

I'll start by saying that default binding is the last case which is going to match in case any other fit.

When default binding is applied, the global object will be bind to the called function, consider the next code:

function foo() {
    console.log(this.a);
}

function bar() {
    function bazz() {
        console.log(this.b);
    }
    bazz();
}

var a = 3;
var b = 5;

foo();  // 2
bar();  // 5

It is worth to point out that global object will be eligible just if strict mode is not set either inside or outside the definition scope of the called function, but if 'use strict' is set at one of them, then this = undefined.

'use strict' inside function's definition

function foo() {
        'use strict';
    console.log(this.a);
}

var a = 3;

foo();  // TypeError: Cannot read property 'a' of undefined (this = undefined)

'use strict' outside function's definition

function bar() {
    'use strict';
    function bazz() {
        console.log(this.b);
    }
    bazz();
}

var b = 5;

bar();  // TypeError: Cannot read property 'b' of undefined (this = undefined)

It's worth to point out, despite of biding is entirely based on call-site, the 'use strict' concern is totally base on where the function itself is declared.

function foo() {
    console.log(this.a);
}

var a = 3;

(function(){
    'use strict';    
    foo();  // 3
})();

Understanding how `this` works in Javascript - The call-site

Kevin J. Estevez — Mon, 18 Mar 2019 19:33:41 +0000

If you have ever gotten your hands dirty with some javascript code, you'd maybe hit with this keyword's unexpected behavior, like it turd out to be undefined or you've probably declared a global variable, or maybe you just got another value but not what you were looking for.

If you're like me who came from a firm basis on Object Oriented Programming (aka OOP), and you're used to work with stuff like classes, class’s methods, instantiation, object's instance, constructors, etc. Then you'll notice in javascript this kind of concepts are slightly different and it tends to confuse.

Here specially I'm going to talk about the way this keyword works and the different kinds of how it could be bound to a function regardless either explicitly or implicitly. And what is the precedence of the binding methods?.

Let's get started ;)

4 types of binding `this`

Default Binding
Implicit Binding
Explicit Binding
new binding

And they have nothing to do with what we've learnt from classes by OOP.

In Javascript this is bound to an object and it depends on not where the function is declared but where the function is called.
So we should take a look at where the function is called to answer what does this reference to?

Let's get deep into some code:

function buzz() {
    // call-stack is: foo -> fizz -> buzz
    // then, our call-site is fizz

    console.log('buzz');
}

function fizz() {
    // call-stack is: foo -> fizz
    // then, our call-site is foo

    console.log('fizz');
    buzz(); // <-- call-site for buzz
}

function foo() {
    // call-stack is: foo
    // then, our call-site is in the global scope

    console.log('foo');
    fizz(); // <-- call-site for fizz
}

foo();  // <-- call-site for foo

You should be careful when you're analyzing your call-stack to determine what your actual call-site is.

The call-stack is the sequence of your functions called in order, then your call-site is the function called right before your actual function, for instance:

Initial	First call	Second call	Third call
(empty stack)	foo()	fizz()	buzz()
		foo()	fizz()
			foo()

Being at the bottom of the stack, the first function called, and at the top of the stack, the last one.

Then if we were looking for the call-site for foo(), since there is nothing below, the call-site would be the global scope.

For fizz() the call-site would be foo.
For buzz() the call-site would be fizz.
An so on...

Now we understand better what the call-site is and where to find it, we may proceed to the next chapter: Default Binding

Thanks for reading ;)
I'll be writing the next posts of the series soon.

How to declutter the bunch of stuff you want to do at the same time?

Kevin J. Estevez — Thu, 07 Feb 2019 17:15:21 +0000

I've decided to start my journey here on dev.to with this post.
Since a few months ago I've been thinking about so many things I'd like to do, but then again, I've just been thinking and not really making my dreams come true.

And that's just been because my time had started draining into other things. Last year, 2018, was an awesome year for me, but it was a life changing year for me as well.

2018 journey

awesome study year

I met my closest friends from college, who are also colleagues in the same field of study (Computer Science), so much better
I met new friends who became close friends too
Started full-time working as a web developer for a company few months before graduating
Graduated from college
Learnt a lot new things on web development flow and docker containers
Learnt and got experience with React.js, ES6, HTML5, CSS3 in particular
Could rest a little from the constant project working and studying within college
Reached my dream of traveling to a different country for vacation
I participated in 2018’s hacktoberfest and earned the 5-PR contribution gift, partnered by DigitalOcean, Github, Docker and Twilio
Got focused on studying Japanese again

life changing year

Entered the adult life of paying bills xD
Now it's not college but the job the one that takes most of my time
Got to get up too early every day (I still don't get used to)
Arrive too tired at home so I don't focus on my personal projects
Problems managing my time an set up my schedule and stick to it
Got stressed because there are too many things and projects I want to work on or be part of, or habits I want to stick to my day to day

As you can see, 2018 was a great year for me but after all that I had a moment were I got stressed, really stressed, As I thought when college was over I'd have more time to spend on my real dreams and passions, but it wasn't true at all.

By every day I was trying to:

- read at least one chapter of a book before work
- do my work as front-end developer in my job
- study at least 30mins of Japanese Vocabulary (I ended up studying more than an hour)
- practice my listening skill of English by watching at least a chapter of any series
- study/practice at least 30mins of Kanji
- study/practice 1 or 2 hours of Japanese grammar
- do at least 1 hour of swimming sport 
- go to the gym / work out
- go to the church (we've meetings everyday, its name is: The Light of the World)
- work on a personal project to improve my skills with Angular
- make a personal web portfolio
- make a personal project for improving my react native skills
- make a personal project for improving my compilers knowledge
- create a personal indie game and publish it
- learn unity
- contribute to opensource projects like Rosalila Engine
- learn Haskell better
- create and publish an npm module
- practice guitar
- read a book before sleep

Obviously I always ended the day frustrated because I couldn't be committed to all that stuff in a day, I just ended doing ones more than others or nothing at all.

But then I realized the actual issue was I was trying to do everything at the same time, so because of that I was feeling I had no time in the day for completing everything I wanted do.

I still got a huge list of TO DO things in Trello, but now I just decided to make goals for each one and start completing them one by one or at least a few ones by every month.

The key is just to start by prioritizing the ones you love, the ones you believe in, but one by one without getting your responsibilities out.

I will start to contribute to opensource projects from little changes to meaningful ones in an increasing way, and I recognized too that I support open source community by writing posts and helping people in forums, chat channels, video tutorials and stuff like that.

thanks for reading and wish me luck on the journey! ;)

Forem: Kevin J. Estevez

CSS container queries with SASS mixins

For Media Queries

For Container Queries

I'm a lazy Dev

Tips

What language should I use?

One script to rule them all!

Patterns would make it easy

Document your scripts

Templates!

Bash Template

Bonus! (For the Laziest Devs Only)

Note

Get Lazy!

Conciliation Branch in Git

Commands:

And that's it!

My hacktoberfest adventure!

The font-size trick in layouts

HTML

CSS

Fooling!

Problem solved!

Conclusion

Before you go!

EasyASM, Ramping up in Assembly

But for education purposes

ideras / EasyASM

MIPS32 and x86 simulator for easy learning of assembler language

EasyASM

Installation

Linux (Debian based distribution)

Windows

Usage

A bit of History

Setup

Running

Usage

EasyASM's own helper commands

My GitHub Profile

KenyStev / KenyStev

Hi there, I'm Kevin 👋

Here the plugins I used to have polished like that:

Interview Tests/Challenges, what companies are looking for?

My reasons? there we go:

Looking for a Junior compiler position

Understanding how `this` works in Javascript - Default Binding

Understanding how `this` works in Javascript - The call-site

Kevin J. Estevez ・ Mar 18 '19

Understanding how `this` works in Javascript - The call-site

4 types of binding this

How to declutter the bunch of stuff you want to do at the same time?

2018 journey

awesome study year

life changing year

4 types of binding `this`