DEV Community: Jorge Baumann

Different approaches to testing your own packages locally: Relative Deps

Jorge Baumann — Tue, 13 Jun 2023 06:53:59 +0000

In this article, we will explore a practical solution for testing your own packages locally without the need to publish them to production and risking any potential issues.
By leveraging the power of relative-deps, we can easily link our libraries with our projects during development, ensuring that everything works seamlessly without impacting the production environment. Let's dive in and discover how this useful tool can simplify our testing process and make our coding experience even more enjoyable.

This is part of a series of articles:

Linking local files

npm link

npm yalc

Verdaccio

Relative deps

Relative deps

The official description says: Installs dependencies from a local checkout and keeps them in sync, without the limitations of npm link.

Imagine you are working on your awesome project and you need to check if your fancy library works with the new changes you just made but without publishing and pushing your changes to prod. You don’t want to test in production, right?

I've got you covered; relative-deps to the rescue!

With relative-deps you can link your library with a relative path to your project while developing and testing it locally, making sure you don’t break stuff in prod.

This package is super simple to use and easy to set up. Let’s get started!

Like the previous articles, we have the following folder structure:

/my-awesome-project
/my-fancy-library

Installing relative-deps

In the root of your project (my-awesome-project), you need to install relative-deps:

npx relative-deps init

Running this script will install relative-deps, add the prepare script and initialize an empty relativeDependencies section.

{
  "name": "my-awesome-project",
  "scripts": {
    ...
    "prepare": "relative-deps"
  },
  "devDependencies": {
    "relative-deps": "^1.0.7"
  },
  "relativeDependencies": {},
}

You will use the prepare script after changing something in your fancy library. This will update the project with the latest changes from your library.

Adding your library as a relative dependency

Now, you need to add your library as a relative dependency in your project. You can do this by running the following command:

npx relative-deps add ../my-fancy-library

After running this command, you will see that the relativeDependencies section has been updated with the path to your library.

{
  "name": "my-awesome-project",
  "scripts": {
    ...
    "prepare": "relative-deps"
  },
  "devDependencies": {
    "relative-deps": "^1.0.7"
  },
  "relativeDependencies": {
    "@ks/my-fancy-library": "../my-fancy-library"
  },
}

It's ready! 🎉 Now you can start using your library in your project as if it was published with the latest changes you just did without publishing it to prod.

Updating your library

After making changes to your library, you need to update your project with the latest changes.
To do that you need to run the build script in your library and then run the prepare script in your project.

npm run prepare

This will update your project with the latest changes from your library. Have you seen how fast it is? ⚡️

Removing your dependencies

If you want to remove your library from your project, just delete the entries created in the relativeDependencies section and in the devDependencies section. Delete the prepare script as well and you are good to go.

In conclusion, relative-deps provides a straightforward and efficient solution for local package testing. By allowing us to link our libraries with our projects using relative paths, it eliminates the need for publishing and deploying changes to production. With its speedy update process, it proves to be one of the best alternatives available. Embracing relative-deps can greatly enhance our development workflow, ensuring seamless integration and preventing potential issues in the production environment.

Give it a try and experience the convenience and speed it brings to your package testing endeavors.

🧑‍💻 Happy coding!

Useful links

Pure CSS Olympic Rings 💫

Jorge Baumann — Wed, 28 Jul 2021 16:57:15 +0000

My little tribute to the Olympics.

In my last streaming I created the Olympics logo in pure HTML and CSS.

It seems to be easy, after all they are only circles, but you will need to think twice and create your mental diagram to make each ring fit. As you can see, rings are intertwined.

It was a funny stream. I liked it a lot. Especially when I wasn't able to center the rings <div> and 4 (supposedly) senior devs were trying to help me.
That's the main reason by which I love doing live-coding. We are a team, we learn together.

Actually, it was me alone, doing some live coding alone through codepen, but getting help from the community in the chat (as usual). Love you, subs! 💜

Finally, we managed to center it quickly. I believe it isn't the best solution, but it works.
When you are doing live coding with people looking at you, it doesn't matter how you achieve it. Just do it!

🎨 The next day, I had in mind to animate the rings. We accomplished this task by creating 3 CSS animations and chaining them together.

The result was amazing. Don't you think?

I'd be interested to hear what you think. Let me a comment below.

👋 That's all. Hope you like it as much as I do. Stay safe!

Pure CSS Arcade 🕹

Jorge Baumann — Sun, 23 May 2021 16:28:01 +0000

Hey, friends! I hope you had a great week!

👾 On Thursday, I finished my last CSS project: Pure CSS Arcade. Built from scratch with HTML & CSS by doing live-coding on twitch.

Every week I host a few streamings where I "Draw with CSS".
Do you want to get a notification when the streaming starts? Follow me on twitch (https://twitch.tv/baumannzone).

Drawing this arcade machine was (really) a challenge because of the perspective. I had to re-think a couple of times how to do it, but finally I handled it.

I have more CSS Art projects like this one on my YouTube channel.

If you are an instagram person, I upload short videos of every CSS project: https://instagram.com/baumannzone

Any questions? I read your comments.

The orinal image: https://dribbble.com/shots/3394419-Pacman/

👋 That’s all for now, folks! I hope you like it. Be safe and don't forget to water your plants!

Vue.js app using Diablo 3 APIs

Jorge Baumann — Sat, 25 Jul 2020 17:21:37 +0000

👋 Hi everybody,

If you didn't know, Blizzard games data is available through the game's official APIs.

I have created a Vue.js app from scratch using Diablo III APIs to show the players' characters.

This project consists of a web app made with Vue.js and Vuex. It uses Bootstrap-Vue as the component library, axios for fetching data over OAuth from the official Diablo 3 APIs, and it's handmade from scratch.

It's a simple version and does not show some information like the weapon details or the character followers. I plan to add these features in the future.

Source code: https://github.com/baumannzone/diablo3-vue-platzi

baumannzone / diablo3-vue-platzi

👾 Diablo 3 Profile Finder. Using the Diablo III official APIs

Live demo: https://diablo3-vue.vercel.app/

If you aren't a Diablo 3 player, you can use my data to see how it works:

BattleTag: SuperRambo#2613 or MADman#2102
Region: EU

Feedback is welcome and really appreciated. Feel free to fork it to play around or help by creating a pull request or opening a new issue.

Also, if you have any Vue.js related questions, I'm here to help.

I designed the app with a "dark theme" in mind because the game, Diablo 3, is about darkness. I wanted to make it a little bit more realistic.

🤔 Do you know where I got the color from? What do you think? Let me know your opinions in the comments below.

👾 Pure CSS Gameboy

Jorge Baumann — Mon, 18 Nov 2019 13:03:52 +0000

Hi again!

I'm Jorge Baumann and I want to show you this handmade Nintendo Gameboy built from scratch with HTML & CSS. Animated (a little bit) by Javascript. It was my first game console. What beautiful memories! 😍

👉 Live DEMO: https://baumannzone.github.io/gameboy-css/

👉 Source Code:

baumannzone / gameboy-css

👾 Pure CSS GameBoy - Includes animations and the original sound 🔊

Video:

Let's get started!

HTML it's written in Pug (formerly known as jade) and CSS with Stylus CSS.

This is the only HTML (Pug) used:

  .gameboy
    .screen-cont
      .power
      .screen
        .header DOT MATRIX WITH STEREO SOUND
        .animated-text Nintendo
          .copy ®
    .controls-cont
      .btn-direction
        .vertical
        .horizontal
      .btn-AB
      .btn-start-select
    .speakers
    .on-off < off-on >
    .phones phones

Check the whole file here: index.pug.
Also, here it is the CSS file (stylus): main.styl

Although the Pure CSS Gameboy is done, I wanted to add a little bit of magic so, with a little Javascript and CSS, I added animations and effects 🔮.

The first thing you see when you turn on the gameboy is the Nintendo word transition
After the transition is done, a "beep" 🔊 sound sounds (Recorded it and edited by myself with my own Gameboy) So, it's the original one 😄.
Last detail, it simulates the power light comes on when you "turn on" the device.
EXTRA ✏️: Font used is called "Pretendo" by jackster3000, a mimic nintendo-like font. The real Nintendo font is not well known.

🐷 That's all, folks!

Do you have any question? Let me know what do you think in the comments below or drop me a few words on twitter (@baumannzone).

I'm still thinking what will be my next "Pure CSS" idea, what would you like to see?

If you liked the content of this post, you should subscribe to my newly released Youtube channel: RambitoJS.

Also, if you are into #vuejs, #css #javascript, #testing or some other topic related to web development, you may follow me on Github, since I'm creating open source content frequently.

If you liked this article, you should check "Pure CSS Zombie", from css-art series:

🧟‍♀️ Pure CSS Zombie 🧟‍♂️

Jorge Baumann ・ Oct 31 '19

#html #css #vue #dog

🦄 Thanks for reading, see you soon! 🥳
Say Hello! Twitter | Github | Youtube

🧟‍♀️ Pure CSS Zombie 🧟‍♂️

Jorge Baumann — Thu, 31 Oct 2019 14:41:48 +0000

Hi everybody! Welcome to another exciting post about CSS.

First of all, check out the live demo: https://zombie-css.netlify.com/

In this video, I recorded the process from 0 to zombie. Made with vue.js and stylus preprocesor for the CSS.

Subscribe if you liked it. It's a newly released channel.

On the occasion of the halloween party 🎃 I made this super awesome 🧟‍♀️ Zombie 🧟‍♂️ in CSS, from scratch. 100% CSS, 0% images.

On the left (👈) you can see the first version of the zombie, which was developed while the screen was being recorded.

On the right (👉) you can see the second version of the zombie, which was created during a refactoring process and without being recorded 😅. This one is the final version.

🔥 You can check the source code here and follow me if you want.
I usually create open source repos with ~interesting~ funny stuff like this.

baumannzone / zombie-css

🧟‍♀️ Pure CSS Zombie 🧟‍♂️ - Happy Halloween 🎃

Check out the color palette here: https://coolors.co/292c34-ffffff-b4e900-fe338f-ff70b5

Let me know what you think in the comments below. 👻

🎃 Happy Halloween! 🎃