teleren/devto huggingface dataset:
From Component-First to Utility-First with Brevis CSS
Tags: css, brevis, beginners, webdev
Published: 2019-06-06 15:22:27

---
title: From Component-First to Utility-First with Brevis CSS
published: true
description: Top four reasons to use Brevis instead of Bootstrap/Bulma/Materialize.
tags: css,brevis,beginners,webdev
---

The choice of a CSS toolkit is surrounded by beliefs that may not always sustain a logical argument. Most of the time, it comes down to a personal decision. Either from you or your boss. To help those that need to decide which CSS toolkit to use or try next, here are my four reasons why you should try Brevis:

1. Maybe you don't need Brevis. If you are comfortable with your current toolkit and you get things done, why bother? If your project doesn't require any special technicality, why spending time on something you don’t need, right? But, if you have a pinch of curiosity and the desire to improve your CSS as a developer, then, maybe you should give Brevis a chance. Brevis will show you a new way of getting things done. A better, faster and simpler way.

2. One of Brevis greatest feature is the ability to generate lean code. It means that you don't need to worry about the unused CSS burden. Simply, because you are the one that's creating the UIs and it's not the toolkit. With Brevis, you have full control of what you are building. Obviously, this feature is only relevant for those who care about performance and page load time.

3. We all know that naming things is hard. And component-first (CF) toolkits don't make any easy. Even methodologies like BEM cannot help you much (it can actually get worse), because now you need to name three things! So, the great thing about Brevis is that no naming is needed at all. That's a big win for utility-first (UF) toolkits like Brevis, over CF ones.

4. The benefits of Brevis over CF toolkits will become clearer once you start coding. For CF toolkits, the majority of the duplicated code occurs when you need to create custom styles. A simple navbar is a good example. If you don't want to use the default navbar style, you will have to overwrite the code with your own style. And when you do that, you create duplicated code. That goes for every component from a CF toolkit that you want to custom style. And more. Over time, this approach will lead to that unused CSS you don't dare to remove. Brevis is different. It saves you from all this madness by being neutral. There's no default style to dictate how things should look. Meaning, no overwrite will happen, ever!

When you need speed, robustness and lean code, Brevis is a front runner among CSS toolkits. The benefits of moving from CF toolkits (like Bootstrap, Bulma or Materialize) to UF ones like Brevis are tangibles. But you need to try Brevis by yourself, because it's the only way for you to take full advantage of the benefits. Brevis is as simple as a single CSS file. No dependency or setup needed. Just use it! 

You can find much more about Brevis at [getbrevis.com](https://getbrevis.com) or [GitHub](https://github.com/dlzi/brevis) repository.
A case for Turbolinks, Stimulus and React
Tags: webdev, react, javascript
Published: 2019-06-06 15:18:59

Single page apps are pretty cool. I like them a lot and they are fun to create.
However, they can get quite heavy in terms of code size, and loading time. You also have to jump through many hoops to get server side rendering. These things can be worth the time an effort, but not always.

I think there is a case to be made for a many tool solution.
That is: 

* [Turbolinks](https://github.com/turbolinks/turbolinks)
* [Stimulus](https://github.com/stimulusjs/stimulus)
* [React](https://reactjs.org/)

Here's what are transitioning to at [DropConfig](https://dropconfig.com).

We have a lot of pages that just list things. List your organizations, list your repos, list your configs. Why are we bringing the big guns to bear on this? Why bloat a simple listing page with as much react as possible? Previously I'd have to drag in React, and Redux as well as Material-UI. It's a lot of things for a simple listing page.
This is where Stimulus and Turbolinks come in handy.

### Turbolinks

On our backend, in node, we use ejs to render listing pages. 
The server just returns plain HTML. We then rely on Turbolinks to make the page loads feel more like an SPA. But we never send anything from our Server but plain HTML. This keeps our pages really light and they render fast! 


There's a few big wins, in my opinion, in writing plain HTML templates
* Making a simple HTML template on your server where the data already lives is far easier than doing it in React. 
    * No calls to fetch JSON and loading states. 
    * No Redux for state management etc.
    * The same JSON REST APIs we make can we used to render the templates server side.
* Better battery life and speed on mobile because we aren't running nearly the same amount of JavaScript. 
* If a user doesn't have JavaScript enabled they can still view parts of our site. 

### Stimulus

Stimulus is used for mundane operations on the DOM. Things like menu toggles, modals, etc. It's a really nice and simple too for such things. It's worth a look at least. [Basecamp](https://basecamp.com/) uses it. (And Turbolinks)


### React
So where does React come in? Well we have a configuration editor. It has a lot of data and a lot of moving parts. That would be tough to do with Stimulus and Turbolinks so we rely on React to handle it for us. With the ease of code splitting in modern tools like webpack, the user doesnt have to download all that extra bulk until they want to edit a configuration.

In case you don't think there is any precedent for this, consider GitHub. This is more or less how their entire frontend functions. While I don't think they use stimulus and I know they use [pjax](https://github.com/defunkt/jquery-pjax) instead of Turbolinks, it is the same sort of concepts.

Side note: Check out [Tailwind CSS](https://tailwindcss.com/) it fucking rocks. Maybe I'll write about it someday.

Thanks for listening to me ramble.

Feel free to ask me any questions. I know some things about some other things.

Check out [DropConfig](https://dropconfig.com) you might like it.
Girls Who Rock and Code this Summer
Tags: girlswhocode, scratch, girlsintech, computerscience
Published: 2019-06-06 14:39:27

---
title: Girls Who Rock and Code this Summer
published: true
description: Hocking College is hosting weekly sessions on coding using Girls Who Code curriculum
tags: Girls Who Code, Scratch, girls in tech, computer science
---

Girls Who Rock and Code is a great way to spend the Summer if you're in the Athens county area of Ohio.  If you're not familiar with the organization Girls Who Code you should check it out at https://girlswhocode.com/.  It's a great way to get girls interested in coding and give them something to do during the Summer!  

If you are interested in getting started and need some help on the sources used and what to do - feel free to reach out!  

The resources are already out there - it's up to us to use them and share our love of learning cool stuff!
Any advice on a good budget laptop for programming ?
Tags: help, laptop, programming
Published: 2019-06-06 15:02:30

---
title: Any advice on a good budget laptop for programming ?
published: true
description: 
tags: #help, #laptop, #programming
---

My current laptop has served its purpose for over 5 years (right from my first hello world in php) and it is time for me to bid it farewell after persistent over-heating issues. Now, i am really indecisive about which good laptop to currently go for due to my budget constraint (any device south of $540) and desire for a laptop with a good battery backup (power supply is a big issue in my country). Please fellow devs, which affordable laptop would you advice i go for ?
Snippet Management
Tags: snippets, discuss
Published: 2019-06-06 14:55:11

---
title: Snippet Management
published: true
description: 
tags: #snippets #discuss
---

Do you store and manage snippets of code? If you do, how do you do it? Do you use a snippet manager? 

I think I need to do something.

I see that [Lepton](https://hackjutsu.com/Lepton/) was ranked high on [this site](https://www.slant.co/topics/7247/~code-snippets-manager#10). I'm leery of it being Electron based though.

I tried Boostnote when it was still a baby. I think the way it stored things wasn't ideal for me though - if I remember right. 

What about you?
Blazor series 
Tags: csharp, blazor, dotnet, showdev
Published: 2019-06-06 14:49:29

---
title: Blazor series 
published: true
description: client side blazor series 
tags: csharp, blazor, dotnet, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jevuah2i4u76flvuj77p.PNG
---

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)"
![](https://thepracticaldev.s3.amazonaws.com/i/266dcrishg4t4snojpba.png)

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

![](https://thepracticaldev.s3.amazonaws.com/i/z6r2ta160olc69szt1b4.PNG)

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.
![](https://thepracticaldev.s3.amazonaws.com/i/v4uwcx2saki31y9mpbx3.png)

#Configuration pop-up
Lest you add extras to your taco and add it to your cart
![](https://thepracticaldev.s3.amazonaws.com/i/1vjzg1n7o4wyg4fwzoku.png)

#Cart & Checkout
-Keeps track of the Tacos in your cart
-JavaScript alert of all the items in your cart.
![](https://thepracticaldev.s3.amazonaws.com/i/o3vm5rldjsomiwtrfz2x.png)

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?
React — Access custom params in handlers the right way
Tags: react, javascript, tutorial, webdev
Published: 2019-06-06 14:13:57

_**TL;DR** - You can access render time values in handlers without having to use anonymous arrow functions. Hint — leverage data attributes._

React is great in so many aspects and it gives us the freedom to do things in different ways by being less opinionated (or non opinionated).

In recent days, especially after the release of hooks, the community has been fussing around a lot on **reference equality** and how anonymous arrow functions in renders are not good for performance.

We are not going to deep dive into why or how using arrow functions during render affects the performance (or it does not). Here are two contrasting tweets for context.

{% twitter 1131707595880898560 %}

{% twitter 1135936248386736128 %}

# When

We mostly use arrow functions during render only to pass custom parameters to event handlers.

For example, this is a common use case —

```jsx
const MyComp = () => {
  const handleClick = (e, id) => {
    // handle click and use id to update state
  }

  // id comes from state
  return (
    <div onClick={(e) => handleClick(e, id)}>Hello World!</div>
  )
}
```

# How

Instead of using an anonymous arrow function here, we could leverage **data attributes** and access values from the event object.


```jsx
const MyComp = () => {
  const handleClick = (e) => {
    const id = e.target.dataset.id
    // handle click and use id to update state
  }

  // id comes from state
  return (
    <div data-id={id} onClick={handleClick}>Hello World!</div>
  )
}
```

# Advantages

This approach has a lot of advantages —

- You can memoize the callback pretty easily if needed.


```jsx
const MyComp = () => {
  // id comes from state
  const handleClick = React.useCallback((e) => {
    const id = e.target.dataset.id
    // handle click and use id to update state
  }, [id])

  return (
    <div data-id={id} onClick={handleClick}>Hello World!</div>
  )
}
```

- You don't create a new function during component render which saves additional computation cost during vdom diffing.

- If child components that use **React.memo** take this handler as a prop, you don't have to write custom _areEqual_ method to circumvent **referential integrity** issues with anon arrow functions.

**_Keep in mind that all data attributes return String values even if you pass in other primitive types. So it's a good practice to coerce your value while extracting from dataset._**


```js
const id = e.target.dataset.id // this will be String

const id = Number(e.target.dataset.id) // convert to type if needed
```

I have created a codesandbox to demonstrate how it works — [Custom Params In Handlers](https://codesandbox.io/s/customparamsinhandlers-9wlls?fontsize=14&hidenavigation=1&module=%2Fsrc%2FTodoList.js&view=editor)

You are amazing! Have a great day! ⚡️
My Favorite Cheat Sheet Plugin
Tags: productivity
Published: 2019-06-06 13:54:12

I am more of a keyboard shortcut junky when it comes to any application. 

Not only do I like keyboard shortcuts, I also have around 900 aliases for various things I do but mostly [Kubernetes](https://kubernetes.io). 

Years ago I stumbled upon a tool that was a game changer for me, and while there might be many, the one below is really my favorite because almost every application I use, I can find a keyword shortcut in matter of 1 second or in my case holding down the [Command] key. 


[CheatSheet](https://mediaatelier.com/CheatSheet/?lang=en) in my opinion is a must for Dev/Ops people. 

What are some of your cheetsheet programs? 

Please share your experience as to how you utilize or get around all the keyboard shortcuts?
How Flunking A Programming Class Deterred Me
Tags: beginners, webdev, career
Published: 2019-06-06 13:23:45

---
title: How Flunking A Programming Class Deterred Me
published: true
description: The reason I didn't learn programming for years.
tags: #beginners, #webdev, #career
---

Let's rewind to 2004. I was a junior in highschool. I took an Introduction to Programming course, and dove in eager to learn how it all works. You see, the year previous I had taken a Web Design course and learned the fundamentals of HTML and CSS.

I aced that course and *loved* it. I think that was the moment that my love for software development began, but that love would soon be handicapped.

You see, my Introduction to Programming course was on the C++ programming language.

*C++ was hard.*

There were kids in my class that excelled at it, and watching them code made me shrivel up on the inside. I got left behind and eventually flunked the class. At that time in my life, I was still learning how I learn. I hadn't mastered my ADD and mental health issues, such as depression. It wouldn't be years later, as an adult, that I would be ready to challenge myself again.

Looking back, I should have asked the teacher for their time to cover the subjects a little deeper and help me make sure I was getting it. I know she would have, she was a great instructor.

I didn't have the maturity enough for that. For me, I didn't learn it naturally and that meant it wasn't for me. I was ashamed, I felt inferior, and that feeling would stay with me for over a decade.

Failure with programming didn't discourage me from pursuing a career in computers. I continued learning, focusing on what I perceived as easier stuff like hardware, networking, and repair. It didn't deter me from making websites as a hobby either. I would create forums around my favorite hobbies, games, or shows using software like phpBB and Wordpress.

However, I always stopped at PHP and Javascript. I hit a wall and it was programming. I sought plugins for solutions, sometimes giving up if there wasn't one. Never did it cross my mind again that I could just write my own if I put enough time and effort in.

I had shackles around my ankles and wrists, I couldn't run at full speed.

I didn't get past this fear until November 2018. 

What let me break through it?

A cleaner bill of mental health helped, a lot. Also, I think my curiosity eventually overwhelmed my fear. In that, I asked myself a single important question.

"What do I have to lose?"

Nothing. Worst case scenario, I would come out understanding computers a little better. That would help me with my career as a PC Technician, troubleshooting and diagnosing issues. 

Thus, I sat down and started the Web Development path on Codecademy. 

Ever since that day, I haven't stopped and will probably never will.

As a final note, I do plan on learning C++ down the road, just to get revenge against the sense of inferiority it instilled in me. For now though, I'm happy learning as much as I can about Javascript.
What do you imagine JavaScript looks like in 5 or 10 years?
Tags: javascript, discuss
Published: 2019-06-06 12:06:48

---
title: What do you imagine JavaScript looks like in 5 or 10 years?
published: true
description: We've come a long way since the introduction of ES6.
tags: js, discussion
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1mwv3sp6fzk4dcceyzug.jpg
---

![](https://thepracticaldev.s3.amazonaws.com/i/o0bwdwkf5cjh04gg2p3d.jpg)

We've come a long way since the introduction of ES6, Node and the various new standard APIs. What do you imagine (or want) JavaScript to look like a decade from now? :)
My story with social network
Tags: internet, socialnetwork
Published: 2019-06-07 08:20:46

---
title: My story with social network
published: true
tags: internet, social network
canonical_url: https://kevinhq.com/my-story-with-social-network/
---

This is my own story interacting with some social network sites since the era of Friendster, which is around 2002. It’s been a long time

[Continue reading story with social network](https://kevinhq.com/my-story-with-social-network/)

The post [My story with social network](https://kevinhq.com/my-story-with-social-network/) appeared first on [kevin's tech blog](https://kevinhq.com).
Does your team use React Hooks? Mine doesn't
Tags: discuss, react, webdev
Published: 2019-06-06 11:24:41

---
title: Does your team use React Hooks? Mine doesn't
published: true
description: How would you sell your team the React Hooks idea?
tags: discuss, react, webdev
---

So there it goes. [React v16.8 introduced hooks](https://reactjs.org/docs/hooks-intro.html), a way to use state and other React features without writing classes. Folks who started a new project or managed to migrate their existing project already have access to use hooks!

We've recently managed to migrate to React 16.8, but still, haven't made it to Hooks yet.

## I didn't think it would be a big deal

Some weeks after the migration, I had to implement a feature that shows a modal to the users and allows them to withdraw from all the jobs that they applied to. I had already used hooks in a project before and was anxious to start creating some awesome hooks! [Using this article](https://medium.com/@dawchihliou/replacing-react-reduxs-connect-with-react-hooks-1c65e2a6909), I made a custom `useCurrentUser` hook which looks neat, and when I needed state, I got my hands on `useState` instead of converting the component to a class.

When I first made the PR, to my surprise, none of my Senior coworkers understood what I was doing!

## The offender

Due to the way the project was made, we do data fetching inside the component. How do we do it with Hooks? Checking on the [docs](https://reactjs.org/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks), I used the following workaround:

```jsx
  useEffect(() => {
    let ignore = false;

    getSubscriptions({userId}).then(({isSeeking, sendNewsTips}) => {
      if (ignore) {
        return;
      }
      setIsSeeking(isSeeking);
      setNewsTips(sendNewsTips);
      setOriginalIsSeeking(sendNewsTips);
    });

    return () => {
      ignore = true;
    };
  }, [userId]);
```

Overall they didn't like the idea, but this piece of code threw them off. The code just seemed too cryptical to anyone reading it, particularly the `ignore` variable and how it is being used. Seems like using a class would make it look a lot cleaner.

## The reasons against Hooks

I took notes of their main concerns and made the following list:

1. Introducing hooks is a big change to the project that requires team discussion to check if we should start writing all the new components using hooks.
2. Hooks are still new, incomplete, and encourages code like the above which is too cryptical in comparison with the class-based way to do it.
3. Hooks might be the future, but they're not the present. There're a lot of components written using classes and switching between them makes it hard to be productive (NOTE: they don't agree with [this tweet](https://twitter.com/dan_abramov/status/1135407371566624769)).
4. Sometimes it might be faster to deliver the feature using a class-based approach rather than writing hooks.

## Thoughts?

It makes sense to me that if the team is not onboard with hooks yet, it might be better to hold it off. Eventually, hopefully, it might be reconsidered later on.

Do you/your team use Hooks? Why or Why not?
Angular 9|8 Modal Tutorial with Angular Material Dialog
Tags: angular, angular98tutoria, angularmaterial, angularmaterialdialog
Published: 2020-01-30 11:54:59

---
title: Angular 9|8 Modal Tutorial with Angular Material Dialog
published: true
tags: Angular, Angular 9|8 Tutoria,Angular Material,Angular Material Dialog 
canonical_url: https://www.positronx.io/angular-8-modal-tutorial-with-angular-material-dialog/
---

The post [Angular 8 Modal Tutorial with Angular Material Dialog](https://www.positronx.io/angular-8-modal-tutorial-with-angular-material-dialog/) appeared first on [positronX.io](https://www.positronx.io).

In this tutorial, we are going to go through abut **Angular 8 Modal with Angular Material Dialog** component. To create a Modal box in Angular 8 web application, we use Angular material UI library. Angular material UI library offers a wide range of UI components to create real-world web and mobile apps.

Angular Material UI components help us to build robust, consistent, engaging, and user-centric interfaces. Here, we are going to highlight the most common use cases related to Angular 8 Modals. For the demo purpose, I have taken the help of Angular material dialog component to create an Angular Modal box.


[Click here to read more](https://www.positronx.io/angular-8-modal-tutorial-with-angular-material-dialog/)