Basket's dev blog

The Flawed State of Technical Evaluations for Software Developers

baskeboler@gmail.com — Mon, 03 Mar 2025 14:03:37 GMT

Technical evaluations for software developers, especially senior roles, often miss the mark by focusing on irrelevant skills like memorizing acronyms (e.g., SOLID) and solving competitive programming puzzles (e.g., reversing a binary tree). These exercises, rooted in academia, test recall and algorithmic trivia rather than the real-world abilities—system design, collaboration, debugging—crucial to the job. For senior developers, who rarely implement obscure algorithms but frequently tackle complex, practical challenges, this disconnect is particularly glaring. The result? A frustrating process that rewards test-taking over competence, alienating experienced candidates and leaving employers with hires misaligned to their needs.

Real-world scenarios—like debugging production code or discussing trade-offs—would better assess relevant skills, yet many companies cling to standardized, outdated methods for convenience. This wastes time and risks overlooking talent adept at the messy reality of development but not at whiteboard stunts. The fix? Shift to practical assessments—take-home projects, pair programming, system design discussions—that mirror the job, ensuring evaluations find developers who can truly excel, not just ace a trivia quiz.

Google Bard interpreta las creaciones de mi madre

baskeboler@gmail.com — Wed, 03 Jan 2024 23:11:55 GMT

A mi madre le gusta expresarse cuando hace pascualinas.

Le pedi a Google Bard que interprete la creación. Esta fue su respuesta:

La escultura que se encuentra encima de la tarta en la imagen es una estrella de cinco puntas. La estrella es un símbolo universal de la esperanza, la guía y la protección. También se asocia con la magia, la espiritualidad y el amor.

En el contexto de una tarta, la estrella puede representar una variedad de cosas. Podría ser un símbolo de la celebración, ya que las estrellas a menudo se usan para decorar pasteles de cumpleaños y ocasiones especiales. También podría ser un símbolo de la buena suerte, ya que las estrellas a menudo se consideran como portadoras de buena fortuna.

En la imagen específica que me ha enviado, la estrella está hecha de un material blanco y brillante, lo que le da un aspecto celestial. La estrella también está rodeada de flores, lo que le da un toque de alegría y celebración.

En general, la escultura de la estrella es una adición atractiva y significativa a la tarta. Es un símbolo de esperanza, guía y protección, y puede ayudar a hacer que la ocasión sea aún más especial.

Aquí hay algunas otras posibles interpretaciones de la escultura de la estrella:

Podría representar la estrella de Belén, que guió a los Reyes Magos al lugar de nacimiento de Jesús. Podría representar la Estrella Polar, que se usa a menudo como un punto de referencia para navegar. Podría representar una estrella de mar, que es un símbolo de la fuerza y la resiliencia. La interpretación final de la escultura es, por supuesto, subjetiva. Sin embargo, es seguro decir que es una pieza de arte hermosa y significativa que seguramente agregará algo especial a cualquier ocasión.

VS Code's killer feature: Live Share

baskeboler@gmail.com — Wed, 06 Dec 2023 17:02:20 GMT

Visual Studio Code (VS Code) has established itself as a leading code editor, renowned for its extensibility, customization, and user-friendly interface. Among its vast array of features, one stands out for its transformative impact on collaborative coding: Live Share. This powerful extension empowers developers to work together on codebases in real-time, eliminating the need for complex setups and cumbersome code sharing methods.

Seamless Collaboration Made Easy:

Live Share integrates effortlessly into VS Code, removing the friction of switching between applications or platforms. Inviting collaborators and initiating collaborative sessions require just a single click. This user-centric design sets Live Share apart from other free tools that often demand extensive configuration and setup.

Real-Time Collaboration with Instantaneous Updates:

Live Share's hallmark feature is the ability for collaborators to edit code simultaneously, with changes reflected instantly in everyone's workspace. This real-time collaboration fosters an environment ideal for pair programming, code reviews, and brainstorming sessions. Gone are the days of waiting for someone to finish typing before making changes or the confusion surrounding who made which modifications.

Beyond Basic Editing: A Rich Collaboration Ecosystem:

Live Share goes beyond simply facilitating code editing. It boasts a plethora of features that enhance the collaborative experience, including shared terminals, synchronized debugging sessions, integrated voice and video chat, and even a web interface. This comprehensive functionality positions Live Share as a one-stop solution for all your collaborative coding needs.

Unparalleled Accessibility:

Unlike many collaboration tools, Live Share minimizes the setup process. Installation of the extension, creation of a session, and sharing the access link with collaborators are all it takes to get started. This platform-agnostic approach, coupled with the web interface's availability, ensures that Live Share is accessible to everyone, regardless of their technical expertise or VS Code installation status.

The Undisputed Champion of Free Collaboration Tools:

While other free collaboration tools exist, none offer the same level of features, ease of use, seamless integration, and accessibility as Live Share. Many alternatives require additional accounts, extensions, or intricate configuration processes. In contrast, Live Share remains completely free, providing all the necessary features for effective collaboration, even for participants without VS Code installed.

A Catalyst for Collaborative Innovation:

Live Share is a game-changer for developers who need to collaborate on codebases. Its seamless integration with VS Code, real-time editing capabilities, rich collaboration features, intuitive design, and web interface accessibility elevate it to the top of the free collaboration tool ecosystem. Whether you are a seasoned developer or just starting out, Live Share is an essential addition to your toolset. If you seek to transform your collaborative coding experience and unlock the power of real-time collaboration, try Live Share and embark on the future of collaborative coding.

Clojure, explained by Donald Trump

baskeboler@gmail.com — Tue, 10 Jan 2023 12:53:58 GMT

"Clojure, let me tell you, it's the best programming language, it's going to make you so much money. It's the best, it's huge, it's incredible. It's like the Empire State Building of programming languages. Trust me, it's going to be huge, you're going to be very happy with it.

It's a modern dialect of Lisp, which is a great language, and it's functional programming. It's just like how I'm a winner, it's a winner. It's powerful and it gets things done, and it's not like those other languages that are all talk and no action. With Clojure, you're going to be able to handle all the data you want, and it's going to be very very fast.

And it's versatile, just like how I'm a genius in business and in politics. You can use it for anything, data processing, web development, even machine learning. It's like a Swiss army knife, it's got everything you need.

And it's efficient, just like how I run a tight ship. It's concise, and it's expressive. It's like a beautiful piece of art.

And let me tell you, it's the best. The best. You're going to love it, it's going to be so successful. And everyone else is going to be jealous, because they don't have it. It's going to be huge, just like me, the best."

tailwindcss is awesome

baskeboler@gmail.com — Thu, 05 Aug 2021 05:18:10 GMT

Fell in love with tailwindcss

Awesome ZEKE videos with improved audio track

baskeboler@gmail.com — Mon, 29 Mar 2021 20:24:47 GMT

There are a bunch of new ZEKE live videos in youtube. I grabbed a couple which had bad audio (the stereo track had only one good channel, so I converted it to mono) and replaced the audio track.

Here is one of the videos, the original is here: https://www.youtube.com/watch?v=Va3ImSGWb-8

This other video is one of my favorites, from "Pain in the grass", original: https://www.youtube.com/watch?v=rxfpHX43ZM8&t=147s

Enjoy!

Online Games

baskeboler@gmail.com — Mon, 15 Mar 2021 11:02:18 GMT

I rarely play online games because lag pisses me off. I've been hearing for some time now that modern online games are super fun and have very little lag so I decided to play some 2K21 online and see for myself the miracle of lagless online gaming.

how did it go?

a fucking nightmare. playing 2K21 online is a shitty experience and will make you want to die. the lag in the shooting indicator while shooting 3s or free throws is just as annoying as I expected it to be.

conclusion

fuck online games.

Disqus comments fixed

baskeboler@gmail.com — Mon, 15 Feb 2021 01:37:21 GMT

I am pleased to announce that disqus integration in this blog is finally fixed. So if you want to leave some feedback on any of the posts go ahead and try it out!

Better late than never :)

Using exercism

baskeboler@gmail.com — Sat, 13 Feb 2021 19:19:05 GMT

Exercism is an awesome tool you can you to test your mad programming skillz.

Here is a short terminal video I recorded doing a little demo of the basic exercism workflow.

Sending clojure data from the REPL to the clipboard

baskeboler@gmail.com — Sun, 31 Jan 2021 20:50:37 GMT

I wrote these utility functions so I could easily pprint clojure data structs into the clipboard.

(ns clipboard.core
  (:require [clojure.pprint :refer [pprint]])
  (:import (java.awt.datatransfer DataFlavor Transferable StringSelection)
           (java.awt Toolkit)
           (java.io StringWriter))
           
(defn get-clipboard
  []
  (-> (Toolkit/getDefaultToolkit)
      (.getSystemClipboard)))

(defn slurp-clipboard
  []
  (when-let [^Transferable clip-text (some-> (get-clipboard)
                                             (.getContents nil))]
    (when (.isDataFlavorSupported clip-text DataFlavor/stringFlavor)
      (->> clip-text 
           (#(.getTransferData % DataFlavor/stringFlavor))
           (cast String)))))

(defn spit-clipboard
  [s]
  (let [sel (StringSelection. s)]
    (some-> (get-clipboard)
            (.setContents sel sel))))        

; an alias for spit
(def  str->clipboard spit-clipboard)

(defn  pprint-data-to-clipbaord 
  "pretty prints a data structure into the clipboard"
  [d]
  (let [wr (java.io.StringWriter.)]
    (pprint d wr)
    (str->clipboard (.toString wr))))

(comment 
  (def my-data {:a 1 :b 2}) ;; a clojure map
  (pprint-data-to-clipboard my-data) ;; pprint the map into the clipboard!

chart.js reagent component and deploying libraries to clojars

baskeboler@gmail.com — Wed, 23 Dec 2020 22:10:33 GMT

Introduction

Recently I was integrating some charts with chart.js in my clojurescript/reagent application and I came across this neat little snippet in stackoverflow which I thought was worth wrapping into a new library.

I did not dig much deeper in search of an existing library that does this as I have been looking for an opportunity to implement and deploy a library to Clojars just to become familiar with the process.

So anyway, here is the fancy snippet:

(ns chart-cljs.core
  (:require [reagent.core :as reagent]
            ["chart.js"]))

(defn- show-chart-fn [canvas-id chart-data]
  (fn []
    (let [ctx        (.. js/document
                         (getElementById canvas-id)
                         (getContext "2d"))]
          
      (js/Chart. ctx (clj->js chart-data)))))

(defn ^:export chart-component [chart-data]
  (let [canvas-id  (str (gensym))
        show-chart (show-chart-fn canvas-id chart-data)]
    (reagent/create-class
     {:component-did-mount #(show-chart)
      :display-name        (str "chart-cljs-component-" canvas-id)
      :reagent-render      (fn []
                             [:canvas {:id canvas-id}])})))

Project Setup

I created the project using shadow-cljs running shadow-cljs init and added the most recent version of reagent as a dependency. Here is the shadow-cljs.edn file:

;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies
 [[reagent "1.0.0-rc1"]]

 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :modules {:main {:entries [chart-cljs.core]}}}}}

Generating JAR and POM

Reading through shadow-cljs docs, it is mentioned that the recommended/easiest way of deploying a cljs lib to clojars is with Leiningen. In order to use lein with our project we need to create a project.clj file in the root folder.

Here is mine:

(defproject baskeboler/chart-cljs "1.0.2"
  :description "reagent component for chart.js"
  :url "https://github.com/baskeboler/chart.cljs"

  ;; this is optional, add what you want or remove it
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}

  :dependencies
  ;; always use "provided" for Clojure(Script)
  [[org.clojure/clojurescript "1.10.520" :scope "provided"]
   [reagent "1.0.0-rc1"]]

  :source-paths ["src/main"]
  :repositories
  {"clojars" {:url "https://clojars.org/repo"
              :sign-releases false
              :username "baskeboler"  ; <- this is being ignored
              :password :env/CLOJARS_TOKEN}} ; <- ignored also
  :deploy-repositories [["releases" :clojars] ["snapshots" :clojars]]          )

I signed up for a user in clojars After signing up you need to create a deploy token in the screen below. This token is what you need to use as password when running lein deploy clojars along with your clojars user name.

References

The code is hosted in github
My toy karaoke application using the new dependency is here
Clojars

Deprecated and Current OpenGL "Hello World" implementations

baskeboler@gmail.com — Wed, 04 Nov 2020 00:37:18 GMT

This is what I was taught in school:

#include <GL/glut.h>
void display(void) {
  glClear(GL_COLOR_BUFFER_BIT);
  glBegin(GL_POLYGON);
  glVertex2f(-0.5, -0.5);
  glVertex2f(-0.5, 0.5);
  glVertex2f(0.5, 0.5);
  glVertex2f(0.5, -0.5);
  glEnd();
  glutSwapBuffers();
}
int main(int argc, char **argv) {
  glutInit(&argc, argv);
  glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);
  glutCreateWindow("HelloWorld");
  glutDisplayFunc(display);
  glutMainLoop();
}

This is the new way to do it:

#include "Angel.h"
void init(void) {
  vec2points[6] = {vec2(-0.5, -0.5), vec2(0.5, -0.5), vec2(0.5, 0.5),
                   vec2(0.5, 0.5),   vec2(-0.5, 0.5), vec2(-0.5, -0.5)};
  GLuintvao, buffer;
  GLuintglGenVertexArrays(1, &vao);
  glBindVertexArray(vao);
  GLuintglGenBuffers(1, &buffer);
  glBindBuffer(GL_ARRAY_BUFFER, buffer);
  glBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
  GLuintprogram = InitShader("vsimple.glsl", "fsimple.glsl");
  glUseProgram(program);
  GLuintloc = glGetAttribLocation(program, "vPosition");
  glEnableVertexAttribArray(loc);
  glVertexAttribPointer(loc, 2, GL_FLOAT, GL_FALSE, 0, 0);
  glClearColor(0.0, 0.0, 0.0, 1.0);
}
void display(void) {
  glClear(GL_COLOR_BUFFER_BIT);
  glDrawArrays(GL_TRIANGLES, 0, 6);
  gutSwapBuffers();
}
int main(int argc, char **argv) {
  glutInit(&argc, argv);
  glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);
  glutCreateWindow("HelloWorld");
  init();
  glutDisplayFunc(display);
  glutMainLoop();
}

in vec4 vPosition;
void main() {
  gl_Position = vPosition;
}

out vec4 FragColor;
void main() {
  FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

Building a Theming System with angular and CSS custom properties

baskeboler@gmail.com — Sun, 09 Feb 2020 16:21:41 GMT

Introduction
Difference between css and sass variables
Time to refactor
- Our theme model
Fetching theme details from the backend
Implementing the Angular service that applies the themes.
- Apply theme
- Scaffold light, dark and other variants
Subscribing to the current theme observable to listen for changes
Theme directive
Initialize your theme on application startup
References

Introduction

A very common task in web development is doing white labeling. Usually you start off adding a theme or two to your application, you set some wrapper class name in a container element and you add a block of sass in your styles and customize under that class.

<div class="container my-theme">

  <!-- my app content -->
</div>

Your theme sass file may look something like this:

// .. some imports  

.my-theme {
  $primary-color: #121212;
  $secondary-color: #ededed;
  // .. set all your variables

  @import 'generic-styles.scss';

  // You will probably end up adding custom snippets for specific themes.

  .analytics-section { 
    display: none;
  }
}

If you planned from the start to support white labeling then you probably wrote all the style rules using the relevant sass variables that you will later override.

After implementing more than 2 or 3 themes you will start noticing that this can get really messy. You will also notice that your css will have a lot of redundant code and the more themes you have, the more css code you will bundle with your application. Also, you will be loading all the themes css even though you will only use 1 theme.

Needless to say, this will not scale if we plan to support tens or hundreds of themes.

Difference between css and sass variables

Sass variables (and other preprocessor variables as well) get resolved at compile time, once your styles are compiled into CSS, they are replaced with actual values which you can no longer change at runtime.

On the other hand, CSS variables can be changed at runtime after your page is loaded. You could set a variable to a certain value as in the following snippet:

document.documentElement.style.setProperty('--myCssVariable', '#9efefe');

And your styles should reference the variable in some rules:

.some-class {
  color: var(--myCssVariable);
}

Once you set the css variable to some value, your view should immediately reflect the update.

Time to refactor

Remove all theme wrapper css code blocks.
Replace all preprocessor variables with css vars in the form var(--myVarName)
- Sometimes you can do something like this:
```
$mySassVariable: var(--myCssVariable);
```
  This will not work if that SASS variable is later used with SASS functions (for example the mix() color function), but if you aren't passing that var through functions that expect a resolved value you should be ok.
If you do make use of SASS color functions to obtain darker or lighter variant of your main colors, you may generate those from javascript at the time you load your theme.
- I am using a small library called tinycolor in my example which is very simple to use.
- The idea is to generate a range of light and dark colors for each of our base palette colors that are defined in our theme.
- For example, if we have a variable called --primaryColor, then we will also have: --primaryColorDark10, --primaryColorDark20, ..., --primaryColorDark90, --primaryColorLight10, ..., --primaryColorLight90, and so on.

Our theme model

There are some things to note about themes, as part of our themes we will customize:

CSS styles:
- mostly made up of our styles referring to CSS vars that we will include in some entity.
Content
- Things we can't customize with CSS, for example: titles, custom footers, hiding/showing elements based on the theme, etc.

Here is an example theme model for demo application:

export interface Theme {
  name: string;
  brandName: string;
  enableGithubLink?: boolean;
  brandLogo?: string;
  cssRules: { [key: string]: string };
}

Fetching theme details from the backend

Fetch the theme objects from an endpoint like you would fetch any other domain object with an angular service.

Implementing the Angular service that applies the themes.

Apply theme

Applying the theme is pretty straight forward, we push it into our theme subject which the service is already subscribed to and when the subscription get notified we iterate through the cssRules property of the theme and map the keys to variable names and set the mapped value as a custom property for that name.

The following snippet registers a var:

private registerCssVar(name: string, value: string): void {
    document.documentElement.style.setProperty(name, value);
}

Scaffold light, dark and other variants

  
  /**
   * Generates a range of darker, ligher and desaturated 
   * variants of a color with variable name `name`, 
   * from 10% to 90%, stepping by 10%.
   * Generated variables will be named `${name}{Light|Dark|Desaturated}[10-90]`.
   * Also generates a complement and a foreground color to be used
   * when using the base color as background.
   * @param name name of the base color variable
   * @param color base color
   */
  private scaffoldColorVariants(name: string, color: string) {
    const c = tinycolor(color);
    for (let i = 1; i < 10; i++) {
      const lighter = c.clone().lighten(10 * i);
      const darker = c.clone().darken(10 * i);
      const desaturated = c.clone().desaturate(10 * i);
      this.registerCssVar(`${name}Dark${i * 10}`, darker.toHexString());
      this.registerCssVar(`${name}Light${i * 10}`, lighter.toHexString());
      this.registerCssVar(`${name}Desaturated${i * 10}`, desaturated.toHexString());
    }
    const complement = c.clone().complement().toHexString();
    this.registerCssVar(`${name}Complement`, complement);
    let fgVariant = '#ffffff';
    if (c.isLight()) {
      fgVariant = '#000000';
    }
    this.registerCssVar(`${name}Foreground`, fgVariant);
  }

And here is the applyTheme() method:

/**
   * Applies the theme to document.documentElement.style scope.
   * Also scaffold all color variants for each color.
   * @param theme the theme object
   */
  private applyTheme(theme: Theme): void {
    Object.keys(theme.cssRules).forEach(rule => {
      const cssVarName = `--${rule}`;
      const cssRule = theme.cssRules[rule];
      this.registerCssVar(cssVarName, cssRule);
      if (this.isColor(cssVarName)) {
        this.scaffoldColorVariants(cssVarName, cssRule);
      }
    });
  }

Subscribing to the current theme observable to listen for changes

In the ThemesService, provide a method that returns an Observable so components can subscribe and listen for theme changes.

this.themes.getCurrentTheme().subscribe((t: Theme) => {
  // theme has changed, do something to your views
});

Theme directive

In our example we are setting all the custom properties in document.documentElement.style, this is global scope and will affect all components, we might want to apply themes just to the scope of a single component and implementing a directive for this seems like the natural way to get this done.

Initialize your theme on application startup

Here is a trick we can use to load our theme at application startup to avoid a theme switch when the views are already being displayed.

We create an Initialization service that has the ThemesService injected and has a method that returns a promise.

@Injectable({
  providedIn: 'root'
})
export class ThemesInitService {

  constructor(private themes: ThemesService) { }

  public init(): Promise<void> {
    // We need to return a promise
    return new Promise((resolve, reject) => {
      console.log('Initializing themes');

      this.themes.setCurrentTheme(DEFAULT_THEME);
      resolve();
    });
  }
}

On the module declaration we declare a factory function that returns a function that, when called, will call the init() method of the service.

export const initThemes = (themes: ThemesInitService) => {
  return (): Promise<any> => themes.init();
}

In our module declaration, we include a new provider that provides APP_INITIALIZER and uses the factory function above with useFactory. Don't forget to set multi to true. Include the ThemesService in the deps array so it will get injected in the factory function and we're good to go!

 {
  // @NgModule declaration
 
  providers: [
    ThemesService,
    {
      provide: APP_INITIALIZER,
      useFactory: initThemes,
      deps: [ThemesInitService],
      multi: true
    }
  ],
 }

Basket's dev blog

The Flawed State of Technical Evaluations for Software Developers

Google Bard interpreta las creaciones de mi madre

VS Code's killer feature: Live Share

Live Share: Transforming Collaborative Coding in VS Code

Clojure, explained by Donald Trump

tailwindcss is awesome

Awesome ZEKE videos with improved audio track

Online Games

how did it go?

conclusion

Disqus comments fixed

Using exercism

Sending clojure data from the REPL to the clipboard

chart.js reagent component and deploying libraries to clojars

Introduction

Project Setup

Generating JAR and POM

References

Deprecated and Current OpenGL "Hello World" implementations

Building a Theming System with angular and CSS custom properties

Introduction

Difference between css and sass variables

Time to refactor

Our theme model

Fetching theme details from the backend

Implementing the Angular service that applies the themes.

Apply theme

Scaffold light, dark and other variants

Subscribing to the current theme observable to listen for changes

Theme directive

Initialize your theme on application startup

References