teleren/devto huggingface dataset:
Stenciljs, una revolución de los componentes reutilizables
Published: 2021-01-05 14:12:19

Stencil es una tecnología bastante robusta y escalable que nos permite crear componentes reutilizables para nuestras aplicaciones, sin importar con que framework frontend estemos trabajando. 

Podemos crear desde componentes básicos como botones hasta algunos más complejos como calendarios personalizados, inputs increíbles, tablas bastante exigentes en cuanto a UI y funcionalidad y un sin fin de posibilidades.

###Sintáxis###

La sintaxis de Stencil es bastante parecida a la que usan los componentes de React orientados a clases ya que usan JSX y poseen los mismos hooks como son *componentDidMount*, *componentDidUpdate*, entre otros. 

```javascript
  
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-hello-world',
  shadow: false
})
export class HelloWorld{

@Prop() text: string;
  
render() {
  return(
     <h1>{this.text}</h1>
  )
}
```

Un componente básico de Stencil se vería de esa forma, los **Props** se encargan de recibir información desde el lugar donde se llame el tag, pueden ser todo tipo y pueden tener reglas especiales. Podemos ver también que en la sección del JSX. llamamos ese texto de manera dinámica para que se pueda renderizar lo que sea que le enviemos.

Ahora, veamos el mismo componente con un nivel de complejidad un poco más avanzada.

```javascript
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-hello-world',
  shadow: false
})
export class HelloWorld{

@Prop() text: string;
@Prop() showSubtitle: boolean;
  
render() {
  return(
     <div> 
       <h1>{this.text}</h1>
       {
         !!this.showSubtitle &&
         <p>Gracias por confiar en nuestra empresa</p>
       }
     </div>
  )
}
```

En este ejemplo podemos ver como a través de los **Props** podemos mostrar u ocultar ciertos elementos del DOM de acuerdo a lo que necesitemos. Todo está en los requerimientos que tengamos, Stencil puede llegar a ser bastante útil. 

En otro artículo estaré comentando acerca de su integración con Storybook para que se pueda manejar un proyecto escalable y ordenado a nivel de componentes.
Integrate Google Sheets seamlessly to Other Services | WayScript Tutorial
Published: 2021-01-05 14:03:44

Introduction
------------

In previous articles, we’ve discussed how to use Python and Google Sheets together to create a variety of programs. However, WayScript has just introduced a new spreadsheet editor that allows users to view and edit any Google Sheet in full screen mode. This is much easier to use and navigate than before, so in this article we’ll explore the feature and use it in a program that passes the information to Python. Keep reading to learn more!

Building our Script
-------------------

This simple example uses the Google Sheets and Python modules. Beginning with Google Sheets, in the toolbar to the left there are options to read or write a file. Once you’ve chosen one of these options (we’ll read a file for this script), click on the “Setup” button below the drop-down menu. This brings up the full screen editor. This is much more user-friendly than before, where the data was shown inside the toolbar. Choose which file and sheet to read from the toolbar, and then import the columns at the top. These steps are similar to the previous format and create stored WayScript variables.  
  
Clicking “Exit Read Setup” returns the user to the tree building view. The next step in this script is to add the Python module so that we can write code to perform a variety of functions. Clicking on “Enter Edit Code” in the toolbar brings up the code editor screen. There are several different bits of code that can be used here, but we’ll just use the “numpy” package to perform a few simple calculations on our data. The specific code used to do this is shown below.  
  
Python code for the calculations:
<pre>
import numpy as np 
one = [float(i) for i in variables[‘values_one’]]
two = [float(i) for i in variables[‘values_two’]]
result = np.array(one) / np.array(two) 
variables[‘result’] = result.tolist()  
</pre>
  
The result of that code is now stored as a variable. From here, you could choose to send it as an e-mail, create a hosted dashboard, and more. You can see how to build some of those scripts in other articles, but for now we simply wanted to run through the application of the new spreadsheet editor. We’re always looking to improve the WayScript platform, and these new features are just a few ways we’re doing that.

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/user/derricks/DgT_dc2u).
Making DataTable-Like Livewire Component: Search Items
Tags: laravel, livewire, php, tutorial
Published: 2021-01-05 14:00:29

### Creating Livewire Component and View File

```
php artisan livewire:make ProductsTable
```

```
- app\Http\Livewire\ProductsTable.php
- resources\views\livewire\products-table.blade.php
```

### `ProductsTable` Component

```php
<?php

namespace App\Http\Livewire;

use App\Models\Product;
use Livewire\Component;

class ProductsTable extends Component
{
    public $search = '';

    public function render()
    {
        $products = !empty($this->search) ? Product::where('name', 'like', '%'.$this->search.'%')->get() : Product::all();
        return view('livewire.products-table', compact('products'));
    }
}

```

### `products-table.blade.php` view

```html
<div class="w-full min-h-screen p-8">
    <div class="flex justify-center w-full">
        <div class="flex justify-end w-2/3 pb-8">
            <input class="px-2 text-sm border border-gray-300 rounded shadow" wire:model="search" type="text" placeholder="Search Product">
        </div>
    </div>
    <div class="flex justify-center w-full">
        <table class="w-2/3 border border-collapse border-gray-800 shadow">
            <thead>
                <tr>
                    <th class="p-2 text-sm text-gray-500 bg-white border border-gray-300">Name</th>
                    <th class="p-2 text-sm text-gray-500 bg-white border border-gray-300">Created At</th>
                    <th class="p-2 text-sm text-gray-500 bg-white border border-gray-300">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td class="p-2 text-sm bg-white border border-gray-300 text-gray">{{ $product->title }}</td>
                        <td class="p-2 text-sm text-center bg-white border border-gray-300 text-gray">{{ $product->created_at->toDateTimeString() }}</td>
                        <td class="p-2 text-sm text-center bg-white border border-gray-300 text-gray">-</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

```

### Usage in `products/index.blade.php` view

```html
<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Product List') }}
        </h2>
    </x-slot>

    @livewire('products-table')
</x-app-layout>

```

Note: I will elaborate on this post later
WordPress Backup und Malware Entfernung mit BlogVault
Tags: wordpress, backup, blogvault, security
Published: 2021-01-05 14:43:09

---
title: WordPress Backup und Malware Entfernung mit BlogVault
published: true
date: 2021-01-05 13:56:01 UTC
tags: Wordpress,backup,blogvault,security
canonical_url: https://j0e.org/wordpress-backup/
---

![WordPress Sicherheit mit BlogVault](https://j0e.org/wp-content/uploads/2021/01/wordpress-sicherheit.png)

 WordPress Backup, Firewall und Malware-Entfernung für deine Website sind ein wichtiges, aber auch einschüchterndes Thema. …

[WordPress Backup und Malware Entfernung mit BlogVault »](https://j0e.org/wordpress-backup/)
CRM- and Rule-Based Personalization in Sitecore Improves Conversion Rates

Tags: sitecore
Published: 2021-01-05 13:52:28

[In this article](https://www.brimit.com/blog/crm-and-rule-based-personalization-in-sitecore-improves-conversion-rates), we explain personalization driven by market research and exemplify how a provider of clinical equipment tripled their traffic during the pandemic.
PHP cheat sheet
Tags: php, beginners, programming, cheatsheet
Published: 2021-01-05 13:40:27

This PHP cheat sheet provides a reference for quickly looking up the correct syntax for the code you use most frequently. 

[![Php cheat sheet quick reference guide](https://dev-to-uploads.s3.amazonaws.com/i/ajre7zpak95n3s7clku2.png)](https://quickref.me/php)
How do I start to learn to program?
Tags: codenewbie, beginners
Published: 2021-01-05 13:38:19

Learning to program software begins with an interest in problem-solving. When it comes down to it, that's all that programming is; a set of instructions composed together to solve a problem. 

Learning how to program is a lot like learning a new language. There are words and rules you need to follow to express and share ideas. Programming starts with understanding the meaning behind the words used to write software.

The good thing is that once you learn the common meanings behind the symbols and words used in programming, learning new languages becomes more comfortable with practice.

All programming languages share the same or similar concepts and structures. An "if" statement in one language means precisely that in another. Picking a language to write in will take some research as to what problems you'd like to solve.

Start by thinking about what interests you. From video games to stock market analysis, there's a world of opportunities for you to make something your own.

Endless videos and articles demonstrate what you'd be capable of writing. Do some homework on what interests you. Let your curiosity lead you towards what you want to create.

Once you decide what you want to make, research the technology behind it. Try recreating something you enjoy using. It doesn't need to be identical; a small subset of features should be sufficient to get you started.

Now start!
ROT13: awful answers only
Tags: challenge, jokes, programming
Published: 2021-01-05 13:16:18

---
title: ROT13: awful answers only
published: true
description: Implement a rot13 encoder/decoder, but do so in a suboptimal way.
tags: challenge, jokes, programming
series: awful answers only
//cover_image: https://direct_url_to_image.jpg
---

New year, new challenges, new awful code.

Today you need to decode a short message:

> `066085033032076066072032078069082032078074083072089044032079072071032086032089086088082032076066072046`

Here are a couple of hints:

- That's some ASCII encoding
- Only the letters have been ROT13 encoded.

Remember! The code should be suboptimal. It's just after the holiday season so you need to get your CPU back in shape with some exercise.
Just three  🤓beginner-friendly projects, help you to learn React.
Tags: react, projectideas, beginners, learnreact
Published: 2021-01-05 13:15:20

#[Expense tracker](https://expense-tracker741.netlify.app/)

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

Here it's a simple expense tracker, you can able to track your income and expense. It's a simple and beginner-friendly project. If you can able to create this expense tracker app, you can easily create the todo-list.

#[Recipe Finder](https://recipefinder741.netlify.app/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3g22qzmneiby0hi75tp0.png)

Recipe finder application, you can search whatever recipes you want, it will show the list of ingredients about that recipe. The data are coming from a third party API. It's also an easy one for beginners. If you are able to do this project, you basically learn most of the things by this recipe finder, how to do async call, store data, and so on... 

#[Portfolio](https://shivashankar-741.netlify.app/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ru97vo10br4iqbwt7su.png)

And here the last one, which is your own 😄portfolio.
Make your portfolio as your project, which will help you to showcase skills and technologies.

>That's all guys, I will you see with next blog. 
Do you think of any projects I'm missing, please share your ideas👇
Live Coding Playground
Tags: html, css, javascript, tutorial
Published: 2021-01-05 13:12:05

Hello guys please check this <a href="https://stackfindover.com/coding-playground/" rel="nofollow">Live Coding Playground</a> and suggest me how to improve it.

**I need to add code suggestion in it**
Like: auto suggest `color`, `font-size` etc. something like **visual studio code**. 

Hope The Team **DEV** help me to improve it.
What is the best programming language for beginners?
Tags: codenewbie, programming, career
Published: 2021-01-05 13:07:57

No programming language is better than another; they all can accomplish the same or similar things. That's not to say they're all created equal. However, they all share the same basic principles.

Deciding to learn to program is one giant step of many. Once you're ready to start, picking a language is often the most challenging - there are so many! 🤯 

Most beginners tend to choose Python as their first language. It doesn't involve too much set up, and the syntax is clear and concise. Nevertheless, this isn't for everyone, and you should take a minute to evaluate your opportunities.

The first language you pick isn't as important as the resources available to support it. What good is a programming language if there's little or inadequate documentation? When looking for a programming language to learn, research the community for the quality of support they can provide.

You won't be surprised to learn that most programmers often search for their answers by reaching out to those who already solved their problems. 

Sorting arrays, finding object differences, and anything else you can think of - someone else probably already figured it out. Even experts at the highest level need to refresh themselves if they're knee-deep in code and can't figure something out.

### Community 🗣
Community resources are the benefit of starting with such popular programming languages as Go or Ruby. With that said, the first language you learn should lean towards what problems you want to solve. 

If you want to work with the user interface, maybe JavaScript or Swift would be a sensible place to start. 

Perhaps a little machine learning is something you want to take on? The R programming language is something to consider. 

You may not know what type of projects you want to work with to start. That's ok! The first programming language you learn will likely not be your last. 

### Research 🕵🏽
Research existing products or projects that you enjoy, then reverse engineer them to find what language it's written in so you can start learning. 

Once you get used to the syntax and learn the basics and programming principles, moving to different languages won't be as challenging as when you started. 

The key here is to start. Don't let choosing the "right" language get in your way of propelling your career as a software engineer.
Once you start writing a lot of code you're surely doing it wrong
Tags: typescript, javascript
Published: 2021-01-05 13:07:50

On several occasions, I've had a moment when very few lines of code solved an issue I was trying to solve earlier with very complicated or confusing and huge lines of codes which makes me come to the conclusion to this saying 

>  Once you start writing a lot of code you're surely doing it wrong

Here's a recent example of me trying to convert a text to an Array of Strings based on the occurrence of a valid HTTP URL found in the text.
I was trying to implement a feature Twitter has ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xf3omkfrtqxf53ifgheq.png) , that's shortening and highlighting URLs found in a post which is very useful and could also help if you want to implement a secure redirect from your app.

My First attempt:

```ts
// Copied from https://stackoverflow.com/a/63022807/10365156
const linkReg = /(https?\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#]?[\w-]+)*\/?/gm

const text =
  "Look at what he https://twitter.com/signalapp/status/1346258308496150528 vool     https://twitter.com/asemota/status/1346396079466622980"

 const links = post.title.match(linkReg) || []
  const texts = links.reduce((all, cur) => {
    if (all.length) {
      return all.map((v) => {
        let strs = []
        const all = v.split(cur)
        for (let [index, value] of all.entries()) {
          if (all.length - 1 === index) {
            strs.push(value)
          } else {
            strs.push(value, cur)
          }
        }
        return all
      }).flat()
    }
    return post
  }, [])
```
At this point, I was already confused and really tired as well, so I had to leave it for a while to clear my head.

And here is my second attempt:

```ts
const ph = "[z&&&&z]" // placeholder
let t = text.replace(linkReg, (v) => `${ph}${v}${ph}`)

console.log(t.split(ph))
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]
```

At this point, I've already achieved what I needed but going through MDN [Specifying a string as a parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter) reminded me about `$&` pattern so I refactored the code once more to get this

Third attempt:
```ts
const tokens = text.replace(linkReg, `${ph}$&${ph}`).split(ph)
console.log(tokens)
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]
```

This still gives me the same result as the second attempt but with lesser code, much readable and simpler overall.
Daily Developer Jokes - Tuesday, Jan 5, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-05 13:00:21

---
title: "Daily Developer Jokes - Tuesday, Jan 5, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jan%205%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125997196ca.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Why are keyboards always working so hard?

___A___: Cause they have two shifts!
 -->
5 Ways to Make Passive Income in Tech
Published: 2021-01-05 15:18:25

---
title: 5 Ways to Make Passive Income in Tech
published: true
date: 2021-01-05 12:58:29 UTC
tags: 
canonical_url: https://giftegwuenu.com/5-ways-to-make-passive-income-in-tech/
---

Many developers work a 9-5 and that's great! I do too :) But are you aware you can consistently make passive income by investing some time outside of your full-time job? In this video, I'll share proven ways of making a side income as a developer and tips on how to go about it.

{% youtube tQBh53KmxRU %}

### ⏰⌛️ Video Timestamps

[0:00](https://www.youtube.com/watch?v=tQBh53KmxRU&t=0s) Intro [](https://www.youtube.com/watch?v=tQBh53KmxRU&t=13s)

[0:13](https://www.youtube.com/watch?v=tQBh53KmxRU&t=13s) What this video is about? 

[1:41](https://www.youtube.com/watch?v=tQBh53KmxRU&t=101s) Content Creation 

[6:34](https://www.youtube.com/watch?v=tQBh53KmxRU&t=394s) Build an App / Website 

[7:42](https://www.youtube.com/watch?v=tQBh53KmxRU&t=462s) Create an E-book or Online Course 

[9:06](https://www.youtube.com/watch?v=tQBh53KmxRU&t=546s) Affiliate Marketing [](https://www.youtube.com/watch?v=tQBh53KmxRU&t=688s)

[11:28](https://www.youtube.com/watch?v=tQBh53KmxRU&t=688s) Freelance Projects [](https://www.youtube.com/watch?v=tQBh53KmxRU&t=740s)

[12:20](https://www.youtube.com/watch?v=tQBh53KmxRU&t=740s) Outro & Subscribe 

### 🔗 Links Mentioned

[Web Monetization with Coil](https://coil.com) [](https://www.youtube.com/redirect?q=https%3A%2F%2Fcoil.com&v=tQBh53KmxRU&redir_token=QUFFLUhqbnhfd3BPZC01a25wWTdRU1BvVWVrYVVLellrZ3xBQ3Jtc0tua2RhRGV3T3FZU2lPZEJ2MG1kY0ttMDlWUG1wV0k3dVEyYkZZLWltcnhuYUd2N3lTZ2hNLWw5Qi1kM2lGR0JmYXpLLWppRVZFZ0ZiS1o4b0hhZXVieXBwRk5SRVRpXzBjdnlkQ2dCU2h3V0dxYXJITQ%3D%3D&event=video_description)

[Carbon Ads](https://www.carbonads.net/) [](https://www.youtube.com/redirect?q=https%3A%2F%2Fwww.carbonads.net%2F&v=tQBh53KmxRU&redir_token=QUFFLUhqbEEwcG1WZTdSaDV2NHUxc01DWGtxV3dlcUswUXxBQ3Jtc0tueHNBQ0FZdUhmelMxbE9zMWd6RG1KUjd6LW5waHlfQWZ0REF2d2YxNVFjdk5OS0JhNGZtdm1kRWFVTUNUQ3dGNE1fNi1obVA0NnQ0QlVJTTNTWXlTanFaRVo3aWhwUE9ud2dycUg1R1hncUNnZEhLWQ%3D%3D&event=video_description)

[List of Publications that pay up to $600](https://talk.hyvor.com/blog/write-for-get-paid-for-developers/) 

Hope you enjoy the video :)
I am trying to create an app like google docs or apple pages, but I am lost.
Tags: javascript, react, django
Published: 2021-01-05 12:47:42

I want to biuld an app like google docs with customizable tables in which I want to add excels feathers in these tables.
I know few libraries like [react data grid](https://adazzle.github.io/react-data-grid/), [suneditor](https://github.com/mkhstar/suneditor-react/blob/master/README.md) and [draftjs](https://draftjs.org/) but the problem is 
 * which one I should choosing and is there better more customizable libraries, or is it better to build one from scratch?
* where should I start?
Color palette tool colorsui.com 🎨 - Ready to use 
Tags: webdev, html, design, productivity
Published: 2021-01-05 12:42:30

Hi there, I recently completed my personal project. which is basically a color palette website.

Tools which are included:
1. Popular color palettes.
2. Palette Generator (Customizable).
3. Tint & Shade Generator
4. Solid UI Colors.
5. Material Colors.
6. Color Picker.
7. Pick colors from the image.
8. User can create their own color palette

Please visit and start using it.

**https://www.colorsui.com**