teleren/devto huggingface dataset:
I just launched a free open-source Personal Website Template made with HTML, CSS, & Javascript
Tags: webdev, beginners, opensource, programming
Published: 2022-07-22 00:09:00

These past couple of weeks I have been working on creating a **personal website** for myself. Since I have frequently used open source code in the past, I thought why not turn the project into a **template** and release it for for FREE so others could benefit from it! You can visit the project on [Gumroad](https://rosacodes.gumroad.com/l/personal-website-template) or [Github](https://github.com/RosaCodes2021/Personal-Website-Template), and easily create your own personal website today.

{% embed https://www.youtube.com/watch?v=IA-k9k-eh9E %}

This template has separate sections for:
- a personal introduction + photo
- current projects
- completed projects
- hobbies
- spoken languages
- contact me (w/ action buttons to link to social media accounts and/or emails)

The template is **completely responsive**, and therefore looks great on both computers and phones. I will even add **new sections** in the future to expand on this project.

To create your own personal website from this template, only limited web dev experience is necessary. Just download the project from [Gumroad](https://rosacodes.gumroad.com/l/personal-website-template) or [Github](https://github.com/RosaCodes2021/Personal-Website-Template), and follow the **detailed instructions** in the Github README. The website is already fully functioning, so the only thing that needs to be changed are the images and text.

Let me know if you have any questions, and I hope this is useful! Also, be sure to follow me on **Instagram** ([@Rosacodes](https://www.instagram.com/rosacodes/)). I post coding & productivity related content, and am planning on releasing more projects like this!
How to ban imports with ESLint
Tags: eslintimports
Published: 2023-04-22 19:27:22

---
title: How to ban imports with ESLint
published: true
date: 2022-07-22 00:00:00 UTC
tags: eslintimports
canonical_url: https://bstefanski.com/ban-imports-eslint
---

Sometimes you don't want to use some modules from a library or other part of your code.

Maybe you're using a third-party dependency that contains modules with poor performance, bugs, or doesn't tree-shake them correctly. Maybe you want to create a modular architecture with ESLint config per module and ban imports from other modules.

No matter the use case, the goal is the same - you want to prevent your colleagues (or your future self) from using it.

For such and other cases, you can use the [no-restricted-imports](https://eslint.org/docs/latest/rules/) rule in ESLint. In the example given below, I banned the performance-heavy modules in the Chakra-UI library. If someone tries to use it, it will throw an error.

```

module.exports = {

// ... removed for brevity

 rules: {

"no-restricted-imports": [

"error",

{

 paths: [

{

 name: "@chakra-ui/react",

 importNames: [

"Modal",

"Checkbox",

"Drawer",

"Collapse",

"Fade",

"ScaleFade",

"SlideFace",

"Slide",

"Transition",

"Menu",

"Accordion",

"Toast",

"Tooltip",

"Popover",

"PopoverTransition",

],

 message:

"These imports are banned due to their dependence on framer-motion which bloats our bundle size. Please use our own implementation of that component. ",

},

],

},

],

// ... removed for brevity

},

};

```
New Course: TailwindCSS Fundamentals
Tags: tailwindcss, css, training
Published: 2022-07-24 06:18:04

---
title: New Course: TailwindCSS Fundamentals
published: true
date: 2022-07-22 00:00:00 UTC
tags:
  - tailwindcss
  - css
  - training
canonical_url: https://wildermuth.com/2022/07/22/new-course-tailwindcss-fundamentals/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/07/22/_trailer-cover.jpg
---

I’ve been diving deeper into the client-side development pool. One technology I’m really passionate about is TailwindCSS. In that vein, I’ve just completed a new course for [Pluralsight](https://shawnl.ink/psauthor) called [“TailwindCSS Fundamentals”](https://shawnl.ink/pstailwindcss). If you’re subscribed, you can watch it now here:

> [TailwindCSS Fundamentals Course on Pluralsight](https://shawnl.ink/pstailwindcss)

If you’re not subscribed yet, you can get a free 10-day trial (see the sidebar for a link) and watch it immediately. If you’re wondering what I cover, take a look at the trailer:

> [Watch](https://www.youtube.com/watch?wG3GgOf92kQ)

> [Subscribe to my YouTube Channel](https://shawnl.ink/yt)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
#JulyOT 22: IoT for Beginners lesson 4!
Tags: julyot, iot, beginners
Published: 2022-07-25 02:21:30

---
title: #JulyOT 22: IoT for Beginners lesson 4!
published: true
date: 2022-07-22 00:00:00 UTC
tags: julyot,iot,beginners
canonical_url: https://JulyOT.dev/blog/22-julyot-iot-beginners
series: JulyOT 2022
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-22-iot-beginners-59375ee86cd734eb87ff8bdc3838446f.png
---

_Today we live stream lesson 4 of IoT for Beginners - connect your device to the internet._

## IoT For Beginners[​](#iot-for-beginners "Direct link to heading")

[IoT for beginners](https://aka.ms/iot-beginners) is a free, open source, 24-lesson IoT curriculum. The second lesson is live-streamed today from the Microsoft Reactor.

Catch the recording on the Microsoft Reactor YouTube channel.

{% youtube AkptcIdq2lc %}

Learn more about IoT for Beginners on the official [IoT for Beginners GitHub repo](https://aka.ms/iot-beginners).
Blog: 2022-07-22: Content & Tooling Team Status Update
Published: 2022-08-18 15:43:02

---
title: Blog: 2022-07-22: Content & Tooling Team Status Update
published: true
date: 2022-07-22 00:00:00 UTC
tags: 
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2022-07-22-status-update/
---

It has been another quiet week for the team with most people out at some point. This week I made my first trip to our office in Belfast after returning from maternity leave. It was great to see familiar faces and catch up with lots of fancy coffee.

As always, thank you for all your contributions we really appreciate your time and effort.

Enjoy your weekend!

## Deferring Functions

The latest piece we have been working on with some of our colleagues in Portland is _deferred functions_. Thanks to [tvpartytonight](https://github.com/tvpartytonight) and [binford2k][binford2k] a working example can be seen in our [puppetlabs-postgresql](https://github.com/puppetlabs/puppetlabs-postgresql) module.

Check out [Ben’s blog post](https://dev.to/puppet/updating-puppet-modules-for-deferred-functions-5d6k) for more information on this.

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-postgresql#1347`](https://github.com/puppetlabs/puppetlabs-postgresql/pull/1347): “(FM-8971) allow deferred function for role pwd”, thanks to [tvpartytonight](https://github.com/tvpartytonight)
- [`puppetlabs-satellite_pe_tools#180`](https://github.com/puppetlabs/puppetlabs-satellite_pe_tools/pull/180): “report processor: load utils via absolute path”, thanks to [bastelfreak](https://github.com/bastelfreak)
- [`facterdb#256`](https://github.com/voxpupuli/facterdb/pull/256): “Release 1.19.0”, thanks to [bastelfreak](https://github.com/bastelfreak)
- [`facterdb#254`](https://github.com/voxpupuli/facterdb/pull/254): “Add amazon 2022 factsets”, thanks to [bastelfreak](https://github.com/bastelfreak)

## New Module / Gem Releases

The following modules were released this week:

- [`puppetlabs-stdlib`](https://github.com/puppetlabs/puppetlabs-stdlib) (`8.4.0`)

- [`puppetlabs-postgresql`](https://github.com/puppetlabs/puppetlabs-postgresql) (`8.1.0`)

- [`rspec-puppet`](https://github.com/puppetlabs/rspec-puppet) (`2.12.0`)
How to display your react card components as a grid
Published: 2022-07-21 23:24:26

I am working through my software engineering program and there is not a lot of focus on the styling side of things. So I attempted to teach myself how to display my react applications in grid form for my projects. I found there are a lot of fancy customizations you can do in grid formatting. But let's talk about some basics. 

When using styled-components, we can do the styling right on the `PageList.js` file.  We define Wrapper as a styled-component and in there we will use our CSS formatting to get the grid.
```
import PageCard from "./PageCard"
import styled from "styled-components";

const PageList = ({pages, user}) => {
  const renderPages = pages?.map(page => <PageCard key={page.id} page={page} user={user} />)
    return (
      <Wrapper>{renderPages}</Wrapper>
       )
}  
 const Wrapper = styled.section`
  display: grid ;
  grid-template-columns: auto auto auto;
  grid-gap: .5rem;
`;

export default PageList
```
Here we map through each Page and we render it within our `Wrapper` component. By setting our `grid-template-columns` as "`auto auto auto`" that will set the grid as three columns wide. If we set it to "`auto auto`" that will make it two columns wide. I prefer the auto formatting but if you would like them at fixed widths just use your CSS tools to set those widths.

That same code works in a CSS file if you prefer styling through a single file. 

`Thanks for coming to my DEV talk, Happy Coding!`
July 21st, 2022: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2022-07-21 23:12:50

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

Photo by [Joshua Dow](https://unsplash.com/@jmdphotography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Interview with Daniel Bryant, Ambassador Labs – Kubernetes, PaaS, Err what’s next?
Tags: kubernetes, cloud, interview, community
Published: 2022-07-21 23:05:12

After [KubeCon EU 2022](https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/), I had the chance to connect with Daniel Bryant, Head of DevRel at Ambassador Labs, and expand on his extremely popular KubeCon Session further.

I wanted to take his session, and also give it a platform/infra focus, as this is the background and world I'm from in IT, along with a lot of customer teams I work with, and I assume I'm not alone in this. I think we gave enough coverage of the new cloud native concepts and linking this back to the changing skills of platform admin.
My 25 minute marker soon ran over, and we recorded 47 minutes or so. Rather than cut it back or things out, I decided to release the full interview as two parts, to be enjoyed over some extended coffee breaks (tell your boss to blame me if your late back to work :wink: ).

Hopefully for those of you whom are interested, you enjoy the recordings!

[vEducate.co.uk - Interview with Daniel Bryant, Ambassador Labs - Kubernetes, PaaS, Err what's next? with a Platform/Infra point-of-view](https://veducate.co.uk/interview-daniel-bryant/)
Quick Way to Check if 2 Arrays are Equal in JavaScript
Tags: javascript, webdev, programming, es6
Published: 2022-07-21 22:49:52

When learning JavaScript for the first time we've all done this...

```javascript
const a = [1,2];
const b = [1,2];

if (a === b) console.log('Equal!');
```

If you'd tried this, then you KNOW `a === b` will return false every time.

*Why is that? *

Because array variables are assigned by **reference** NOT by **value**.

So `a` is just a pointer to the location of `[1,2]` somewhere in memory.
While 'b' is another pointer to a different location in memory, that also happens to be storing `[1,2]`.

When you're checking if `a === b`, you're really checking their member locations, and not the values they're pointing to.

### So what gives?

Is there any easy way to check if the underlying arrays that are represented by `a` and `b` are equal, **WITHOUT having to do an element by element comparison?**

### *Here's the  quick cheat to get it done...*

```javascript
const d = [1,2,4,5,6];
const c = [1,2,4,5,6];

if (JSON.stringify(d) === JSON.stringify(c)) console.log('Equal!');
```

### Why does this work? 

And what the heck is `JSON.stringify(...)` anyway?

`JSON.stringify(...)`  takes an array (or an object)and returns its string representation.

*It's stringified!*

For example:

```javascript
JSON.stringify([7,8,9])
```

Will just return `'[7,8,9]'`.  Since the value is a string, you can compare it with the value of another array, that's also returned as a string with `JSON.stringify(...)`. :)

This trick even works with double array (and multi-dimensional arrays in general).  You can also compare objects this way, *as long as properties of each object are in the same order.*

### Another Tip

If you want to compare if 2 arrays contain the same values, regardless of order, then just use `Array.sort()` method to sort both arrays first, THEN use `JSON.stringify` to compare then!

If you enjoyed this article please check out my blog
[Indepth JavaScript](https://indepthjavascript.dev/) for more insightful
content. 🤓
Updates from the 91st TC39 meeting
Tags: javascript
Published: 2022-07-21 22:46:00

There were several items on the agenda, this post focuses on feature proposals and their progress from the meeting that was held between 19-21st July 2022.

###Stage 4:
[Hashbang Grammar](https://github.com/tc39/proposal-hashbang): match de-facto usage in some CLI JS hosts that allow for `#!` Shebangs / Hashbang.

###Stage 3:
[Duplicate named capturing groups](https://github.com/tc39/proposal-duplicate-named-capturing-groups): allow regex capturing group names to be repeated.

###Stage 2:
[Import Reflection](https://github.com/tc39/proposal-import-reflection): Proposal for syntax to import ES modules with import reflection attributes.

###Stage 1:

- [Symbol Predicates](https://github.com/rricard/proposal-symbol-predicates): proposal to introduce ways to differentiate symbols.

- [Policy Maps and Sets](https://github.com/tc39/proposal-policy-map-set): proposal for Maps and Sets with cache replacement policies like LRU and LFU.

- [Function Memoization](https://github.com/js-choi/proposal-function-memo): Function memoization.

- [Object pick/omit](https://github.com/tc39-transfer/proposal-object-pick-or-omit): Ergonomic Dynamic Object Restructuring.


__Extra:__

This meeting was conducted in Google SF and below is the lunch time view!

![Google SF TC39](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3hil6hzlfr5qu66m01d.png)

  
<hr />

<center><b>[@gnumanth](https://twitter.com/gnumanth)<b></center>
Day 598 : Understand
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-21 22:37:14

_liner notes_:
- Professional : Like every Thursday, I had a bunch of meetings. It was good to see everyone. There was some pretty big news that was announced today. Interested in seeing how things turn out. Spent the rest of the day helping answer some community questions and finishing up making changes to some docs that I just got guidelines for. I basically made the instructions more explicit so that the user can fully understand what is happening. Sent it to the team and asked some things I need clarification on. We'll see what they say.

- Personal : Last night, I went through a bunch of tracks for the radio show. I studied some Japanese and signed up for a new resource. I then went to bed after watching some episodes of "The Rising of the Shield Hero". I'm almost caught up.

![View of the mountainside of Manaslu Circuit, Nepal extending into the distance with some forest on the side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phxl1husoudu8kop883t.jpg)

Hoping to do the same as I did last night. Work on the radio show, study some Japanese and watch some anime. I'm out!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -2IJdXp8c48 %}
How to View Apex Code Coverage in VS Code
Tags: vscode, testing, guide, salesforce
Published: 2022-07-21 22:19:00

This is a summary of instructions for how to view unit test coverage in VS Code as an alternative to using Salesforce’s Developer Console. The official guide, [Apex Tests | Salesforce for VSCode](https://developer.salesforce.com/tools/vscode/en/apex/testing) is a great resource, but this post also includes a video walkthrough.

## Instructions
1. In VS Code click Code > Preferences > Settings and search for Apex Coverage.

2. Set `salesforcedx-vscode-core.retrieve-test-code-coverage` to **true** by checking the box of that setting.

3. Click the beaker icon in the Activity Bar on the left side of the VS Code editor and run a test or multiple tests. The coverage percentage and lines that were not covered by the test run will show in the output panel.

4. To see code coverage for your test, click the three-bars icon that’s next to your Org alias at the bottom of VS Code and open the class or trigger that you’re testing. Click the the three-bars icon to toggle between enabling and disabling code coverage highlighting.

A video walkthrough:
{% embed http://www.youtube.com/watch?v=-fwY2Wyhhao %}

---

Do you prefer to review test coverage in the developer console or VS Code? Let me know in the comments!
Herança em JavaScript com prototype e function
Tags: javascript, beginners, programming
Published: 2022-07-21 22:17:05

Herança de objetos é um princípio de orientação a objetos e fornece a habilidade de acessar métodos e propriedades de outro objeto (pai) a partir de um objeto derivado (filho). Herança em javascript é possível através do **prototype** ou seja **herança de protótipo**. 

O javascript disponibiliza a palavra chave **class** - a **palavra-chave class** foi introduzida no **ES2015**, mas é **syntax sugar**, o JavaScript permanece baseado em **prototype** - para declarar classes e extends para fazer herança. Nesse post irei usar a abordagem **function** e **prototype** para detalhar o processo de herança e prototype chain.

**Prototype chain(Processo de pesquisa nos prototype)**

No javascript quando vamos acessar uma propriedade de um objeto o motor do javascript vai **verificar se existe essa propriedade no objeto** e caso não encontre i**rá procurar no prototype do objeto** e se também não encontrar **irá procurar no prototype do prototype** e assim por diante passando por todas as instâncias que foram herdadas **até chegar ao último prototype**. Caso não encontre o JS irá retornar **undefined**.

Para acessar as informações do prototype utilizamos `__proto__` e com ele podemos acessar informações de outros prototypes acima (mais genéricos).

Vejamos o seguinte exemplo onde temos três objetos em que a classe mais baixa **Diretor** herda características de **Professor** e **Funcionário**:

```javascript
function Funcionario() {}
Funcionario.prototype.salario = () => 'R$ 10000'

function Professor() {}
Professor.prototype = Object.create(Funcionario.prototype)
Professor.prototype.horaExtra = () => 'R$ 500'

function Diretor() {}
Diretor.prototype = Object.create(Professor.prototype)
Diretor.prototype.bonus = () => 'R$ 2000'
```

Agora vamos inicializar o objeto Diretor e acessar o método salario() que foi herdado:

```javascript
const diretor = new Diretor();
console.log(diretor.salario()); //output => 'R$ 10000'
```

Isso foi possível porque quando chamamos o método salario() o motor do javascript verificou se esse método existia no prototype de Diretor e como não encontrou foi "subindo" passando de prototype em prototype até encontar o método no prototype de Funcionario.

Utilize `__proto__` e veja a cadeia de prototype (prototype chain) através instância mais baixa que é Diretor:

```javascript
console.log(diretor.__proto__) //output => prototype Diretor
console.log(diretor.__proto__.__proto__) //output => prototype Professor
console.log(diretor.__proto__.__proto__.__proto__) //output => prototype Funcionario

```

**Conclusão**

É muito importante entender bem  "herança de protótipo" no javascript para escrever códigos complexos. Evite que sua cadeia de protótipos seja grande e quebre a cadeia caso necessário para evitar problemas de performance.
Super Easy & Profitable “Pro Hack” For Amazing Websites With NextJs
Tags: nextjs, beginners, javascript, webdev
Published: 2022-07-21 21:52:00

Dear Next.Js Aficionado,

So you wanna build a beautiful website, right?

A website that shows your high level of web development skills and one that helps you get the best job offers or freelance gigs, or that attracts users for your cool app.

Nice, we all want that!

But often we don’t get it because we make a common big mistake.

It’s so widespread that even sessional professionals fall victim to it. No matter their high achievements or their years of experience. Once they go for their own website, many times they create something ultra-functional. Something well-coded.

But something with... 

## ZERO marketing or design value

It’s just plain ugly.

No offense, but we – all web developers, must learn that we’re not some extraordinary guys who can handle every possible challenge in the world.

We’re not superhumans!

Anyway.

The point is – we’re not web designers. We’re not UX experts either.

So we shall not try to be one!

The “super easy and profitable pro hack” is to start working with web designers or at least – use professional templates. You will see a drastic improvement in your ability to put online fast whatever projects you want that make you look BIG POTATO in the industry.

It’s not criminal to be a small potato, though…

But why be one when you have all the opportunities you need to look larger than life?

## And the best part?

You can get wonderful free HTML templates right now! The internet is full of them.

Just pick something beautiful and turn it into a piece of Next.Js art.

Cheers,
Sashe Vuchkov

PS. I offer [a free template](https://buhalbu.com/stream/next-js-free-blog-template), too. It’s nothing fancy, but I put in it all of my marketing knowledge. The knowledge that inundates me with job and partnership offers to this day.

If you’re curious about how I structure my own portfolio websites for maximum success, you can download it on Gumroad in exchange for your email.