DEV Community: Josh Kulp

Blazor series

Josh Kulp — Thu, 06 Jun 2019 14:49:29 +0000

Over the next few post, I will be giving an overview of the learnings I have had writing my first Blazor app. Blazor is the new technology from Microsoft to run C# in the browser via WASM. If you want to learn more about the basics check out https://Blazor.net

Site Walkthrough <- You are here
Shared C#
Passing Parameters
JavaScript from C#
Debugging
Publishing to Github Pages
(I will add links as they are published)

In this post, I will do a brief site walkthrough to give you some context to the code we will be looking at.

Let's start with the architecture of the app. I started with the basic blazor template for "Blazor (ASP.NET Core hosted)"

So we have a Server project, Client project, Shared project.

Server project - This would be your c# backend, we will not be using this in this project since we want this to run from the client without a backend (Kinda, I use airtable as a cheap DB)
Client project - This is where your site lives and where we will be creating the components with blazor.
Sharred project - This is where the classes and models live that you could share between other C# projects

Next, let's look at the app its self. It is a basic Taco ordering app built as a single page app.

List Page

Gives you a list of tacos with the price.

Configuration pop-up

Lest you add extras to your taco and add it to your cart

Cart & Checkout

-Keeps track of the Tacos in your cart
-JavaScript alert of all the items in your cart.

Thanks for checking this out.
Have you used blazor yet? Do you think it is too soon to start looking at blazor since it is not production ready?

CJS Cascading JavaScript Style

Josh Kulp — Thu, 18 Apr 2019 14:59:31 +0000

CSS in JSX

I have been working on some new React projects and the way that the CSS works in JavaScript seemed odd and simple to me at the same time. I like the idea of working with JSON objects but thought it was odd that most of the demos I have seen never did much outside of the simple inline CSS.

This is what most of them show.


<div style={{background:'red'}}>Hello World!</div>

Basically, you are putting a Javascript object of {background = 'red'} as an inline style.

The next step would be to pull this out to a const and then put that in the style. This start to look more like normal CSS.

 render() {
    const style = {
        background: 'red'
    }
        return (
            <div>
                <div style={style}>Hello World! Object</div>
            </div>
        );
    }

And this works well at a CSS class level but when you want to do more you start getting stuck. This is where the concept of cascading comes in.

This is what it looks like in normal CSS


<style>
.Item{
 background:"Red";
}

.Item .Large{
    font-size:30px;
}

</style>

<div class="Item">Item 1</div>
<div class="Item Large">Item 2</div>

Then in JSX

render() {
    const style = {}

    style.Item = {
        background: 'red'
    };

    style.Item.Large = {
        ... style.Item,
        fontSize: 30
    }

        return (
            <div>
                <div style={style.Item}>Hello World! Cascading </div>
                <div style={style.Item.Large}>Hello World! Cascading Large</div>
            </div>
        );
    }

In the JSX I started using the spread operator ... to copy down the items in the related object or cascade them.

I had this aha🤦‍♂️ moment a few days ago and hope this helps someone down the path of CSS in JavaScript in React.