Forem: Michael "lampe" Lazarski

Elevation with sass maps and loops | Vue component Lib - part 7

Michael "lampe" Lazarski — Sun, 07 Feb 2021 20:17:11 +0000

Hey,

In this part we will be adding a elevation css utlity class.
We will use SASS maps and loops for that!

Here is the Video:

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

Adding a theme support with a dark and oled theme | Vue component Lib - part 6

Michael "lampe" Lazarski — Mon, 01 Feb 2021 19:02:27 +0000

Hey,

In this part we will be adding a theme package.
Adding a dark and oled theme
and then adding it to out playground!

Here is the Video:

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

Implementing a Button in Vue3 with Theme support | Vue component Lib - part 5

Michael "lampe" Lazarski — Sun, 24 Jan 2021 19:01:47 +0000

Hey,

In this part we will be implemeting a button in vue3.
we will learn how ref() works and we will add theme support!
Here is the Video:

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

Awesome CSS Animated Responsive Bottom Navigation - Production ready!

Michael "lampe" Lazarski — Thu, 21 Jan 2021 20:48:59 +0000

I found this really awesome example of a CSS button navigation at codepen!

Here is a video about it with some improvements!

Code: https://github.com/lampewebdev/bottom-bubble-navigation-responsive
Original CodePen: https://codepen.io/abxlfazl/pen/VwKzaEm

Frosted Glass UI CSS effect in 5 minutes and why you should not use it (for now)

Michael "lampe" Lazarski — Mon, 18 Jan 2021 14:44:02 +0000

I see a lot of Glass UI examples floating around.
Here is a short video how you can achieve that and at the end we will talk if you should use it or not!

You can find the link to the code in the video description!

Adding Colors with CSS modules and sass. Adding a CSS Reset | Vue 3 typescript component - part 4

Michael "lampe" Lazarski — Sun, 17 Jan 2021 18:09:27 +0000

In this part, we will be adding color variables so that the user can define there own themes even multiple themes on the same page!

Check out the video! and if you like it leave a thumb up!

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

New Javascript 2021 features explained with examples and how you can use them today!

Michael "lampe" Lazarski — Fri, 15 Jan 2021 21:24:25 +0000

Every year Javascript comes with a new set of features!

This year we also have some cool features we can use!

Learn how to use them with real world examples and how to update your project to use them too!

You can find the link to the code in the video description!

Playground for our Components! Setting up Webpack and Bable Vue 3 typescript component - part 3

Michael "lampe" Lazarski — Sun, 10 Jan 2021 18:10:43 +0000

Hey,

Let us build a component Library together!
In the part we will install webpack, babel, vue and much more!
We will create a playground for our components and load our button component into our playground!

The npm packages we have installed:



// webpack
npm i --save-dev webpack webpack-cli clean-webpack-plugin webpack-dev-server babel-loader html-webpack-plugin 
// vue
npm i --save-dev vue-loader@next vue@next @vue/compiler-sfc @vue/component-compiler-utils @vue/babel-plugin-jsx
// css/sass
npm i --save-dev style-loader postcss-loader sass-loader sass
// babel
npm i --save-dev @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript


Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)

Generating NPM packages - Vue 3 typescript component framework part 2

Michael "lampe" Lazarski — Wed, 06 Jan 2021 20:12:36 +0000

Hey,

Let us build a component Library together!
On the way, we will learn vue3 and typescript!
And many many more tools!
Here is the second video of the course!
We will finish our new CLI script and we will be able to generate npm packages with a basic setup for creating our components!

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

Vue 3 typescript component framework - part 1 - basic setup

Michael "lampe" Lazarski — Sun, 03 Jan 2021 19:51:37 +0000

Hey,

Let us build a component Library together!
On the way, we will learn vue3 and typescript!
And many many more tools!
Here is the first video:

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

Buttons with awesome Hover effects Using only HTML and CSS | Valorant CSS Buttons

Michael "lampe" Lazarski — Sun, 27 Dec 2020 18:22:36 +0000

Hey,

Valorant the new hype when it comes to competitive FPS games.

One thing I liked about the Valorant websites is the overall design.
One element that stuck out the most to me were the buttons.

Here is a video from start to finish!

And here you can see how it will look!

If you just want to see the code it is here:
https://github.com/lampewebdev/valorant-button-css

Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!

Michael "lampe" Lazarski — Sun, 20 Dec 2020 22:02:48 +0000

Hey,

I have created a video where you can learn how to create a menu like in cyberpunk!

If you just want to see the code it is here:
https://github.com/lampewebdev/cyberpunk-menu