teleren/devto huggingface dataset:
Sharing data from Laravel components to Alpine
Published: 2021-03-18 22:40:27

> This article is old. There is a new, better method to do this directly in Laravel.

You can use `@json($data)` or `@js($data)` now. This article is a relic of the past.

---

If you ever tried to pass data from blade to alpine, you probably had to `json_encode` arrays or convert booleans to strings.
```html
<div x-data="{ open: {{ $open ? 'true' : 'false' }">
  {{-- Simplicity is the ultimate sophistication. - Leonardo da Vinci --}}
</div>
```

It's even worse with arrays because you also have to convert double quotes to single quotes to avoid conflicts with the `x-data`'s quotes

I've made a little helper to ease this process it looks like this:
```html
<div x-data="{ @alpine($open) }">

</div>
```

Which would output (given that $open is true):

```html
<div> x-data="{ open: true }">

</div>
```

Let's dive in quickly to the directive that makes this works.

```php
Blade::directive('alpine', function (string $variables) {
            return <<<DIRECTIVE
                <?php
                    \$data = array_combine(
                        array_map(
                            fn (\$variable) => str_replace('$', '', \$variable),
                            explode(',', '$variables')
                        ),
                        [$variables]
                    );
                    \$replaced = str_replace(["'", '"'], ["\'", "'"], json_encode(\$data));
                    if (str_starts_with(\$replaced, '{')) {
                        \$replaced = substr(\$replaced, 1);
                    }
                    if (str_ends_with(\$replaced, '}')) {
                        \$replaced = substr(\$replaced, 0, -1);
                    }
                    echo \$replaced;
                ?>
DIRECTIVE;
});
```

This bit of code might seem complicated at first but it's mostly because of the limitations of custom Blade directives. 

I highly recommend checking out [https://github.com/ImLiam/laravel-blade-helper](https://github.com/imliam/laravel-blade-helper) for an easier time with Blade directives.

Anyway, I'll just explain the important part:
```php
str_replace(["'", '"'], ["\'", "'"], json_encode(\$data));
```

After converting the data to JSON, we escape single quotes and then convert double quotes to single quotes, which means that even if you're data contains single quotes, it'll work seamlessly.


I'd love some feedback as this is my first article ever (!)
Remote Onboarding 101: giving new employees the power to improve onboarding documents.
Tags: management, remote, onboarding
Published: 2021-03-18 22:30:43

---
title: Remote Onboarding 101: giving new employees the power to improve onboarding documents.
published: true
description: You can't spell Empower without power
series: Remote Onboarding 101
tags: management, remote, onboarding
canonical_url: https://rowasc.com/onboarding/new-employees-should-be-able-to-edit-your-onboarding-docs/
//cover_image: https://direct_url_to_image.jpg
---

One of my favorite low-effort onboarding hacks is giving every new employee **suggest/edit** permissions on **all** onboarding docs, and asking them to improve the document as they go through it.

By lowering the barrier to contribution and giving all new hires the power to improve the documentation they are using, you make onboarding a team activity.

Onboarding documents will get updated more often, small fixes will get shipped with each new hire, and your onboarding process will get better every time. 

It gets better because you will stop relying solely on people who know too much to tell you what's missing, and start relying on the experts of "is this document any good?" which are new employees trying to learn about your organization. 

For this to have a big impact, it matters to not just give them permission but to encourage contributions and explain that when they don’t understand something they should:

    - Reach out to their peers
    - Use their learnings to improve the documentation a little bit

This will result in more early opportunities to reach out to colleagues for clarifying questions, get their feedback, and ask for help. And getting comfortable asking questions and learning is part of successful onboarding, too, so it's a win-win-win. 

With this small change, **new employees are put in a position to have an impact on the experience of the people that will come after them**, and they get to do so from day zero.

**Each onboarding is an opportunity to do better.**

___

A note on implementation: depending on the size of your organization, you may be able to (and want to) get more granular with the permissions you provide. I've heard from organizations that ask all new engineers to "own the technical docs" for their team, and others where we simply give everyone the ability to suggest changes in Google Docs + permission to send pull requests to technology-related docs in GitHub; with everything in onboarding, local context will dictate how you do some parts of it. 

___


#### There is more to do before the end of their first day

I'm writing a series of Onboarding 101 posts, focused on all the little things that we take for granted (and shouldn't) when onboarding new remote workers. 
If you want to get it directly in your inbox, you can subscribe by going to https://rowasc.com/onboarding/new-employees-should-be-able-to-edit-your-onboarding-docs/
Software engineering is the art of compromise and pragmatism (Day 29 of Bytes of Wisdom)
Tags: career, journey, advice
Published: 2021-03-18 22:18:32

---
title: Software engineering is the art of compromise and pragmatism (Day 29 of Bytes of Wisdom)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojmm3rtwm4jf5i82ppig.png)

Software engineering is coding in context. Usually, that's a business context. Unfortunately, that will always come with constraints that means you cannot build the perfect codebase or the perfect product. There will be constraints on time, budget, design resource, testing resource, code review resource and all of these things means you need to focus on what is important and learn to let go of perfection. This can be heartbreaking sometimes and often can be incredibly frustrating, especially when you don't agree that the constraints in place mean the compromise you're being told to make. 

Being a great engineer is working on this. Both your own reactions to business constraints and your pragmatism as a developer. Sure, you're there to be a voice for solid engineering, but you're also part of a company with goals other than your own. Working on that balance within yourself is a career-long journey.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
I’m Excited About The No-Code/Low-Code Space
Tags: nocode, lowcode, visualdevelopment
Published: 2021-03-24 16:53:18

---
title: I’m Excited About The No-Code/Low-Code Space
published: true
date: 2021-03-18 22:11:48 UTC
tags: NoCode,LowCode, VisualDevelopment
canonical_url: https://maxkatz.org/2021/03/18/im-excited-about-the-no-code-low-code-space/
---

[I love the the no-code space](https://maxkatz.org/category/no-code/). When I saw this article [Decoding the no-code / low-code startup universe and its players](https://pinver.medium.com/decoding-the-no-code-low-code-startup-universe-and-its-players-4b5e0221d58b) – I was happy. [Pietro Invernizzi](https://pinver.medium.com/) and [Ben Tossell](https://twitter.com/bentossell) published this awesome guide listing 145 companies in the no-code/low-code space. There are probably many more companies out there. I’m excited about this space.

[![No-code/low-code companies](https://katzmax.files.wordpress.com/2021/03/nocode-lowcode-companies.png?w=1024)](https://katzmax.files.wordpress.com/2021/03/nocode-lowcode-companies.png)<figcaption>Source: <a href="https://pinver.medium.com/decoding-the-no-code-low-code-startup-universe-and-its-players-4b5e0221d58b" target="_blank" rel="noreferrer noopener">Decoding the no-code / low-code startup universe and its players</a></figcaption>

These tools and platforms enable many more folks to build solutions, and to build them fast.

**When you can solve a problem fast – I believe that makes people happy**.

I believe no-code/low-code is the future.

Developers/coders are not going away (but that’s for another blog post). Once developers/coders realize the power of no-code/low-code tools, many will start using them.

There are similar picture maps that show the ecosystem for containers, like [this one](https://d33wubrfki0l68.cloudfront.net/006ae380ad67eaf5e0fea4da6c37a756bcafe198/f3085/static/landscape-kuber-min-1.jpg) (from [Kubernetes as a Container Orchestration Tool](https://www.kubermatic.com/blog/kubernetes-as-a-container-orchestration-tool/)) for example. That just doesn’t excite me. I don’t know why.

What do you think?
What Github commits get wrong
Tags: github, design
Published: 2021-03-18 22:08:35

If you see this UI, what would you expect to happen when you click the username and profile picture respectively? 

![Github commit example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3pddva127yk932ntj09.png)

I'd expect to be shown the user profile in both cases. If not, then at least I'd expect those two elements to behave similarly. 

It turns out that clicking on the profile picture leads to the user's profile. While clicking on the username shows all commits by that user.

To be fair, hovering the profile picture brings up a short preview of the user's profile.

![Github commit example with user profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr9s1am8y3ollvnmq1sm.png)

Hovering the username displays a helpful tooltip.

![Github commit example with tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ypg02rxrerjweokcjzn.png)

However, that doesn't justify using two different patterns for two UI elements that are so closely related. 

What do you think? Do you find it difficult to tell the difference? And how would you have designed it differently?
Day 332 : Dream
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-18 21:59:38

_liner notes_:
- Professional : Sent the demo I've been working on to some folks to test out. Got some really good feedback and even an invite to speak at a WebXR meetup in San Francisco. Also got some links to more resources to dive into. There was a bug that was really bothering me that wouldn't work. It made me feel like the project wasn't complete if it didn't work. While I was sleeping last night, it's almost like it came to me in a dream. haha I thought of a possible workaround. So today, I worked on making that work, and it did! It's not the greatest, but it's a hack together demo and it worked. Worked on the demo's UI to the point that I'm happy with it. So in my book, the demo is done outside of cleaning up the random bits of code left over. Also had our greater team meeting so it was good to see everyone.

- Personal : Last night, I got a bit done on the dashboard. A user can log in and then based on their role, certain elements will show up. Also went through some tracks for the radio show. Not a bad night.

![A lake surrounded by pine trees and mountains in the distance in Spirit Island, AB, Canada with a small island in the middle with some pine tress.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytjzu1v4xf1ba6umw0qq.jpg)

Totally forgot to back up tracks to the cloud while I'm at the park. When I get back to the parking spot, I want to work on the dashboard for my side project. Maybe get the uploading functionality working on some things. Looks like it may rain later so I'll probably go to bed early.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube wiRAZ6CH90A %}
Dealing with developer burnout as a codenewbie
Tags: help, discuss, codenewbie, watercooler
Published: 2021-03-18 21:56:38

Developer burnout is a term I've heard thrown around a couple of times. To be honest I've ignored it up to now...I think I'm experiencing burnout.I don't want to be a loner who's constantly tired and late.

To be honest, I'm tired of the coffee 😅

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsbntk0pnittbep0e25x.jpeg)

Do you have any advice (especially from experience) on how I could maintain a healthy habit as an upcoming developer?
I moved back from macOS to Linux and I'm loving it!
Tags: linux, macos, setup
Published: 2021-03-18 21:33:50

> This article outlines my transition back from macOS to Linux with the help of references to the videos in the series I created last year. You can find [the complete playlist here](https://www.youtube.com/playlist?list=PLe6BbPAW-Wxgz5Jly855Aw3qWRiWqTXHO).

## A recap of my computing experience

In the first video, I talked about my computing experience that started from Windows back in 1999, traveling through several Linux distros in the next few years, finally settling on macOS. After the brief history, I talk about the reasons for my return to Linux and also list down a few pros and cons of the move in relation to my new machine.

{% youtube ix_Ji-lS_no %}

## My return to Windows for a very short while

In the second video, I describe my experience with Windows after several years for how it feels especially on the new device, and then I also briefly talk about my experience re-setting it up to make space for my primary Linux installation.

{% youtube c5bhNC4mVBs %}

## Setting up my new machine with Linux

In the third video, I dive deeper into the details on how I configured my new machine with Linux with a backup Windows partition and also talk about the challenges that I faced and the steps that I took in a little detail.

{% youtube u4ivXywSekY %}

## Setting up Nvidia hybrid graphics

In the fourth video, I talk about how I configured Nvidia hybrid drivers for my device and also the challenges that I faced, the limitations of the setup and, my custom tweaks to the arrangement.

{% youtube vRl2DTlH1Js %}

## Gaps and Issues

In the (then) final video I talk about the gaps and issues in my setup that I wanted to fill in after successful migration from the macOS ecosystem to Arch Linux.

{% youtube HDmJSgtJqmw %}

## Further

After I posted the fifth video in the series, I've taken care of most of the gaps and issues in my setup and will be making another video to talk about the fixes soon.

I'm totally loving my new setup. Do throw in your thoughts in the comments and hopefully, I can learn about something I might have missed.
Learning...so much to learn!
Tags: healthydebate, career, leadership
Published: 2021-03-18 21:06:46

So I found a tutorial online and it brought me to this site to post this as a markdown learning experience. I had never even _heard_ of markdown before. There is so much to learn now, and it is hard not to feel overwhelmed ATM. 
___
__Serious question...__

Is designing all parts of an App based game from start to finish a reasonable project, or is this something that just cannot be done without a team?
___

Things I'd like to see in my game:
- RPG style levelling

- Dynamic combat encounters rendered in 3D
  1. Tactical movement
  2. Dynamic initiative
  3. Novel damage system (damage reduces effectiveness)
- Mini-games 
  1. Loot drops lead to mini-game 
  2. Minigame *rewards* are usable or sellable items
- Random encounters between combat missions
  1. Static encounters (not movement based)
  2. Variable resolution scheme 

___

![Image of neon underpass](https://images.unsplash.com/photo-1578608738964-cd27acd5af2c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1382&q=80)

> free to use image included for style reference - Levon Vardanyan - Unsplash
Beginner: How can I add a CMS to my personal website?
Tags: help, cms, javascript, beginners
Published: 2021-03-18 21:06:15

Hi guys, I'm pretty new to coding and I would like to add a simple CMS to my personal website just to provide some structure to my blog. Whitout coding everything from scratch.

My current stack is very limited (HTML, CSS and a little bit of Javascript), so I wonder if this is possible?

I decided to learn to code because I don't like to use one theme on Wordpress, Ghost, etc., with limited desing or functionality options. I would really love to keep my website's current design and use this project to learn a bit more about Javascript.

Thanks in advance for any help.

Walter Dom
Design your VS Code dashboard ✨
Tags: vscode, react, productivity, news
Published: 2021-03-18 21:03:15

# VSC-Home
This week I released my first open-source project on GitHub, something that I wanted to share with you. 🎉
So I have been using VS Code for a long while now and I do still love it's features every day, for work, school and hobby purposes.
However the fact that my list of projects kept growing, and was increasingly getting more difficult to get some sort of overview of them, made me think of building an extension on my own.

Of course I came across nice extensions like [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager), but I wanted to have something more visual than the usual sidebar lists.
As also being a student UX I noticed that I desired some sort of 'escape hatch', where I could get a large overview in stead of a small sidebar.
*TLDR: [Try it here](https://github.com/githrdw/vsc-home)*

# Result
Fast-forwarded, the result is a draggable grid where widgets can be put on. Widgets can be named and colored and there are some built-in widgets like recent projects and a WYSIWYG notepad. That is however not where I am hyped about.
The main reason to use this extension is because of the extensibility. The grid webview is built with React and so are the widgets, also *yóúr widgets*.

![Theme friendly dashboard](https://raw.githubusercontent.com/githrdw/vsc-home/main/assets/Demo%20-%20Dashboard%203.png)

# Custom React components
When the dashboard opens, it will search in the AppData (or similar) folder for custom widgets. Using Webpack it's supercool [Module Federation](https://github.com/module-federation/) widgets will load async into the grid.
Using a [blank widget template](https://github.com/githrdw/vsch-template), you can create your widget within 1 minute* and it is even possible to include third-party dependencies! (disclaimer: personal record)

I must note that this extension is in very early stage, there is lots of work to do especially GUI-wise but please do not let that stop you from hacking around 😄
There are a lot of possibilities and features ahead like workspace-specific dashboards, multiple layouts / presets, marketplace for widgets, api calls, wizards / generators for automation and integration with your project source from a fancy GUI.


![The dashboard](
https://raw.githubusercontent.com/githrdw/vsc-home/main/assets/Demo%20-%20Dashboard%204.png)

You can download the extension on GitHub:
https://github.com/githrdw/vsc-home
Feel free to browse through the source code.

Let's know in the comments what you think of it, share your creation and ideas!💡
How Do I Livecode Without Panicking?
Tags: speaking
Published: 2021-03-18 21:02:26

Have you ever seen a mind-melting technical talk where someone was livecoding and you thought "That's cool, but I could never do that." Or maybe you thought: "I'll do that, but later in my life when I am more established. And no I'm not saying when." Or "That amazing speaker is just better than me. I can't do that because I am not a witch."

The truth is that amazing speaker isn't better than you. That amazing speaker probably just has notes.

When preparing a talk where you want to incorporate a bit of livecoding, consider a few steps:

## 1. Build a Demo

Put together a demo of what you want to present. Test it. Make sure it works. Refactor the code until you're ready to show it off.

## 2. Decide Which Pieces to Livecode

Does everyone want to see you build every single file? Maybe but probably not. Stay focused on the parts that matter to the overall message of your talk.

## 3. Create Your Notes

For my talks and workshops, I create markdown files for notes that can be clicked through as steps. The less thinking the better. Type one step. Click Next. Type the next step. Click Next.

![Teacher Notes](https://moonhighway.com/static/90c1b1f270692e5deea5cb92e47d126b/37051/notes.png)

This means that there's no question about what I should be doing at any given moment. Plus, I am never frantically scrolling through a long markdown file because I have lost my place. Creating separate files for each step takes longer, but I've never regretted the peace of mind that it brings.

## 4. Practice with Your Notes (Over and Over Again)

Once you've created your notes, run through your presentation lots of times. Run through it yourself. Record yourself doing it. Present in front of friends or family members or coworkers. As you practice, make sure that your notes reflect what you're actually doing and contain no mistakes.

Keep your notes on a second screen if you're presenting remotely or on an iPad/tablet if you're presenting in person.

## 5. Present with your Trusty Notes (+ a Baked Version)

Will you be nervous when you give your talk? Of course you will be. But with your notes, you'll have a trail map for where you're headed, and you'll feel prepared. More often than not, preparing in this detailed fashion will save you from unfortunate crashes. If something goes wrong, you can always pull out a complete version of the project and show people around the files.

## 6. Do It Again

Now you can give the same presentation somewhere else because you have such good notes.

--

Livecoding works. It's engaging and interactive because the audience wants to see if you can do it. When you rehearse and bring your notes, you'll bring your confidence. No magic beans required.
Carousel? You don't need JS.
Published: 2021-03-18 20:51:04

Hi Dev!👨‍💻

Today i have founded a simple way for create your carousel easily without JS.

This is your "magic touch" 🧙:

```CSS
scroll-snap-type: x mandatory;
```
➕
```CSS
scroll-snap-align: center;
```

With this properties, you can own a simple slidable carousel like my fiddle example:

{% jsfiddle https://jsfiddle.net/qbhotm48/23/ %}

If you want, you can add a dots, and anchor the images for scroll to a different image.

```HTML
<!-- My images -->
<div class="images">
   <img id="1" src:"">
   <img id="2" src:"">
   <img id="3" src:"">
   <img id="4" src:"">
</div>

<!-- My dots -->
<div class="dots">
   <a href="#1">&#9737;</a>
   <a href="#2">&#9737;</a>
   <a href="#3">&#9737;</a>
   <a href="#4">&#9737;</a>
</div>
```

Hope it is helpful!
🙌
Bulid React app with AWS Amplify
Tags: react, aws, amplify
Published: 2021-03-18 20:50:13

#Blog de testing para la pagina de ilimita
Quisque consectetur malesuada massa, at fermentum nulla pharetra a. Mauris id magna ex. Nunc tristique, ligula sit amet efficitur feugiat, justo justo faucibus nibh, eget vestibulum justo metus quis elit. Praesent volutpat aliquet accumsan. Suspendisse placerat lobortis aliquam.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf0fasurmu13xbbtbezu.png)
##AWS Config
Aenean commodo mollis nulla eu malesuada. Fusce et placerat leo. Vivamus ipsum orci, cursus ut sagittis vitae, consectetur et nibh. Donec in tellus at nibh interdum sollicitudin