Forem: Gabriel Lazcano

Create your own middleware in Chi

Gabriel Lazcano — Fri, 16 Jul 2021 04:09:35 +0000

Link to original article (recommended): https://gabriellazcano.com/blog/create-your-own-middleware-in-chi/

Introduction

chi is a lightweight, idiomatic and composable router for building Go HTTP services.

I've had some trouble recently in finding out how the chi library works. It is definitely powerful and in my opinion one of the best alternatives out there. You can check out the features and the performance if you want to make an informed opinion for choosing it.

In the GitHub they briefly show an example of how they are using it but they don't dive much into it. It's pretty straightforward actually.

You call a middleware using r.Use where r is the router. Either a nested router like in this example.

r.Route("/user", func(r chi.Router) {
    r.Use(user.UserContextBody)
    r.Route("/{username}", func(r chi.Router) {
        // your code
    })
})

Or the main router

r := chi.NewRouter()

// middleware stack
r.Use(middleware.RequestID)
r.Use(middleware.RealIP)
r.Use(middleware.Logger)
r.Use(middleware.Recoverer)

What is a middleware in Chi?

A middleware is a function that receives a http.Handler and returns a http.Handler. Yeah it's not quite self-explanatory.

Anything you can do with the standard library you can do. We just have to serve the http.Handler from the parameter, you can find it as next in the Chi library.

func UserContextBody(next http.Handler) http.Handler {
    return http.HandlerFunc(func(rw http.ResponseWriter, r *http.Request) {
        var user User 

        err := json.NewDecoder(r.Body).Decode(&user)
        if err != nil {
            fmt.Println(err)
            return
        }

        ctx := context.WithValue(r.Context(), "user", user) 
        next.ServeHTTP(rw, r.WithContext(ctx))
    })
}

In the example above I'm getting the body of the request, decoding it into a struct and adding it to the next handler, this is how we can chain multiple middlewares.

And as you may have noticed we are using context this is to pass values throughout the handlers. We have to pass the context (for passing it from previous middlewares), a key and the value. You can check the documentation for context

Get the context

In order to get the context either from another middleware or from a route handler, we have to call the context function from the http.Request and get the key we used while defining the context, then we have to pass type of the context we are passed. In this case we were passing a User struct but it could be a string, and int or whatever type it's being passed in the context.

// example for getting a string from context
ctx := r.Context()
key := ctx.Value("key").(string)

r.Use(UserContextBody)
r.Route("/{username}", func(r chi.Router) {
    r.Get("/", func(rw http.ResponseWriter, r *http.Request) {
        // your code
    })
})

r.Post("/", func(rw http.ResponseWriter, r *http.Request) {
    u := r.Context().Value("user").(User)
    // your code
})

Create a custom cursor that follows you and inverts colors

Gabriel Lazcano — Thu, 15 Jul 2021 22:47:42 +0000

Link to original article with examples (recommended): https://gabriellazcano.com/blog/create-a-custom-cursor-that-follows-you-and-inverts-colors/

To achieve this we are using the mix-blend-mode CSS property with the value difference which basically inverts the color of the content it has below it.

.container { 
    width: 100vw; 
    height: 100vh; 
    background-color: white; 
    position: relative; 
}

.circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
}

Here we are positioning the circle absolute to the container, giving it a size and with border-radius we are making the div a circle. I disable the pointer-events or we are not going to be able to select any text or really doing anything on the site, we would always be clicking on the cursor div.

Setting the background-color to white in both the .container and the .circle is needed for this to work. In this tutorial I’m just going to use white but it can be done with any color. It just gets the inverted colors and then css just gets the difference.

And we start to see that it blends already. We just have to make the circle to move.

const cursor = document.querySelector(".circle")

function getDimensions(e) {
  cursor.style.top = `${e.clientY - 25}px` // -25px for the size of the circle
  cursor.style.left = `${e.clientX - 25}px`
}

window.addEventListener("mousemove", (e) => {
  getDimensions(e)
});

And it’s working

Bonus: MouseMove Optimization

While it’s working, if you add a debug getDimensions function you might see that there are lots of calls to the function. And this could impact performance.

There is a really known way of solving this problem. By throttling the function calls only firing it once the mousemove event idle for time, in this example 250ms.

const delay = 250

// ...

function throttle(callback, limit) {
  let wait = false
  return function () {
    if (!wait) {
      callback.apply(null, arguments)
      wait = true
      setTimeout(function () {
        wait = false
      }, limit)
    }
  }
}

window.addEventListener("mousemove", (e) => {
  throttle(getDimensions(e), delay)
});

You can get the complete implementation in this link

How to auto adjust font-size to fit div

How to run a .exe without opening a prompt in Windows

Gabriel Lazcano — Mon, 12 Jul 2021 23:25:56 +0000

Link to original article (recommended): https://gabriellazcano.com/blog/how-to-run-a-exe-without-opening-a-prompt-in-windows/

Introduction

I was doing a Golang Shortcuts application and I wanted to run my program in the background without having a prompt in my taskbar all the time.

After investigating I found out this can be achieved by calling the .exe from a .vbs file is a pretty easy way of accomplishing this. You just have to create an object shell and run the .exe with these parameters.

VBS File

Set Shell = CreateObject("WScript.Shell")
Shell.Run "C:\users\dirofyourexecutable.exe", 0, False

Shell.Run receives the path of your executable, an integer indicating the appearance of the programs window, and a boolean indicating whether the script should wait for the program to finish executing.

You can check all the available settings for intWindowStyles

Run on start

If you wanted to run this file when Windows Starts you just have to paste it in the Startup folder located in "C:\Users[username]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup" or just type startup in the explorer bar

How to Inject Javascript to a Site From Chrome Extension

Gabriel Lazcano — Mon, 12 Jul 2021 23:23:04 +0000

Link to original article (recommended): https://gabriellazcano.com/blog/how-to-inject-javascript-to-a-site-from-chrome-extension/

Introduction

I was watching a Twitch streamer struggle trying to do this. So I thought it might help someone out there.

You can inject javascript code into any site with a chrome extension, with this you can do many things. Like creating new elements and adding them to the DOM or managing events of certain elements, what you can do in your application you can do it when injecting it.

Manifest version 3

If you want your script to run on a set of pages you have defined, the manifest for your chrome extension which is needed for it to work (you can have a look a the documentation), needs to have some additional elements. content_scripts and host_permissions

Both the matches and host_permissions should specify match patterns. In this example inject.js only runs whenever the site is google.com, and you have permissions in all the urls.

{
    "name": "inject",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": ["*://*.google.com/*"],
            "js": ["inject.js"],
        }
    ],
    "host_permissions": ["<all_urls>"],
}

This is an example of the code that can be injected. You can add event listeners, get and add elements from the DOM as I mentioned before.

function init() {
    const el = document.createElement("input")
    el.setAttribute("type", "checkbox")
    document.body.appendChild(el)
    el.addEventListener("click", (event) => {
        console.log(event.target.checked)
    })
}

init()

My Thoughts on Github Copilot

Gabriel Lazcano — Fri, 02 Jul 2021 19:07:19 +0000

Link to original article: https://gabriellazcano.com/blog/my-thoughts-on-github-copilot/

There has been a lot of controversy and I should say fear since the announcement of Github Copilot. The common concerns are that it’s going to take jobs from programmers or that it’s going to make a generation of coders that don’t know how to code and solve problems.

Regarding the first point, I don’t actually think it’s going to take jobs from established programmers but that it will make junior programmers' life harder. As the most basic things are being automatized they will have learn much more than before to make a living of programming. We are seeing this trend with tools like webflow for creating landing pages and other simple applications instead of requiring a junior programmer for that matter.

Returning to my first idea, automatization helps more senior developers with more mundane and repetitive tasks. This will make coding be faster, more effective and productive. And while Copilot seems to have really advanced capabilities, it seems to be lacking on using the context of your application as a whole, you will still be the one solving challenges. Solving challenges is why you are required and how you do it is secondary.

I believe Copilot is a more advanced alternative of what we have now, Stackoverflow. We are so accostumed to it that we don’t see that when we copy and paste code from Stackoverflow we are doing basically the same thing Copilot aspires to do but more effective, as I mentioned before. However, we don’t have to rely on either Stackoverflow or Copilot to do all the work for us. If you are a person that just copies code from other places and call it a day you must definetely be worried about Copilot taking your job but that is not certainly the case for most of us.

We have to stop fearing innovation and start embracing it, we humans have the same fears as thousands of years ago. Innovation could kill some jobs but create others, the first “computers” were people who were skilled with mathematics who were used to undertake long and often tedious calculations.

Did you find this post interesting? You can share your thoughts with me on Twitter or point me out something. Thanks :))

Don't make your SQL requests like this! Dont get hacked: SQL Injection

Gabriel Lazcano — Fri, 02 Jul 2021 19:06:10 +0000

Link to original article with code snippets and videos (recommended): https://gabriellazcano.com/blog/dont-make-your-sql-requests-like-this-dont-get-hacked/

Introduction

So I’ve been learning SQL and something came to my mind. How safe is this, I won’t lie I’ve heard of SQL injections before but never really got into it. But now I know it’s really a dangerous tool if you are not doing things correctly, and the best way of preventing this is knowing how to do it. Also for what I’ve investigated it seems that a lot of sites are vulnerable to this kind of attacks so we have to make awareness of the topic.

The vulnerability

The vulnerability is because we are concatenating to the SQL request, making it possible for people to modify the request using their knowledge on how it works. This is further explained in the original article. Sorry for the inconvenience but I found it impossible to structure it here in dev.to

Braces Validator with Javascript: Stacks

Gabriel Lazcano — Sat, 20 Mar 2021 18:29:57 +0000

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/braces-validator-with-javascript-stacks/

Today I was messing around doing some CodeWars challenges and some problem got my attention. It was to make a braces validator. The rules are simple, given a string we have to determine if all braces are matched with the correct brace. You can check out the complete kata here.

"(){}[]" // True
"([{}])" // True
"(}" // False
"[(])" // False
"[({})](]" //False

So I started trying different ways. But none seemed to work. Then I remembered there were this magical data structures called stacks.

Stacks are a data structure that work by pushing and poping elements.

In this particular example I am first defining if the stack is empty or not, if it is I have to push the first element. And from then start comparing the current element to the last pushed element. For the comparison I am using a functionality of JavaScript, whose name I don’t know, which basically works by indexing an object with a string.

So in an object I just have to define the counterpart of the brace and it’s has an access time of 1.

If the current brace is not equal to the last one in the stack it will get pushed into the stack. If it is it will not push the current brace and it will pop the last element in the stack. So if there is any element left in the stack it means that the string is not valid either because some brace has no counterpart or because some brace is opened and closed in between other.

Reactive Variables are the BEST feature in Svelte

Gabriel Lazcano — Sat, 20 Mar 2021 18:28:09 +0000

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/reactive-variables-are-the-best-feature-in-svelte/

Well, maybe I’m exagerating a little bit. But for real, reactive variable are such a good feature I don’t know how other frameworks haven’t copied it to it’s full extent yet.

They work like this, you declare a variable and if the variable changes it triggers another variable to change it’s value if it’s related to the initial variable.

You can see a similar example in the docs . But what this basically does, is that every time we change the value of the input it would change the double variable to be times 2 the a variable.

And you could do lots of things with it.

Changing the document title.

And even calling functions. For this I have the perfect example, making an svg triangle with the sides being reactive. And also using the reactive variables feature to get the hypotenuse with a neat one liner

https://codesandbox.io/s/brave-einstein-2hfx4

Thanks for reading. If you’ve got any other example of how reactive variables could be used feel free to let me know :))

Why I Use Quokka.js for prototyping?

Gabriel Lazcano — Sat, 20 Mar 2021 18:26:40 +0000

Link to original article (recommended): https://gabriellazcano.com/blog/why-i-use-quokka.js-for-prototyping/

I’ve been doing some learning with typescript, and I’m really liking it but setting it up is a little messy mainly because you have to compile the program into a JavaScript file. And for a simple test I don’t find this convenient.

For example, if I’m doing some challenge for Codewars, or any other competitive programming platform using typescript is completely out of the way. You can work around this using nodemon but still the results are not as good as you could get with Quokka.js.

In my case I have it installed in VSCode and you get to see the results of the code you are writting as you are writting it and in a non intrusive way, without having a terminal opened.

And it’s pretty easy to install, you just have to search it in the extensions tab in VSCode.

To start Quokka.js on a file just type ctrl+k q or press f1 and type Quokka and you’ll see the options.

There’s to be noted that there’s a Pro version but I only use the community, because it has all the features I need really.

Once you start using it, you’ll see your code like this:

This is just something I learnt today and felt like sharing :))

Import 3D models to three.js

Gabriel Lazcano — Tue, 09 Mar 2021 17:02:52 +0000

Original article with code snippets (recommended): https://gabriellazcano.com/blog/import-models-to-three-js/

I’ve found threejs pretty tricky at the current state of the library. They are always making improvements and breaking some applications with the new updates. So here, I"m going to talk about how I’ve found it’s good to structure your threejs application for importing 3D objects. Here is a working example.

https://gabriellazcano.com/blog/import-models-to-three-js/

The current version of threejs doesn't require any special tags in the HTML, only the <script type="module"> tag where we are going to develop the logic of the program.

When using type="module" we can use the features of es5 such as import so we are going to use them. We have to import threejs and GLTFLoader. And any other component you use, such as OrbitControls. I'm going to define some variables gloablly as I'm assigning them afterwards in the init() function. You can extend on the configuration in this function in the documentation

For adjusting the size when changing resizing the window we have to add an event listener and to change both the aspect ratio and the size of the renderer.

Now we have to load the object and define the lighting for the scene.

To add a simple animation rotation to the model we have to add or substract to the rotation of the object in every animation frame, for example. However, there are much more ways of animating and with different purposes.

Create a secure Isolated Iframe

Gabriel Lazcano — Tue, 09 Mar 2021 03:40:15 +0000

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/create-an-isolated-iframe/

You might have heard that if you create an iframe, your site might becomes vulnerable to cross-site attacks. And this is true. So there is a way of creating an isolated iframe in order to make it more secure.

This can be achieved just by using the attribute sandbox which enables an extra set of restrictions for the content in the iframe. And being capable of enabling only the required tooling for your iframe with the following attribute values:

allow-forms: Allows form submission
allow-modals: Allows to open modal windows
allow-orientation-lock: Allows to lock the screen orientation
allow-pointer-lock: Allows to use the Pointer Lock API
allow-popups: Allows popups
allow-popups-to-escape-sandbox: Allows popups to open new windows without inheriting the sandboxing
allow-presentation: Allows to start a presentation session
allow-same-origin: Allows the iframe content to be treated as being from the same origin
allow-scripts: Allows to run scripts
allow-top-navigation: Allows the iframe content to navigate its top-level browsing context
allow-top-navigation-by-user-activation: Allows the iframe content to navigate its top-level browsing context, but only if initiated by user

If some some reason you are using injected HTML, as it is useful for many frameworks like Hugo, or you just want to type the inline HTML, you can use the attribute srcdoc which lets you do this securely. Which is the same as src attribute but not cross domain and other differences. Such as being secure in in legacy-browsers and secure browsers.

How to Auto Adjust Font Size to fit div

Gabriel Lazcano — Sat, 06 Mar 2021 16:49:03 +0000

Original article with code snippets (recommended): https://gabriellazcano.com/blog/how-to-auto-adjust-font-size-to-fit-div/

I’ve been trying to get a solution like this for a long time already. As I didn’t find anything apart from libraries from JQuery I decided to make my own implementation with vanilla JavaScript. I know there must be ways of optimizing my code completely with some algorithms and such. Feel free to let me know if you found something or you want to share something :)

Detect Overflow

So I decided to take this path. Calculating if the div has overflow and then work the font-size afterwards. This is how we detect if a div has overflow:

And it’s time for the main function! My thought process here was, if I start the font-size with 0.1em I can increase the font size by a fixed rate until I get an overflow point in the div. For not overflowing I save the last size in a variable and substract the incrementation to get the last point when it wasn’t overflowing.

And we have it. We are adjusting the font-size already. To make it to work when resizing we just have to call to the function when the window resize event happens.

If you’ve read my other post you might have already noticed that doing handling the event this way is not very performant. So we are going to use the same technique. We are going to throttle the function calls to have a delay of 500ms.

So now it’s working completely. You can check at the CodePen in this link for the full implementation.

Forem: Gabriel Lazcano

Create your own middleware in Chi

Introduction

What is a middleware in Chi?

Get the context

Create a custom cursor that follows you and inverts colors

Bonus: MouseMove Optimization

Related Posts

How to run a .exe without opening a prompt in Windows

Introduction

VBS File

Run on start

How to Inject Javascript to a Site From Chrome Extension

Introduction

Manifest version 3

My Thoughts on Github Copilot

Don't make your SQL requests like this! Dont get hacked: SQL Injection

Introduction

The vulnerability

Braces Validator with Javascript: Stacks

Reactive Variables are the BEST feature in Svelte

Why I Use Quokka.js for prototyping?

Import 3D models to three.js

Create a secure Isolated Iframe

How to Auto Adjust Font Size to fit div

Detect Overflow