DEV Community: Lucas H.

Detecting colors

Lucas H. — Wed, 02 Oct 2019 18:01:44 +0000

Hey everyone! I'm currently working on a script which detects the color of a few pixels on the screen about 30-60 times a second, to detect game states (health bar), live.

I'm doing this with Python, to integrate with OBS (a recording program).
I'm pretty new to Python, I've only worked with it for very short amounts of time.

I've looked on Stackoverflow for a small while and found someone using this script:
from PIL import ImageGrab import time time.clock() image = ImageGrab.grab() for y in range(0, 100, 10): for x in range(0, 100, 10): color = image.getpixel((x, y)) print(time.clock())
[Source]

Here, they use the 'for' loop in Python, with variable y and x, with Imagegrab imported.
I do not understand how 'for y in range(0,100,10)', or 'for x in range [...]' works. How does this notation work? How would I customize it to fit the pixels I want to track, which are specific to only like three, all on different locations? (I don't need more, I only need to track one because one is more than enough to see the color, right?)

Thank you guys in advance for your answers, you're awesome.

-- Lucas.

Breaking the CSS stigma: my step-by-step CSS cheat sheet.

Lucas H. — Sat, 21 Sep 2019 12:14:41 +0000

🔥 Don't forget to follow me on Twitter! Let's link up. If you like this article, feel free to follow me, I'll be pushing out even more content soon (at least one article a week)!

CSS is not hard but can be incredibly frustrating at times; it's often hard to find the 'correct' methodology for what you're trying to get done. To me, it often feels like I shouldn't think about styling that much, but using a specific methodology has proven to be pretty useful. There are a few steps I would recommend following, and a lot of resources that I'm sure you'll find useful.

I hope this article helps you organize your step-by-step process for writing good CSS.

Step one: preparation, body and :root 🌟

Don't know what :root is? I didn't either. Check out this article from CSS-tricks, they explain it very well.
Step one is good to prepare your CSS styling by setting anything you want in the <body> element and :root selector. Some things you might want to style in these:

Background color (background-color)
Document-wide padding (padding)
Fonts (font-family, font-style, font-size)

Note: defining font-size in :root allows you to set the standard for em measurements (so you can set that to 16px and 1em will be 16px guaranteed)

Step two: container 💭

The container class should be the div in which I store the entirety of the app. In here, I define:

The min-height, 100vh for example
The max-width, 730px for example.
The width of the app, usually 100%.
Whether I want to display it with flexbox or not: display: flex; (why not? :D)
The flex-direction: row is the default, which is handy for nav-bars, and column for top-to-bottom applications
How to align things horizontally: align-items
How to align things vertically: justify-content

Step three: more containers💻

Inside of your parent div, put more divs for the app itself. Want to use a grid-system that doesn't hurt your brain? Check out bulma.

A differentiating background color if you want it to stand out
The width within the container, e.g. 100%
The maximum width your app can take within the container, can be done with calc(100% - {{your amount of pixels}} ) for example!
The border and/or drop-shadow (box-shadow, border, border-radius)
More flexbox: how do you want to align things internally, inside of the container?
Center things inside of the container (because it's aligned left inside of the now-centered container, most likely): align-items: center;

Last step, step four: the elements

Before this step, it has been mostly following along each step and you can style the basis easily. Now, you'll need to take the wheel. I can't decide what elements you have inside of your app, but I can give you some best practices:

Make sure to practice very clear styling
Your CSS may not work on every browser!! Check out this amazing application if you're wondering what you can and cannot use with CSS.
ARIA attributes are nice for visually impaired people (that use screen readers). Check out a great article on that here.
Steal! Using CSSscan is super useful for learning CSS. If you see a form that looks amazing, don't be afraid to look at the CSS and find out how to do it yourself. Take the CSS you like, tinker with it, make it your own, and be proud of the fact you just saved yourself time. Don't go overboard, though (genuinely fun article, go read it!)
Animation is a w e s o m e, and clarifies things if you don't overuse it. So use it! Here's an article on that - though I'll also be writing a few on CSS animation too, with some specific uses for fun.
Frameworks are fun, but don't forget to learn the basics! It's easy to get caught up in using things like Bootstrap, TailwindCSS, Bulma, or any other framework that's buzzing right now, but learning how to style yourself is important. These frameworks are temporary. Actual skill in styling and design is forever, and will forever benefit you. Also, you look super cool when someone looks up what framework you're using and it turns out you're not using one 😎⛱
Gradients, and blobs
CSSreference and HTMLreference

Getting Started with Vue.js (CHEAT SHEET)

Lucas H. — Sun, 15 Sep 2019 12:29:55 +0000

Vue is an awesome JavaScript framework to create interactive light-speed web-apps. Being new to Vue, I naturally weigh towards making summaries of what I've learned to remember it for longer periods of time. This is one I made a while ago. I focus on a few things when making my summaries.
1: Readability. If we can't read it well, then what's the point? I don't like using too much JavaScript Jargon, so I make sure to make it as humanly written as I can.
2: I like to keep it simple, but structured and consistent.

If there is something you think can be better, please correct me on Notion or DM me on Twitter.

👋 Please follow me on Twitter, let's chat! 👋

Installing Vue 🌟

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Installing Vue is simple. A single line of code is needed to implement it into your page. If you want to go and make a full-on web-app you'll want to use the Vue CLI/UI, though. Tutorial coming soon on that!

EDIT: you need to put the Vue script and your own original JS at the bottom of the page to have it work, please remember that!

Using Vue 😎

To use Vue's basics, you need two things:

The HTML
- An element to mount by ID
The Vue script to initialize the element

To start off, let's take a look at this HTML code:

    <div id="app">
      Hello, {{ message }}!
    </div>

Now, say we want to have a dynamic message in the {{ name }} tab. How would we go about this?

Note: the double curly brackets are used to indicate to the browser that this references JavaScript. This is the case in any framework that works like this.

Let's write the code for this and take it apart:

    var app = new Vue({ // initalize the vue instance and include all details in ({})
    el: #app, // almost always detail #1: the element to mount (specificy).
    data: { // if we want to utilize data, we'll need to feed it some.
    name: "Lucas" // This is the {{ name }} we'll utilize
    }
    })

A Vue instance is an object with a lot of details. We overwrite some of those details and add to that. If you don't get this notation, study objects in javascript.

React(ivity) 🎶

We're trying to make an interactive web-app, so we'll want to add reactivity to our web-app. We can do this using directives.

`V-if` ⛱

To only show an element if the data returns true, we can use the following HTML, given that we've imported, we can use the following code:

    <div id="app">
    <span v-if="seen"> Now you see me </span>
    </div>

Now, if 'seen' is true (which should reside in your data element for now), this span will show. The JS for this:

    var app3 = new Vue({
    el: #app,
    data: {
    seen: true
    }
    )}

In this case, this span will show. Easy, right?
v-if is a directive. Let's cover more directives.

`V-bind` ✨

The v-bind directive is used to reactively update an HTML attribute. The short-hand for V-bind is :. It is best practice to use the shorthand. Here's a quick example of the HTML usage of the v-bind directive

    <a v-bind:href="url"> Click me! </a>

Let's take this apart:

V-bind: is the basic directive. This is always included.
After the colon : we include what attribute we want to bind, in this case href.
- Note: you can find a list of bindable attributes in JS terms here.
Then, as with any attribute, we use the = to input the string that will tell us what we're binding with. In this case url.

V-bind is useful for creating dynamic layouts, changing URL's, etc. A use case can be binding backgroundColor to the most upper div to let users change their own BG colors. Any needs for reactive styling can be fulfilled here.

`V-on` 📩

The v-on directive is used to bind DOM events to Vue methods. The shorthand for v-on is @. Let's cover a quick example:

    <div id=app> <button @click="trigger"> </button> </div>

Let's take this apart:

The @ is the shorthand for v-on
click is the DOM event we're watching for
="trigger" tells Vue to execute this method or function when the DOM event is detected.

Note that the click event must occur on the element, not outside of it.

`V-for` 🔥

The V-for directive is used for for creating a list from an array. V-for loops over an array to create a list. Take a good look at this syntax, I was confused by it at first:

    <ul id="example1"> <!-- note that you do NOT need to mount this specific element for this -->
    <li v-for="item in items">
    {{ item.message }}
    </li>
    </ul>

And the JS for this:

    var arraylist = new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Hello!' },
            { message: 'List item two :)' }
            ]
        }
    })

So let's take this apart:

First, again, we mount the element properly. Does not need to be the ul element.
Then, we add the data. We add the 'items' array, too.
The items array consists of two unnamed objects that both have a message in them
The il calls for item in items. item is the name we give to any item in the array to then reference it inside of the il ****element.
Now that the DOM is prepared to loop through the array, we can specify even more: what will you loop through?
In this case, we will loop through every message inside of items (every item in items)

`V-model` 🤯

Say we want to use the user's input as a model for what we see on screen... See what I did there? That's exactly what the v-model directive does. It allows for easy form input bindings. Let's take a look at the code:

    <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    </div>

That's basically it. Do not forget to define what the default of "message" is in the JS part:

    var app1 = new Vue({ 
    el: "#app",
    data: {
    message: ""
    }
    })

`V-text` 💭

A v-model for text except it's not v-model at all and you can just bind text values from anywhere dynamically to the text.

    <p v-text="Hello!"> </p> // Now the text will display "Hello!"

`V-once` 💯

V-once requires no arguments. It tells the DOM to not reactively update everything inside the element according to Vue.

    <span v-once> {{ name }} </span> // will not update reactively

This will be a series! Next I'll be going more in-depth, doing a few tutorials for Vue.JS, how to achieve various things, before moving on to the Vue CLI & Vue UI.

👋 Please follow me on Twitter, let's chat! 👋

https://upscri.be/za52nm

Super handy program for increasing productivity on one screen

Lucas H. — Thu, 29 Aug 2019 21:43:21 +0000

Hey everyone, just saw this new application launch by someone on Twitter. It seems pretty gamechanging for one-screen environments (for me for my laptop for example). 😎

It allows you to switch applications with a super simple shortcut: alt+[number 1-10] 🙌

Now, it may seem unnecessary because you've got Alt+tab, but it's been pretty handy for me so far! Check out the demo video: 💕

If you want to download it, you can do it here, it's 100% free & opensource: https://ahkohd.github.io/switch-desktop/ 👀
Check out the source too, and maybe give it a star:
https://github.com/ahkohd/switch-desktop 🙌

Note: I did not make this. I just wanted to share it with the community because it's really handy for use on my laptop, where I have limited screen and constantly switch between apps with alt+tab, which becomes tedious and annoying when you have loads of programs open

Is JavaScript a hard language to learn? (and other things)

Lucas H. — Tue, 27 Aug 2019 16:32:50 +0000

In a rush? I've marked the questions with bold to make it faster to read, don't mean to waste your time! :)

Hi everyone 👋, hope you're having an amazing day. My name is Lucas, I've been learning Javascript recently. I'm quite new to developing, and I was wondering, is JavaScript said to be a hard language generally, and if not, what would be some languages that are identified as 'hard'?

Now that we're on the topic, I'd also be really interested if any of you have any amazing resources you would suggest for learning JavaScript. So hard I've found Egghead.io pretty awesome myself. How condensed the information in each tutorial is and that it is well-edited is great. The speed and quality of each tutorial allows you to grasp relatively hard concepts to learn quickly.

I'm really curious to see your answer(s)! 👀

EDIT: thank you all so much for your responses!! I REALLY appreciate it!