Pico8 looks interesting...
This was made with Asprite as always.
]]>Pico8 looks interesting...
This was made with Asprite as always.
]]>
This was made with Asprite as always.
]]>For now, my first learning source was Youtube. I started to watch a lot of pixelart art channels for begginer tips and tricks to start making my first compositions.
One thing I learned is not to start making big pixelarts canvas, instead you can start with a 8x8 canvas. It's more easier to create very little drawings and you have more control about space and colors.
This is my first composition, its like a Mario's Ghost but witk a pink ink. This drawing has very little variations (same color but different shades) to start making shadows and lights.
I think it's pretty good just for my first (real) attemp.
When I was a child, I had only three videogame consoles; the ps1, ps2 and the GBA.
I missed a lot of "new" games until I got a PC and I started to play more "new" games. Even then, the PC was an old mini-laptop with only 2 GB of RAM.
That's the reason I used to play emulators for the SNES, Gameboy and GBA and I fall in love with the retro style.
As you can see on this website, I like the pixelart style. So, why not start to making it?
I always think I'm not an artsy boy. I have zero art skills... I don't like that.
That's why I started with pixelart. The i love the retro style + i wanna make some art that doesn't suck
That boring introduction was for this little guy.
My first pixel art ever made.
This was made with Asperite and just a little bit of time.
It was made on the fly, and the color palette I chose was random.
I don't remember the canvas size.
Ghost Love makes me happy because it's a reminder that I can make art.
]]><details> tag, I found a website called justfuckingusehtml. It's a really good reminder that you can do many things natively with HTML elements that people (myself included) usually handle with other tools or frameworks.
I was surprised by how many HTML tags exists that I didn't even know about. Even though I work as a front-end dev, I barely use them at work.
I just hit Inspect element to see all the tags and how they work.
I saw the classic ones <em>, <b>, <summmary>, the surprisingly good <dialog> and a lot of options for the input tag. But after reading the whole article, I wasn't satisfied I knew that if I there were so many HTML elements I didn't know, there must be even more out there I still don't know about.
So there is a list of some obscure HTML elements that I think are really awesome.
I had NEVER heard of something like this. Maybe because I'm not on the right side of the world.
The <ruby> and <rt> tag create a small annotations for a main text. They're usually used for explaining
pronunciation or the meaning of certain characters like, Japanese Kanji.
漢 字
<ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby>Of course, you can use the <ruby> with any character, not only the Asian ones:
<ruby>résumé <rt>reh-zoo-may</rt></ruby>I think looks cool and it's also very helpful if you want to explain one concept more clearly.
The <kbd> tag represents the keyboard input, simple as that. It's typically represented with
the browser default's monospace font.
Please press Ctrl + Shift + R to start a new game
Move your character using h j k l keys
<p>
Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to start a new
game
</p>
<p>
Move your character using <kbd>h</kbd> <kbd>j</kbd> <kbd>k</kbd>
<kbd>l</kbd> keys
</p>That looks way better than just writing the keys directly on the HTML. And remember, it's a simple HTML tag, so you can use CSS for making look however you want.
Do you remember those days on the school? I was in love with using markers for my notes. I don't know what I liked the most, was it the color or was it the aroma? ┐(´∀ ｀)┌
The good news is that you can make something like that on HTML using the <mark> tag. Commonly used
for making highlight of something important or relevant content.
The most important finding was that 90% of users preferred the new design over the old one.
<p>
The most important finding was that
<mark>90% of users preferred the new design</mark> over the old one.
</p>So, don't let your readers lost any important information and use it.
This is the hidden gem from the list. If your website uses this, you're without a doubt a cool person. Have you ever wanted to create a visual representation of links? Maybe literally making an image where you can click on different areas, and each one redirects you to a different place?
Well, you can do it with the <map> element, and the good news is that it has full browser support.
Let's see this example i grabbed from w3schools.
This is a simple img tag, but you can click on certain elements inside. Try to click on the computer, phone or the cup of coffee.
Do you see it? It feels like MS Encarta from the 2000s! I personally love it. The best part is that you can use images or SVGs! And instead of triggering something boring like an alert, you can redirect to another page, show a hidden HTML element, or trigger any event you like.
<img src="/assets/images/workplace.jpg" alt="Workplace" usemap="#workmap" />
<map name="workmap">
<area
shape="rect"
coords="34,44,270,350"
alt="Computer"
onclick="alert('Computer'); return false;"
style="cursor: pointer;"
/>
<area
shape="rect"
coords="290,172,333,250"
alt="Phone"
onclick="alert('Phone'); return false;"
style="cursor: pointer;"
/>
<area
shape="circle"
coords="337,300,44"
alt="Cup of coffee"
onclick="alert('Coffee'); return false;"
style="cursor: pointer;"
/>
</map>The <map> element defines clickable areas on an image. Each <area> tag inside specifies a region with coordinates, a link, and accessibility attributes. You can use different shapes: rect (rectangle), circle, or poly (polygon) for more complex regions.
HTML is a powerful tool (no wonder why is the foundation of the web) that gives you many options for doing common and not so common things! You don't need a new framework or even JavaScript for a lot of stuff. Let’s make our sites leaner and take full advantage of the tools the web already provides.
]]>As I mentioned before here on my blog, one of my goals of new years eve is to learn more about back-end development to Be a better Front-End Dev.
At my job, I already tried some back-end stuff with some languages:
The first path that I take was using Node.js, the decision was very easy to me. I already knew Javascript, so touching some AWS Lambdas and Micro-Services at my Job wasn't every hard to follow and to commit something to production.
It is fine (I guess) but I wanted to learn other thing more that Javascript to expand my horizons.
Later on, I started to work with Python, that is not completely new for me. In some point of my early dev career, I tried Flask to develop a simple REST API. It was very fun but not so much appealing for me to keep me in that way of back-end development.
Thank god that the projects that I've been working at my job are very well designed and with good project structure. Even the test are very simple straightforward to follow. Committing a new feature for production? GG izi.
Python is fun, I enjoyed PyTest so much, even more than some unit test tools in Javascript, but at the end of the day I think that I need to learn some REAL back-end language.
The "REAL" word that I use before it refers better to "learn a compiled language" or some "blazingly fast language". Don't be so judgy, please.
So Go was on my eye for a while. I watched a lot of videos about on Youtube and gives me a lot of good impressions:
Ewww.
I highly recommend to check to official documentation first. It's every well written, almost well enough as the Elixir documentation chef kiss emoji.
Next, you can GO (get it? hahaha :c ) to this next resources:
Later on I started to building something for and by myself. I'm working in a very simple CLI program to publish my Obsidian notes here on the blog and a Pokemon project... shhh is secret for now.
I'm very new to Go so I can't offer new ways for learning it, what I can offer you is a very well respected Youtube channels to continue with your journey
Good luck!
]]>Made with ❤️ and (coffee, mushrooms, sugar, etc)
Even I use to have it in my old sites.
A was thinking about it. It's kind of weird, isn't? It's kinda like a meme of web-development.
No one knows where this trend began and I think that is very hard to know it, there is no metrics for this (maybe because it doesn't matter).
I think this is a LIE, yes a very hard lie to tell to our users. Ok, ok, I'm not judging your love and dedication for your site. I think is just a cliche and very burned by now.
]]>It's not so much hard to use despite the insanely amount of memes on Twitter. Please, stop with the exit vim joke is not funny anymore.
I'll write a post about some programming jokes that aged like milk.
VIM comes with a config file, typically the .vimrc that is written in vimscript. Even though, is not that bad. I find it difficult to manually configure and the .vimrc file becomes so big if you add a lot of plugins to try.
NVIM uses Lua as an alternative to configuring nvim. It's a very easy programming language, you can learn the basics in a week and start using it with that, you can create a more organized structure to save your plugins and config files. Another advantage to using Lua is the community around it.
A lot of new plugins for nvim are written on Lua, making it faster than other languages like JavaScript.
Also, making my NVIM config modular helps a lot with the organization of everything.
Next, I'm gonna tell you what plugins I use the most.
This plugins are a must if you wanna improve you NVIM experience.
This is one of the plugins I use the most, one of the best fuzzy finders around here.
I like how fast it is and a lot of the options that you can configure with it. Search by file or by a regex expression with a nice UI and a lot of color-schemes are supported.
Try it: Telescope plugin
I see it as the NERDTree improved, very light and blazingly fast. You can use web-dev-icons. Extremely configurable but no overwhelming.
It's easy to learn all the keybindings, wanna add a new file? Just type a, edit? e, open? o. So simple and intuitive
Try it: nvim-tree plugin
Tree sitter it's a parser generator for our code in order to nvim can understand our code. This is very helpful because you can have a lot of cool features for your favorite programming language, like: syntax highlight, folding, text-object manipulation, etc.
The list of supported languages is huge and a lot of new features are being added to nvim.
Try it: nvim-tree-sitter plugin
This is one has increased my productivity a lot. Instead of open a new terminal somewhere else of changing between spaces I just open a new float term. Float term is just a terminal but... floating in your nvim space.
You can have a lot of float terms opened but one is just enough for me. The easy access is hot.
Try it: Float Term plugin
Those are my most "showy" plugins. I use a lot more but are just for tiny things like color colorizer, lsp config, color-schemes, etc. I strongly suggest that you vim config should be minimal as you can to get a faster start and use Lua instead of vimrc. This will make your life easier and happier.
If you wanna see all my nvim config you can check my repo nvim configuration
It's not that fancy so maybe you can understand everything there.
Well, that it! I know for sure that this plugins list will be changing over time but I will stay with the philosphy of less is more
]]>A new programming language: I'm thinking on Clojure, Elm, or Elixir. I need to understand better the concepts of functional programming and how to use them. Maybe I'll use this expertise to apply javascript.
A new pixel art tool: I used to work with Photoshop and Adobe Flash to make pixel art animations, but I don't want to use them anymore (I can't run any Adobe App now) so I'm thinking to use aseprite because I did some basic animation with it two years ago.
Blender: I did some 3D animations when I was like 16? on an old mini laptop that I had. It was good at the time with only 2 Gb of ram but man, the software is getting ram expensive. Maybe I can start to make some things with my new computer.
How to talk in public: Since 2019, I get the interest to do talks about tech with one cup of acid humor on it. The pandemic was a big problem here because there are no more live meetups and I just forget about it. With the online meetups, I can feel a chance to do it.
Back-end: Well, maybe this is kind of huge for me. I've been doing front-end stuff for a while and my backend skills are getting pretty bad. My experience working with Express and Adonis was pretty good, but it was simple things. I don't know anything about databases too. So, yeah. Maybe I'll buy a course from Udemy for it.
CSS Art: Yes, another art stuff. All the beautiful CSS art that is on codepen makes me want to do something similar. I'm not sure what exactly but some 3D CSS animations are on my eye.
Being fluent in Esperanto and learning more about romantic languages: Duolingo and Lernu are my best friends here.
That's it. I don't want to write more on this post to avoid feeling bad at the end of 2022.
Happy 2022!
]]>This is the place where I'm going to write about my life, my work, and my hobbies. The things that I want to save in a secure place instead of my head.
Why am I making this website and not using some other tool like medium? Well, the first reason is... I don't know how to make a website so I'm making this one.
The second reason is that I want control over the content of my posts and something very simple. I don't want paywalls, ads, etc. It's just a blog, not a new NTF collection.
Well, maybe I'll add some ads in the future. That's a bad joke please ignore it.
The next post will be about how I'm making this website and the resources I'm using.
But if you're a little impatient, you can check out this Github repo
I'm using Eleventy btw.
Quote of the day: You need to finish your shit before you start your next one. - IDK
]]>