teleren/devto huggingface dataset:
My Portfolio Built Using Astro
Tags: portfolio, template, astro, webdev
Published: 2023-01-17 00:16:25

**LINK**: 👉[lukeliasi.com](https://lukeLiasi.com?utm_source=devto&utm_campaign=my_portfolio_blogpost)

If you're looking to create a fast, statically rendered portfolio website, you may want to consider using the Astro framework. It uses a familiar component syntax similar to React.js but without the need for large JavaScript bundles.

When building my portfolio website, I wanted to make sure it had a consistent and polished look. One way I achieved this was by using CSS variables, also known as CSS custom properties. These allow for easy modification and maintenance of design elements such as colors and font sizes.

Here is my variables style sheet:
```
:root {
  /* Colors */
  /* Mint */
  --color-mint: #15FF93;
  --color-mint-50: #CDFFE8;
  --color-mint-100: #B8FFDE;
  --color-mint-200: #8FFFCB;
  --color-mint-300: #67FFB9;
  --color-mint-400: #3EFFA6;
  --color-mint-500: #15FF93;
  --color-mint-600: #00DC76;
  --color-mint-700: #00A458;
  --color-mint-800: #006C3A;
  --color-mint-900: #00341C;
  /* Orange */
  --color-orange: #E8871E;
  --color-orange-50: #F9E0C5;
  --color-orange-100: #F7D6B2;
  --color-orange-200: #F3C28D;
  --color-orange-300: #F0AE68;
  --color-orange-400: #EC9B43;
  --color-orange-500: #E8871E;
  --color-orange-600: #BB6A13;
  --color-orange-700: #884D0E;
  --color-orange-800: #553009;
  --color-orange-900: #221303;

  /* Font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px, base */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.75rem;  /* 28px */
  --font-size-4xl: 2rem;     /* 32px */
  --font-size-5xl: 2.25rem;  /* 36px */
  --font-size-6xl: 2.5rem;   /* 40px */
  --font-size-7xl: 2.75rem;  /* 44px */
  --font-size-8xl: 3rem;     /* 48px */
  --font-size-9xl: 3.25rem;  /* 52px */
  --font-size-10xl: 3.5rem;  /* 56px */
  --font-size-11xl: 3.75rem; /* 60px */
  --font-size-12xl: 4rem;    /* 64px */
  --font-size-13xl: 4.25rem; /* 68px */
  --font-size-14xl: 4.5rem;  /* 72px */
  --font-size-15xl: 4.75rem; /* 76px */
  --font-size-16xl: 5rem;    /* 80px */

  /* Font Family */
  --font-family-IBM-Plex-Mono: 'IBM Plex Mono', sans-serif;
  --font-family-Mukta: 'Mukta', sans-serif;
}
```

I can then use these values throughout my website styling, e.g:
```
.intro-welcome {
  color: var(--color-mint);
  font-family: var(--font-family-IBM-Plex-Mono);
  font-size: var(--font-size-base);
}
```
For now, this is a very brief overview of how I built my website but feel free to follow me as I will be posting a more in depth post about how I built my portfolio.

I encourage others to take inspiration from my website, as it is open source and available on [GitHub](https://github.com/lukeliasi/lukeliasi.com) 💻. Feel free to use it as a reference or starting point for your own projects. Give the repository a star ⭐ if it helped you. 

**LINK**: 👉[lukeliasi.com](https://lukeLiasi.com?utm_source=devto&utm_campaign=my_portfolio_blogpost) Have fun!
What I want for 2023
Published: 2023-01-17 00:11:37

---
title: What I want for 2023
published: true
date: 2023-01-17 00:08:54 UTC
tags: 
canonical_url: https://mauriciord.com/what-i-want-for-2023
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yioc9wunmoz66521wzge.png
---

2023 has already started and a small TODO list (at least, giving them a try) for this year:

- Be an expert with [Algolia](https://www.algolia.com/)

- [Rust](https://www.rust-lang.org/)

- [tRPC](https://trpc.io/)

- [SolidJS](https://www.solidjs.com/) (They've started building the SolidStart and I want to give it a try)

### books

- [Engineering Management for the Rest of Us 1, Drasner, Sarah, eBook -](https://www.amazon.com/Engineering-Management-Rest-Sarah-Drasner-ebook/dp/B0BGYVDX35) [Amazon.com](http://Amazon.com) (I've already been reading this)

- [The Staff Engineer's Path 1, Reilly, Tanya, eBook -](https://www.amazon.com/Staff-Engineers-Path-Tanya-Reilly-ebook/dp/B0BG16Y553/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=) [Amazon.com](http://Amazon.com)

- [Software Architecture: The Hard Parts 1, Ford, Neal, Richards, Mark, Sadalage, Pramod, Dehghani, Zhamak, eBook -](https://www.amazon.com/Software-Architecture-Parts-Neal-Ford-ebook/dp/B09H2H5QKC) [Amazon.com](http://Amazon.com)

- [Effective Software Testing: A developer's guide , Aniche, Maurizio, eBook -](https://www.amazon.com/Effective-Software-Testing-developers-guide-ebook/dp/B09WBNJYLX) [Amazon.com](http://Amazon.com)

### talks

I wish to give some talks about software development (at least two talks)

I've returned with my blog posts, so I hope I'll have had a lot of posts by the end of this year.
Week 2 -I learned
Published: 2023-01-17 00:02:18

g acm "added prettier flash messages" = /git but in the console

don’t change schema.rb in schema, you need to run the console

<render partial: “movies/form”>

"rails g migration AddReleasedOnToMovies released on:date
db migrate"

partial whatevers are _whatevers

Use partials alot

Command+P = search

Scaffold will put both html and json for iPhone apps
What is React.cloneElement() function?
Tags: react, javascript, webdev, programming
Published: 2023-01-16 23:47:42

When building web applications with React, one of the most important goals is to create reusable, modular components. This allows developers to easily reuse components in different parts of their application, making the development process faster and more efficient. One of the tools that developers can use to achieve this goal is the `React.cloneElement` method.

According to the official [React documentation](https://beta.reactjs.org/reference/react/cloneElement), `React.cloneElement` is used to clone a React element and pass new props to it. This means that you can reuse a component multiple times in your application, but with different properties, styles or behaviors. For example, imagine you have a Card component that is used in multiple pages of your application, but in some situations, you want it to have a different background color or image. With `React.cloneElement`, you can easily clone the card component and pass new props to it, without having to create a new implementation of the component.

With `React.cloneElement`, you can clone the card component and pass new props to it without having to create a new implementation of the component.

Let’s walk through an example to see when it’s useful.

```js
import React from 'react';

function Card(props) {
  const cardStyle = {
    backgroundColor: 'white',
    padding: '10px',
    border: '1px solid #ccc'
  };

  // Clone and modify the child element
  const clonedChild = React.cloneElement(props.children, 
    { style: { fontWeight: 'bold' } 
  });

  return (
    <div style={cardStyle}>
      {clonedChild}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>Welcome to my website</h2>
    </Card>
  );
}
```
The Card component used in example above, accepts child components and renders them inside a container using a specific style. We're using `React.cloneElement` to clone the child element that is passed to the Card component and then adding a new style prop `fontWeight: 'bold'` to it.

In conclusion, the `React.cloneElement` function duplicates the existing component and permits changes to some of its properties rather than creating a new component. **As a result, it's a fantastic option if you want to modify an existing component without having to completely rewrite it.** This helps to keep the codebase clean, organized, and optimized for performance, which is a key goal when building web applications with React.
There Is No Roadmap To Becoming A Software Developer
Tags: career, webdev, codenewbie, motivation
Published: 2023-01-16 23:27:41

---
title: There Is No Roadmap To Becoming A Software Developer
published: true
description: There is no mold you need to fit into to have a successful career as a software developer. Read great stories of how real life developers started their careers.
tags: career, webdev, codenewbie, motivation
canonical_url: https://content.dynomantle.com/u/dynomantle/thereisnoroadmaptobecomingasoftwaredeveloper
---
There is no mold you need to fit into to be a great developer.

A lot of people have an impression of what a developer should be or where they should come from. It's as if there's a set career path (e.g. college -> internship -> job) and if you don't follow it, don't bother.

That's patently false. 

There's no core set of traits. There's no common background. There's no roadmap everyone followed.

I compiled a [list of stories of how successful developers started their careers](https://content.dynomantle.com/u/dynomantle/dev_stories). Every story is unique. Everyone had their own reason for choosing the profession and their own journey to get there. Some people went to college. Some didn't. Some people loved programming as children. Others started as adults. 

Some people managed to pick up programming easily. Others went through a lot of struggle and almost quit.

I almost wanted to say that the only common trait was that everyone *wanted* to be software developers. Their desire was so strong that they persevered through all the struggles to make it.
Then I read my own story and realized I was more "Eh. I guess? I don't know what else I'd do."

If you're considering a career in software development, these stories are for you. They don't exist to serve as a roadmap. They exist to let you know there is no roadmap. There's no need to worry about whether the steps you are taking are "correct" or not. So long as you are progressing, the steps you take are fine and will get you where you need to be. 

Most of the [stories](https://content.dynomantle.com/u/dynomantle/dev_stories) also contain contact information on how to reach the story teller. Feel free to reach out to any of them if you have questions!
The Manager's Path
Published: 2023-04-29 21:26:06

---
title: The Manager's Path
published: true
date: 2023-01-16 23:09:15 UTC
tags: 
canonical_url: https://mikestaszel.com/2023/01/16/currently-reading-the.html
---

Currently reading: [The Manager’s Path: A Guide for Tech Leaders Navigating Growth and Change](https://micro.blog/books/9781491973899) by Camille Fournier 📚
Day 674 : Reconcile
Tags: hiphop, code, coding, lifelongdev
Published: 2023-01-16 22:35:51

_liner notes_:
- Saturday : There was another basketball game this week so we did the show remotely and online only. I literally did nothing else but the radio show because it was so cold and I just hibernated all day. Had a really good time on the show as usual. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a graph showing what the Los Angeles Police Department spends its budget on with the words Jan 14th 2023 The De Is Here](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv0xkwd7dp0kuzz8hxye.jpg)

- Sunday : Did my https://untilit.works cyphers and got some stuff done. I tried to get a sample Astro SSR app to be deployed on Firebase, but couldn't get it to work. I've tried it before using some other methods, but didn't get anything running properly. This time, I was sooooo close. I've been able to get a Svelte/Sapper app running on Firebase so I was trying to do something similar this time and made some headway.

- Professional : Start of a new sprint. Last sprint wasn't too bad, actually was a little bit head. I published one Web Component and got a good start on another. Today, I finalized the POC code for the new Web Component. I'll just need to scaffold the official Web Component, publish it, create documentation and update the demos. Had a couple of meetings also. It was good to see folks.

- Personal : Going to rethink the infrastructure for the new side project I'm working on. It's one where I'm thinking I could make a little bit of money on. I can get it up and running no problem, but I want it to be the type of thing where it'll be super easy for anyone to get it running. That's a new obstacle I need to overcome that I never had to tackle because all my previous projects were just for me. This will be interesting to reconcile.

![Aerial view of the green mountains along the coast of Kauai, HI, USA under blue skies with puffy white clouds. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l4w441onkwedug9lm6n.jpg)

Going to do some more thinking about this side project. I have a domain already, but I'll be looking at some other options. Also need to figure out what tech I want to use to build it so that I can get it running easily and quickly. There's also a new "Vinland Saga" episode that I downloaded on Netflix to watch later.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube T4XAE4wIVx0 %}
Brian Kernighan's Algorithm
Tags: beginners, algorithms, cpp
Published: 2023-01-16 22:15:57

When i was solving some katas in [Codewars](https://www.codewars.com/), I come across a question about bit counting.

> Write a function that takes an integer as input, and returns the number of bits that are equal to one in the binary representation of that number. You can guarantee that input is non-negative.
> Example: The binary representation of 1234 is 10011010010, so the function should return 5 in this case

I solve the question and after looking at peoples code i saw an answer like


![Answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z244lg33raejv6oi4m8.png) 

And a comment below like 


![comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihpnzzhuce1da5ljg7wj.png)

So I look up a little bit and this is what I got..

Lets go to beginning, the first thing that comes to my mind when I look at the question is counting every bit inside of binary representation of the integer and add it to counter then return the value of counter.

For that i need to iterate from the bit[0] to bit[last - 1]

```
1000 0001 1001 ->  12 times
0010 1111 0111 ->  10 times
     1100 1010 ->   8 times
```

But in <u>Brian Kerninghan’s algorithm</u> things become different.

---

Lets check first what is **&(BITWISE AND)** operator does.

If both bits in same column are set **BITWISE AND operation** leave that bit set(1), but if any of them is cleared(0) in the same column BITWISE AND leaves that bit cleared(0).

```
  1011 1001
  0101 0110
&-----------
  0001 0000   
```

When we write an if statement 
```
if (a >= b & b >= c){
 //do something
}
```
(a >= b) needs to be TRUE(1)
(b >= c) needs to be TRUE(1)   

if statement becomes 

```
if (1 & 1 == 1) 
```
than our condition becomes true.

---


In <u>Brian Kerninghan’s Algorithm</u> he uses `n & (n - 1)` when `n != 0`

So lets check what happens for value 12

```
--12 != 0
12 & 11 = 8
0x1100 & 0x1011 = 0x1000
counter = 1;

--8 != 0
8 & 7 = 0
0x1000 & 0x0111 = 0x0000
counter = 2;
```

lets look at 13

```
--13 != 0
13 & 12 = 12
0x1110 & 0x1100 = 0x1100
counter = 1;

--12 != 0
12 & 11 = 8
0x1100 & 0x1011 = 0x1000
counter = 2;

--8 != 0
8 & 7 = 0
0x1000 & 0x0111 = 0x0000
counter = 3;
```

---

When we look carefully every time that loop runs, the first bit on the right (rightmost set bit) will disappear after **&(BITWISE AND)** operation.

```
12 ->> 0x1100 -> 0x1000 -> 0x0000           (2 times)
13 ->> 0x1110 -> 0x1100 -> 0x1000 -> 0x0000 (3 times)
9  ->> 0x1001 -> 0x1000 -> 0x0000           (2 times)
```

If we have an unsigned value for example 255 (0x11111111) in the 1st approach we have to iterate 8 times to get the result and in Brian Kerninghan’s Algorithm it is also 8 times. 

But in any cases differ than all the bits are set, Brian Kerninghan’s approach becomes way more efficient.

```
1st approach -> 0x11001111 -> 8 times
2nd approach -> 0x11001111 -> 6 times

1st approach -> 0x10000011 -> 8 times
2nd approach -> 0x10000011 -> 3 times
```

**<u>USEFUL LINKS</u>**

[Count set bits in an integer | GeeksforGeeks](https://www.youtube.com/watch?v=KJnhAUkxAho)
Entendendo comparações de igualdade estrita e suave no JavaScript.
Tags: javascript, beginners
Published: 2023-01-16 22:03:04

Escrevendo um código, podemos declarar alguma variável que recebe um determinado parâmetro. Mas já aconteceu o caso de fazer uma declaração e acontecer um erro , e que não está na falta de dependências ou um erro do próprio código? Bem, talvez esteja, porém não da forma esperada.

O que pode ser, na verdade é um erro de lógica em alguma declaração feita, uma redundância no seu código,nas comparações de igualdade. Os Operadores de comparação são usados para analisar uma igualdade ou diferença entre variáveis ou valores. 

Existem dois tipos de comparações de igualdade: comparações de igualdade estrita (===) e comparações de igualdade suave (==). A comparação de igualdade estrita compara tanto o valor quanto o tipo dos operandos, enquanto que a comparação de igualdade suave compara somente o valor dos operandos.


```
let x = 5;
let y = "5";

console.log(x === y); // false
console.log(x == y); // true
```

O caso de comparação == analisa só o valor:5, que está true . Mas o valor de Y está posto como string, com isso o === que analisa não só o valor, mas o tipo declara o resultado como false.


```
const string1 = "hello";
const string2 = String("hello");
const string3 = new String("hello");
const string4 = new String("hello");

console.log(string1 == string2); // true
console.log(string1 == string3); // true
console.log(string2 == string3); // true
console.log(string3 == string4); // false
console.log(string4 == string4); // true
```

No caso abaixo a string3 está reservando um espaço na memória, assim como a string4. Tanto em igualdade suave e estrita, não seria possível. APENAS se as comparações fossem com string2 e 3, onde se seria analisado o que essa string reserva numa variável, seria possível determinar os dois valores como true.

A importância de saber a diferença entre os dois é impedir que código termine em um erro de lógica, e ao mesmo tempo
The Real Network
Tags: novanetwork, p2p, security
Published: 2023-01-16 22:02:36

Few months ago, I was thinking about a new project when I got the idea to start a website offering free + essential services. The main idea was to spread privacy for free so users should not go and give their data for free to other platforms that could easily sell them or do something else.
I started with choosing the name which I needed to be giving a little feeling of technology, After more than a week I decided that the name will be "Nova-Network" and purchased the domain. 
After getting the domain name i determined what are the services that I want to offer and how capable I am to code that, Then I wrote a list of services that will be available as soon as the website is launched which was: A crypto exchange, A small social media platform, A p2p file sharing python program, A file encryption python program, e-Mail service, And a p2p chat python program.
I knew that doing this will be a great load on me + Highschool ,so I seeked help from an older friend, who work as a backend web developer, so we can get the project done sooner. 
And after months of work and errors, We successfully made it before that the mailing service will eat up of all the memory and that can cause other services not to work properly, So we had to drop it temporarily till we can get a more powerful server.
After dropping the mail service, We finally made it!!
Our website will be operating in few days through https://nova-network.tech 
If it require authorization that means we didn't launch yet
Add some snow in your WPF apps
Tags: wpf, csharp, dotnet
Published: 2023-01-16 21:44:53

I always loved how Telegram changes its style during Christmas and winter. And I wanted it too on some of WPF apps that I maintain.

So I started building [WpfSnowfall](https://github.com/Marplex/WpfSnowfall), a WPF snowfall user control. It is super simple to use and fully customizable, it even comes with different types of snowflakes (what a feature)!

You can use it to add some detail and quality on your apps, adding a touch of snow during winter times.
 
## Now, show me the code! 

**1) Import `WpfSnowfall` from NuGet**

```bash
dotnet add package WpfSnowfall --version 1.0.0
```

**2) Profit**

```xml
<sf:Snowfall
    EmissionRate="5"
    Fill="White"
    ScaleFactor="1.1"
    OpacityFactor="1"
    ParticleSpeed="1" />
```

That's it! You can configure the snowflake color, opacity, speed, size and amount.

---

## Behind the scenes
Under the hood, snowflakes are rendered as vectors. They are animated separately using the good old Storyboard and animations from `System.Windows.Media.Animation`.

Basically, here's the simple version of the entire user control:

```c#
//Initial snowflake transform
RotateTransform rotateTransform = new(rotateAmount);
ScaleTransform scaleTransform = new(scale, scale);
TranslateTransform translateTransform = new(initialX, initialY);

//Spawn snowflake
var flake = Snowflake.Generate();
flake.RenderTransform = new TransformGroup
{
    Children = new TransformCollection { rotateTransform, scaleTransform, translateTransform }
};

Children.Add(flake);

//Create transform animations
var xAnimation = GenerateAnimation(xAmount, duration, flake, "RenderTransform.Children[2].X");
var yAnimation = GenerateAnimation(yAmount, duration, flake, "RenderTransform.Children[2].Y");
var rotateAnimation = GenerateAnimation(rotateAmount, duration, flake, "RenderTransform.Children[0].Angle");

//Start the animations
Storyboard story = new();
story.Children.Add(xAnimation);
story.Children.Add(yAnimation);
story.Children.Add(rotateAnimation);
flake.Loaded += (sender, args) => story.Begin();

//Remove snowflake when animation stops
story.Completed += (sender, e) => Children.Remove(flake);
```

---

WpfSnowfall is available on GitHub and licensed under the MIT license, so do whatever you want (or leave a star 😀)!

- https://github.com/Marplex/WpfSnowfall