teleren/devto huggingface dataset:
A quick look at VueJS
Published: 2020-04-06 10:43:30

Ah! So you came to learn about [VueJS](https://vuejs.org/)? Well, today that's exactly what I am here to tell you about. As always I am your guy for learning about various neat and interesting libraries and frameworks. And as a disclaimer. I am in no way shape or form an expert in Vue, but I will surely be teaching you a good way to get started with it!

Anyway. What is Vue? Well, Vue is a front-end framework that lets you extend HTML with HTML attributes called directives. Before we incorporate Vue into your code, I recommend an awesome chrome extension called [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en). It's an awesome way to check what is happening in your code anytime you would like all in the browser! Now that we know what Vue is, let's get right into implementing Vue into your code!

If you are looking to take a deep dive and use Vue in a large scale application you can easily do a quick ``npm install vue`` and you will be able to use Vue anywhere in your application.

The other way to add Vue to your project is by simply adding a CDN script tag to your main HTML page.
```js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

Now that we know all that, I am gonna give you guys a short rundown with the help of the 'getting started' from Vue itself! Here we will be rendering a list of todos using Vue.

##HTML
```HTML
<div id="todos">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
```

##JavaScript
```JS
var todos = new Vue({
  el: '#todos',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
```
After all of that, our webpage will look a little something like this.
```
1. Learn JavaScript
2. Learn Vue
3. Build something awesome
```
Interestingly enough, Vue auto-updates its data as it is changed. Once your page loads, try typing into the console ``app4.todos.push({ text: 'Make a todo app' })``. You should be able to see the new item displayed on the page.

So now that you have seen some code. Let me explain a few things here.

First things first. The first thing you might see that is different from your average HTML. This is what is called a directive!

``<li v-for="todo in todos">``

This line here. Very similar to AngularJS, Vue has directives. Personally I feel that Vue directives are much simpler than those in Angular. Basically a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue, the v-for directive is used to render a list of items in an array. It very much especially reminds me of JavaScripts es6 for-of loop.

Vue has a ton more directives and other interesting ways to create components. Maybe I can tell you all about it in another blog at some point in the near future as I continue to learn about Vue myself! And there ya have it, hackers! I hope you learned at least a little something new about Vue here today! Hope to see you all in the future! Happy Coding hackers!
Creating a todoist date identifier component
Tags: discuss, showdev, vue, javascript
Published: 2020-04-06 10:29:19

---
title: Creating a todoist date identifier component
published: true
description: Recently created a todoist like date identifier component on vue
tags: discuss, showdev, vue, javascript
---

Recently created a project that try to mimic todoist's date tagging functionality. I used vue for frontend and it is a proof of concept. Could you please comment, If direct manipulation on updated() model is valid? I also open to any comments and new issues

{% github basarozcan/todoist-date-identifier-clone %}
How I make a Laravel Job to fail without restarting so I can use sentry to log the exception?
Tags: help, jobs, laravel, sentry
Published: 2020-04-06 10:21:26

I want to be able to log exceptions into sentry but in a manner that also won't make my job to spawn like an overlord's minion.

{% stackoverflow 61057560 %}

Can you help me with that?
soooo, what exactly is thoughts and prayers??
Tags: html, website, mywebsite
Published: 2020-04-06 10:21:18

no one asked. but, i thought that it would be good to explain what exactly is thoughtsandprayers.tk (the website i own and actively work on).

so, its kinda a diary haha. Yeah, i know that kinda of embarrassing; but, here me out! Ever since i started learning HTML5 i've become obsessed with documenting my progress. i made thoughtsandprayer.tk as a way to actively see my progress and the end results as i'm usually never satisfied until the finished product/project. 

i talk a lot about shit, haha. literally anything. it's my own personal twitter except its not twitter.com it thoughtsandprayers.tk. But, where did you get the name then?? from a book? or was from a movie? well, close!

i absolutely love Anthony Jeselnik, pretty underrated comedian in my opinion. the name came from his comedy special on netflix named 'Thoughts and Prayers'. A lot of the stuff that i write is kinda stupid and really dumb, I mean, its a diary of some sort what do you expect?? haha!
Resources for Building a Beautiful Progressive JAMstack Blog
Tags: blog, jamstack, pwa, progressivewebapp
Published: 2020-04-06 10:13:45

Hey guys? We are back again this time i want to share with you the tools i used to build this project. I would like to thank the creators and team behind these tools. I use these tools regularly in personal and client projects. But they contributed a great deal to this project. Even though i used a theme. Part 3 is coming soon and you may see UI changes hence the reason i reserved that for last. If you haven’t see part 1 and 2 i suggest you do.

> [**_Building a Beautiful Progressive JAMstack Blog Part_** **_1_**](https://ajulusthoughts.wordpress.com/2020/03/31/building-a-beautiful-progressive-jamstack-blog-part-1/)  
> &   
> [**_Building a Beautiful Progressive JAMstack Blog Part 2_**](https://ajulusthoughts.wordpress.com/2020/04/05/building-a-beautiful-progressive-jamstack-blog-part-2/)
>
> Part 1 and Part 2

#### STATIC SITE GENERATOR: [**HUGO**](https://gohugo.io "HUGO")

#### THEME: [**HUGO VERSION OF NARATIVE’S NOVELA**](https://github.com/forestryio/hugo-theme-novela)

#### HOST: [**GITHUB**](https://github.com)

#### CONTINUOUS DEPLOYMENT: [**NETLIFY**](https://netlify.com)

#### DOMAIN NAME: [**NAMECHEAP**](https://namecheap.com)

#### HEADLESS GIT BASED CMS: [**FORESTRY CMS**](https://forestry.io)

#### MANIFEST, ICONS AND BASIC SERVICE WORKER GENERATOR: [**PWASTARTER**](https://pwastarter.love2dev.com)

#### PWA SCRIPTS(WEB SHARE, PUSH NOTIFICATIONS): [**PWABUILDER**](https://pwabuilder.com)

#### PERFORMANCE TESTING: [**PAGESPEED INSIGHTS **](https://developers.google.com/speed/pagespeed/insights/)& [**GTMETRIX**](https://gtmetrix.com/)

#### SCREENSHOT TOOL: [**FIREFOX SCREENSHOT**](https://screenshots.firefox.com/)

#### COMMENTS: [**UTTERANCES**](https://utteranc.es)

#### IMAGE CONVERSION TOOL: [**FILE CONVERTER**](https://file-converter.org/)

#### IMAGE OPTIMIZATION & COMPRESSION: [**FILE OPTIMIZER**](https://nikkhokkho.sourceforge.io/static.php?page=FileOptimizer)

#### NEWSLETTER TOOL: [**FORMSPREE**](https://formspree.com)

#### SECURITY, CACHING AND MORE: [**CLOUDFLARE**](https://cloudflare.com)

#### CODE EDITOR: [**VISUAL STUDIO CODE**](https://code.visualstudio.com/)


**Go check out these awesome blogs for more awesome content:**
* [**TechKnow Africa**](https://techknow.co.ke)
* [**Stream254**](https://stream254.com)
* [**TMJ**](https://tmj.home.blog)
* [**Ajulu’s Blog**](https://blog.stephenajulu.com)
How does the Node Package Manager work?
Tags: node, npm
Published: 2020-04-06 10:09:05

In the software industry, there are lots of package managers present like maven, nugget and currently npm. A package manager is a software which finds whatever package you required, installs that package on your local machine it also manages that package and if you want to uninstall it will remove that package from your system.

Right now there are lots of packages on the internet and if you want to go out and find that site install it on the machine is a little bit time-consuming task so package manager solves that problem you only need to fire command and it will find it and install it on your machine.


npm install jquery
In the above command, jquery is our package name.
PySpark and Apache Spark Broadcast Mechanism
Tags: todayilearned, beginners, distributedsystems, python
Published: 2020-04-06 10:07:55

:bird: Follow me on [Twitter](https://twitter.com/AdiPolak), happy to take your suggestions on topics.

---

Apache Spark is based on distributed computation and distributed data concepts. Each machine/task gets a piece of the data to process.

Many times, we will need something like a _lookup table_ or parameters to base our calculations. Those parameters will be static and won't change during the calculation, they will be read-only params.

Broadcast variables are used when static(read-only) variables need to be shared across executers.

### Why Should We Use It?

Without broadcast variables, these variables would be shipped to each executor for every transformation and action; this can cause network overhead. However, with broadcast variables, they are shipped once to all executors and are cached for future reference. See the example next.

### Python code sample with PySpark :

Here, we create a broadcast from a list of strings.
Loading a _Parquet_ file to Spark DataFrame and filter the DataFrame based on the broadcast value. The broadcast is being shipped to the executers only once(network call for each executor). If we used a list without the broadcasting mechanism, for **every row/entry** in the DataFrame, we would send the whole list, which will result in many networking requests.

The number of requests will be equal or greater than the number of rows in the DataFrame. Since we talk about Big Data computation, the number of executors is necessarily smaller than the number of rows. And will clutter our cluster. 
In the end, we release the executor dedicated memory by calling `broadcastVar.unpersist()`.

```python
from pyspark import SparkContext, broadcast
from pyspark.sql import SparkSession 
import pyspark.sql.functions as func

spark = SparkSession.builder \
    .master("local[*]") \
    .appName("App Name") \
    .getOrCreate() # starts spark session locally

sc = spark.sparkContext

words_new = sc.broadcast(["list of values to broadcast", "spark", "python"]) 
data = words_new.value # accessing the value stored in the broadcast in master

df = spark.read.parquet ('some_file_with_header.parquet')  # loading parquet file into Spark DataFrame
filtered = df.filter(func.col('name').isin(words_new.value)) # filtering dataframe based on broadcast list with isin functionality

words_new.unpersist() # sending requests to each executer to release static variables from dedicated memory
```


That was Apache Spark Broadcast with PySpark in UNDER 3 min! Which is part of [Apache Spark Bitesize series](https://dev.to/adipolak/apache-spark-bitesize-series-1jd2).


![](https://media1.tenor.com/images/1934950f75d452b11b7ae5d7c77f4017/tenor.gif)
JSDoc – destructured object literal
Tags: javascript, jsdoc, es6, help
Published: 2020-04-06 09:58:38

---
title: JSDoc – destructured object literal
published: true
description: How do I document destructured constants imported from another ES6 module?
tags: javascript, JSDoc, es6, #help
---

Here's a situation. We've got an ES6 module that we use for helper functions and constants across various other modules in the project. Within this module, I export an object literal that defines our breakpoints. So far, all is clear (however, if you see a possible improvement, please do let me know.

```js
/**
 * # OurProject Helpers File
 *
 * This file should contain any js small script that helps other files.
 *
 * @module Helper
 * @since 1.0.0
 */

...

/**
 * Exports object literal with breakpoints matching those set in
 * `/library/scss/utils/_variables.scss` in the Rupture section. The values
 * represent screen width in pixels:
 *
 * @constant
 * @type {Object}
 * @default
 * @example
 * const breakPoints = {
 *     xs: 576,
 *     sm: 768,
 *     md: 992,
 *     lg: 1200,
 *     xl: 1400,
 * };
 */
export const breakPoints = {
    xs: 576,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1400,
};
```

Then I've got another ES6 module. Let's call it `ScrollSlider`. In this module, I need to import a couple of things from the `Helper` module. And use them. Amongst them is a couple of breakpoints. I define these within the module's scope and then use them in the class.

```js
'use strict';
import { getOffsetTop, breakPoints } from './Helper';

/**
 * Parallax-like step-by-step slider used for example at `/app-builder`.
 *
 * @module ScrollSlider
 */

/**
 * ???? HOW WOULD YOU DOCUMENT THIS ????
 */
const { sm, md } = breakPoints;

/**
 * Used for creating instances of the scrolling slider.
 */
class ScrollSlider { ... }
```

Now the questions:
* Is this a _good_ way of defining the breakpoints within the `ScrollSlider` module?
* I'd like the breakpoints to be mentioned on the ScrollSlider module documentation page, how do I get them there?
What is the first thing you do, when you get into a new project in order to familiarize yourself with the code base?
Tags: codenewbie, computerscience, productivity, opensource
Published: 2020-04-06 09:51:46

Do you have any techniques, tips and tricks of how to quickly familiarize yourself with a new code base, i.e. projects within a company or open source projects?

I mainly work on web projects (JS, npm/yarn, grunt/gulp/webpack) but I would be interested in experiences in other projects as well.
How do YOU actually publish your packages to NPM?
Tags: discuss, npm, packages
Published: 2020-04-06 09:43:09

There are many articles on this platform on how to publish packages. I still would really like to know how YOU publish your packages.

* CI vs manual?
* Always minified vs. letting user minify vs. adding both?
* Bundled vs single files and letting user bundle
* `dist` folder structure vs managed by `package.json`
* do you already use the `GitHub` package registry?

I am really curious for this discussion :-)
Wordpress hosting: Best hosting solution for devs
Tags: wordpress, hosting, cloud
Published: 2020-04-06 09:26:48

Hello My hosting provider is shutting down and i am on the look for a new one.

I am looking for recommendations on where to host a simple **low traffic personal portfolio site in wordpress**.

It could either be:
- **Major Cloud provider**: I can consider solutions like Azure, Google Cloud or AWS if its cheap enough and easy to setup 
- **Shared Wordpress Hosting** like bluehost.com or dreamhost or hostgator
- **Other cloud providers** like zeit or netlify

I think what needs to be evaluated here is:
- **Yearly Price**
- **Ease of initial deployment**

Only mandatory requirement is to be able to have **my own domain** purchased independently (not from the hosting provider) and **SSL certification**
Refactorizando vidas con AngularMalaga
Tags: angular, cleancode, devops
Published: 2020-04-06 09:03:39

---
title: Refactorizando vidas con AngularMalaga
published: true
description: La comunidad de AngularMálaga me invitó a un directo para hablar de código limpio y refactorización, ¡refactorizando vidas!
tags: angular, cleancode, devops
cannonical_url: https://geekstorming.wordpress.com/2020/03/30/refactorizando-vidas-con-angularmalaga/
cover_image: https://pbs.twimg.com/media/ET9690WXsAIxnMt?format=png&name=900x900
---

El día 25 de marzo era un día muy especial. Era el día en que **la comunidad de AngularMálaga me había invitado como ponente** para compartir mi conocimiento y mis intereses sobre programación. Con la noticia que está sacudiendo el planeta parecía que no sería posible llevarlo a cabo.

Pero conseguimos salvar los obstáculos encontrados, ¡pues nos reunimos de forma **digital a través de YouTube**!

{% youtube 3IePwogH9p8 %}

### ¿Qué es AngularMálaga?

**AngularMálaga es la comunidad de personas interesadas en Angular**, que usan este *framework* de forma ya sea profesional o bien por afición. Hay muchas comunidades de Angular a lo largo del mundo, pero esta se concentra en Málaga.

Puedes encontrar más información en su [grupo de Meetup](https://www.meetup.com/es-ES/Angular-Malaga/) o bien en [su web](https://sites.google.com/view/angular-malaga/), pero en estos tiempos de confinamiento y cuarentena, su contenido se concentrará en el [canal de YouTube](https://www.youtube.com/channel/UCJhRPniwydP6F0fJnbIBL7Q).

De forma local, son **más de 800 personas**, ¡y espero que sigan creciendo!

### ¿De qué trató el evento?

La calidad del código es muy importante, y para conseguirla es vital usar la empatía. **Detrás y al final del software, lo que hay son personas**, y necesitamos tratar con ellas para realizar múltiples tareas: determinar especificaciones de un producto, escribir código legible y claro para el equipo de desarrollo, explicar al cliente lo que necesita saber...

Todo empieza por código limpio, refactorizando el código que escribimos para mejorarlo dentro de lo posible.

Así que, desde nuestras variables hasta la Programación Orientada a Objetos, ¿cómo podemos mejorar nuestro código? **¿Cómo aplicamos la empatía en nuestro equipo de desarrollo?** Esto es lo que abordamos en el meetup.

### ¿Habrá más en el futuro?

¡Puedes apostar por ello! La comunidad de AngularMálaga agenda un evento al mes, y han demostrado que esta situación no es un impedimento para llegar a las personas que la componen.

No perdáis de vista [su actividad en redes](https://twitter.com/AngularMalaga), os podéis suscribir a su canal de YouTube para futuros eventos, ¡porque habrá mucho contenido por disfrutar!

seeU!
Validate mail address format the easy way – a follow up
Tags: csharp, dotnet
Published: 2020-04-06 08:36:37

(First published on [What the # do I know?](https://zoharpeled.wordpress.com/2020/04/06/validate-mail-address-format-the-easy-way-a-follow-up/))

A while ago I’ve blogged about an [easy way to validate mail address](https://dev.to/peledzohar/validate-mail-address-format-the-easy-way-5145), without using long, unreadable, unmaintainable regular expressions.

As it turns out, my suggestion is somewhat lacking, because the format validation in the MailAddress constructor is [less than perfect](https://github.com/dotnet/docs/issues/6620), allowing some invalid string formats to generate a valid mail address.

Here's what David Shulman from Microsoft had [written on the subject](https://github.com/dotnet/docs/issues/6620#issuecomment-409026920):

> We've gotten a lot of questions on this topic over the years. The short answer is that the MailAddress constructor is never going to be up-to-date versus manually using a regex. Changing the parser inside the constructor to fix bugs will break some applications. So, we have refrained from changing the behavior of this class.

> Do we need to remove mention of it from this regex topic, where it's presented as the preferred alternative to a regex?

> Yes, I would remove that language. Using a regex using the most recent RFC definitions would be the best choice.

Microsoft have published a document called [How to verify that strings are in valid email format](https://docs.microsoft.com/en-us/dotnet/standard/base-types/how-to-verify-that-strings-are-in-valid-email-format) but there has been an on going debate on this article - mainly about problems spotted in the regular expression featured there - you can start with the comments section at the bottom of the page to see what I mean. Personally, I found following all the suggestions and links from there a little discouraging - seems like there's no consensus on what exactly that email validation regular expression should contain.

Therefore, I think that even with Microsoft’s discouragement, I would still recommend not to use a regular expression to validate an email address format.

In the end, the only real way to validate an email address is to send a confirmation email to that address and get a response – just like any major website registration process does.

Validating the mail address format should be a first step, but it absolutely can not the only step in validation the address itself – if the format isn’t valid you shouldn’t try to send the confirmation email – but that’s about all it’s good for – giving your user a heads up and stop the registration process as early as possible.

IMHO, A few false positives is not a good enough reason to use a far more cumbersome code.
Planning Poker in times of Corona Virus
Tags: estimates, productivity, agile, programming
Published: 2020-04-06 08:21:46

---
title: Planning Poker in times of Corona Virus 
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6t1gffkuvyfo6k1kqyc7.png
description: an alternative to physical planningpoker cards.
tags: #estimates, #productivity, #agile, #programming
---
In our team, we always made estimates with [poker cards](https://dev.to/dvddpl/do-you-play-planning-poker-4f9f).
Recently, due to the social distancing measures against Covid19, we are all working remotely.
When the time for our first online estimates meeting we were wondering how to do that:

> Should we just discuss the tickets in the livechat on Hangout or Zoom and give up the "secrecy" of the covered card estimate?
Should we write all at once the value in the slack channel?  
Should we download one of the many planning poker apps on our smartphone and do that with that?  How? Displaying the screen in the chat? 
Well, we could add polls in the slack channel!  Well, that's close, but way too much manual work, there must be an app for it. 

And of course there is:  [Slack Poker Planner](https://github.com/dgurkaynak/slack-poker-planner)

Just a matter of having it installed in our company workspace and we were able to quickly write the name/ticket description and everyone in the channel automatically was receiving a poll with the t-shirt sizes.
As soon as everyone voted, the result is displayed to all. 

So here we have, **Coronavirus-safe Poker Planning**!

That's a very handy solution, which is actually even **faster** than a real meeting with real cards, even though, the gambling spirit is a bit lost...

![gambling](https://media.giphy.com/media/xT5LMQth5x5NKXVeog/giphy.gif)

Our next step is having the estimate updated directly inside our Jira ticket.  I know that even before we had to manually update the ticket during the meeting and we could do the same now... but I guess there is some app to achieve that. ( for now I quickly googled [this](https://www.nextup.ai/slack-jira-integration/) ) but did not have the time to check it out. Does anyone have some tips?