teleren/devto huggingface dataset:
Implenting VueJS is Easier Than You Think!
Published: 2021-02-11 00:53:51

## Um... but what is VueJS??
VueJS is an open-source framework of JavaScript that you can build a user interface or a single page app!  I am ~not the greatest~ at coding in JavaScript.  Like I know the BASICS.  When I decided to implement VueJS into my previously existing resume project, I expected it to be very difficult.  But, its so easy!  All you have to do is include the script (src) into the HTML code from a Vue library that you can search and find online!

## So then how do you use it in a resume format?
I used VueJS to create a little get to know me visual.  I wanted to take a little more fun approach to this, as I previously made a real resume on Code Pen as well with HTML and CSS.  The first thing I did was define and create the sections that I would need - name, education, some fun facts, video, and a photo.  Vue makes these easy to implement: once they are defined, then you can recall in the HTML loop.  Using bullet points was also not too hard - <li> is used to do this puts them in a bullet format automatically!  Creating this while using Vue was much more straightforward than I thought it would be.

## Final Thoughts
Overall, I should not have been as intimidated with the idea of learning VueJS as I was.  As someone who knows the very basics of JavaScript (and I mean basicssss) I was just afraid that it was going to take forever to grasp.  But alas, it was not!  Honestly, spending a couple of minutes to look into the basic syntax and finding a library, and you will be up & at it using Vue!  So go try it out.  For more of an explanation of the this, watch this [video](https://youtu.be/E4aGnrzwAYU) OR just look at the [code itself](https://codepen.io/solveyourstrife/pen/poNEXeX) here!
Pasaran Toto Kl Semarang

Tags: totokl, kudalari
Published: 2021-02-11 00:37:25

Pasaran Toto Kl Semarang
Kadang information yang anda cari tahu ada bedanya yaitu mana yang kami inginkan, maksudnya investigasi sudah mudah sebagai dampak result benteng lari akan tetapi tidak replace akan kolom belum ditempati. Prediksi hk milik pribadi disediakan tanpa libur & akan pada update pada saat malam hari pukul 23. 00 Wib. 

Inilah hasil angka kuda lari yang di singkat KL Semarang - Biasa keluar malam nomornya di jam 23:00 wib serta keluar sore nomornya di jam 17:45 wib hari ini, lengkap end komplit dengan tabel data pengeluaran di bulan terbaru, Januari 2021.

Hasil kuda migrasi sebelumnya agar dapat membantu untuk meracik angka tepat kl yang akan berdiri dalam permainan selepas itu. Saya tidak akan disediakan lelahnya memberi tahu anda kalau tak terdapat yang akan paham nomor berapa yang akan diperkenalkan. Dengan demikian informasi oleh kami dalam tetaplah bertaruh di alurnya jangan sampai seluruh sesuatunya raup.

Jika ingin bertaruh kuda lari di mana tempatnya, dan tempatnya bukan di sini karena di sini hanyalah menampilkan hasilnya saja. So yang ingin bertaruh silahkan langsung bertanya saja di eyang google, pasti dengan senang hati eyang google akan menjawabnya, tinggalah memilih mana yang terpercaya.

source : http://bit.ly/2MY1nSa
Utilizando o WIDGET SingleChildScrollView do FLUTTER para resolver estouro de pixels na tela
Tags: flutter, dart, mobile
Published: 2021-02-11 00:23:59

Faaala devs tudo certo? Hoje venho trazer uma técnica/dica valiosa na hora de montar seus widgets em tela no FLUTTER.
Quando estamos desenvolvendo nossos app, e colocamos muitos widgets em tela onde acabamos estourando a capacidade de pixels em tela o FLUTTER apresenta uma faixa amarela informando quantos pixels você ultrapassou na tela. E a maneira para resolvermos isso é adicionando um scroll na tela, de uma forma bem simples utilizando o widget SingleChildScrollView:

```
SingleChildScrollView(
    child: Container(
      child: ListView.builder(
       //O physics: BouncingScrollPhysics() Adiciona uma animação 
       //elástica no scroll
       physics: BouncingScrollPhysics(), 
       itemCount: 100, 
       itemBuilder: (context, index) {
        return ListTile(
         title: Text('Título $index'),
         subtitle: Text('Subttítulo $index'),
       );
      }
     ),
    ),
  ],
 ),
),
```
E assim você consegue resolver os problemas de quebra de layout no seu app.

Espero que tenha ajudado vocês de alguma forma, até a próxima!!!!
Lit Element V. React                             Comparison
Published: 2021-02-11 00:17:39

**What are these?**
React is an open-source front end, Javascript library for building user interfaces or UI components. It gives users the ability to  make user interfaces. Theses interfaces are very easy to create and have many options on how they look and work. Overall this lets us compose complex UIs from small pieces of code.

LitElement allows users to create fast web components that work in any web page with any framework. It is a fast way to make web components that can used in many environments. LitElement defiantly doesn't have the same customization as React. React has a very wide range of capabilities. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6cchy97i89q70phfr8af.png)
**What's Similar and What's Different?**

The main difference between the two is that React has a framework background while LitElement is a Library. A framework calls the code itself and is a compilation of libraries. In LitElement the code is reused. The main similarity is that the code for both framework and library are written by someone else that is used to defeat common problems. But a library gives you the most of the control and allows you to pick and choose what you want to use. For a framework you have limited choices. When using a library you are the one in charge of the flow of the application. You are making the decisions on when to call the library. When using a framework, the framework is the one in charge of the flow. It lets you put in your code but still calls the code. There really isn't a better one to use. It really falls on the user to pick what they like and what level of control they need.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/argju2it0d775sqcg1dd.png)
This image above really demonstrations the difference. 

In summary, one isn't better than the other. They both have their own positives and negatives. Like I stated earlier its up to the user to pick what they like and how they want to set up their own UIs. Thank you!
Youtube Video Explanation --- https://youtu.be/BN8jL9wxSm0
One hour Game jam experience

Tags: gamedev, gamejam, godot, unity3d
Published: 2021-02-10 22:02:14

A short story about my experience with one hour game jam.

**What is one hour game jam?**
One hour game jam, or in short 1hgj, is a great way to improve your skills in game design and development, You will be amazed by what you can achieve in just one hour. The concept is straight forward, you have one hour to design, develop and publish a game related to the random subject which is revealed when the jam starts.

**First Experience**
I had the chance to participate in 1hgj 2 times by the time writing this post; The first time the subject was “one hard minute”, so I came up with some sort of a “maze” game where you have one minute to complete it; From this game I created a full web game “fukaso”, inspired by this jam, you can see the value that 1hgj gives you, it makes you a better game designer and also gives you inspiration for your creations.
<iframe frameborder="0" src="https://itch.io/embed/391828" width="552" height="167"><a href="https://sangress.itch.io/ftohgj">FTOHGJ! by ꗟḫߥï 𝚫ᥰგ𝖗𝟈ʂʂ</a></iframe>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xqiwncox77hd43jpkyxn.png)
[Play the final version for free](https://sangress.net/games/fukaso/)



**Second jam**
On the second jam the subject was “limit”, and I had a hard time to find an idea for a game about limit, a game that is simple enough to create in one hour…eventually after about 20 minutes of just thinking and listening to my girlfriend’s ideas as well I came up with a goofy little game that you need to keep the weight-limit for your hippo; And the reactions was surprising and made me feel good about that game.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/756im3t7y7pgjsp8xc67.png)

[Play Hippo Limit](https://sangress.net/games/weightlimit/)

**Live stream of the published games**
In 1hgj, at the end of the jam, they sometimes stream a live session (on their website) playing all the games submitted to the jam, this is an amazing experience by it self! It gives you a small shot of adrenaline and also the opportunity to see an experienced person’s reaction for your game *live*!

**In conclusion**
I recommend this jam for all game designers, experienced and noobs :)
It makes you realize what are the important parts about game design and focus on them.
The jam is taking place every Saturday night and you can see the exact hour on their website;
so go crazy! go and do stuff, it will make you laugh.



***Links***:
[1hgj website](https://onehourgamejam.com/)
[My 1hgj page](https://onehourgamejam.com/?page=author&author=sangress)
How to check if a string contains at least one number using regular expression (regex) in JavaScript?
Tags: javascript
Published: 2021-02-11 00:00:00

---
  title: How to check if a string contains at least one number using regular expression (regex) in JavaScript?
  published: true
  tags: JavaScript
  date: Thu Feb 11 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-string-contains-atleast-one-number-regex-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-e73d147e4831801067247fa23061d0af.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-string-contains-atleast-one-number-regex-javascript)
  
To check if a string contains at least one number using regex, you can use the `\d` regular expression character class in JavaScript.

- The `\d` character class is the simplest way to match numbers.

```js
// Check if string contain atleast one number 🔥
/\d/.test("Hello123World!"); // true
```

To get a more in-depth explanation of the process. Read on 📖.

Consider we have a string with some numbers `Hello12345World!` like this,

```js
// String with some numbers
const str = "Hello12345World!";
```

Now let's write the regex by wrapping the `\d` character class inside regular expression delimiters like this `/\d/`.

```js
// String with some numbers
const str = "Hello12345World!";

// Regular expression
const regex = /\d/;
```

At last, we can use the `test()` method in the regular expression and pass the string as an argument to the method to test if the string contains at least one number. It can be done like this,

```js
// String with some numbers
const str = "Hello12345World!";

// Regular expression
const regex = /\d/;

// Check if string contians numbers
const doesItHaveNumber = regex.test(str);

console.log(doesItHaveNumber); // true
```

- The method returns boolean `true` if present and `false` if not.

See the example live in [JSBin](https://jsbin.com/naqawikewo/3/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Visualize Git Branch Tree
Tags: git
Published: 2021-04-19 19:36:48

---
title: Visualize Git Branch Tree
published: true
date: 2021-02-11 00:00:00 UTC
tags: git
canonical_url: https://tech.serhatteker.com/post/2021-02/git-branch-tree/
---

We saw how we can visualize our commits with tree-like graph in the post [Visualize Git Log Tree].

![git visualize log tree](https://tech.serhatteker.com/img/content/2021/glta.png) 

Okay but sometimes I only need **branch names**, since I create and add bunch of feature or fixing **bugs** — a.k.a **another feature**. Therefore I want to know which branch is the *up-to-date* one or where this branch comes from. I
wanna see the branch *relations*.

Luckily we have a log *format* for that:

```bash
$ git log --graph --simplify-by-decoration --pretty=format:'%d' --all
```

It will show **branch tree** like below:

![git branch visualize](https://tech.serhatteker.com/img/content/2021/glb.png)

## Alias

An alias will be useful for this command since I'm gonna use it a lot.

```bash
alias glb='git log --graph --simplify-by-decoration --pretty=format:'%d' --all'
```


All done!


[Visualize Git Log Tree]: https://tech.serhatteker.com/post/2021-02/git-log-tree/
DevOps is just cooperation
Tags: devops
Published: 2021-02-16 14:29:55

---
title: DevOps is just cooperation
published: true
date: 2021-02-11 00:00:00 UTC
tags: devops
canonical_url: https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/
---

DevOps is such a sadly misunderstood term.

LinkedIn is flooded with posts for “DevOps Engineers.” Many organizations have “DevOps Teams.”

Heck, [Microsoft](https://azure.microsoft.com/en-us/services/devops/) and [GitLab](https://docs.gitlab.com/ee/topics/autodevops/) even have tools with the word “DevOps” in the name.

All of these examples are missing the entire point of DevOps.

DevOps is simply the alignment of Development with Operations. In a word: it’s _cooperation_.

Any time you hear the word “DevOps” in a sentance, phrase, or title, replace it with the word “Cooperation” and see if it still makes sense. If it does, the speaker may know what they’re talking about. If it doesn’t, they’re hyping the buzz, probably for marketing reasons, and they don’t know what they’re talking about.

Nobody wants to be a “Cooperation Engineer” or work on a “Cooperation Team”. That’s just silly!

Don’t be silly.
Enumeration in PHP
Tags: programming
Published: 2021-02-10 17:45:56

**tldr;** php 8.1 will introduce enum as a new data type derived from classes and will behave like objects.

Enum syntax in PHP
```php
enum Status{
    case Draft;
    case Published;
    case Archived;
}
```

long gone are the days of php being mocked for the missing features. The world of php is catching up with new features introduced every release.

In php 8.1 one of the most interesting feature being added to the language is the data type called enum (or Enumeration)

enum have existed for a long time in other languages where it acts as a set of possible values grouped together in a structured way such that type safety can be guaranteed.

For example, a model called post might have a field called status which can be supplied a string value from the code calling the function `setStatus(string $status)`. Generally we would like to perform some validation as to make sure the status is one that makes sense.

While there are many ways to do just that starting from a function checking the value using an `in_array($status, self::VALID_STATUS_ARRAY)` to having a pojo class called `Status` with methods to return status that you want to pass to the model.

But the most widely accepted way is to have a specific data type called enum as shown above.

**php 8.1** finally is in last stages of the [RFC](https://rishiraj.dev/post/new-features-in-php-8_1-enums/#--rfc-details) that adds just that to the language along with few helpful functions like [`enum_exists`](https://rishiraj.dev/post/new-features-in-php-8_1-enums/#--new-enum_exists-function)

Enums will behave like standard php objects and will work with functions like `is_a`, `get_class` and will have magic methods like `__CLASS__`

I hope you liked this post, [I wrote about enum in details here](https://rishiraj.dev/post/new-features-in-php-8_1-enums) where I go deep into the explaining all available features in php enum along with some limitations and restrictions.

I also list possible ways to use enum today in your code using some well known packages.

How do you feel about enum finally coming to php and do you think there are still some features you would like to be added to the language? let me know in the comments.
4 Takeaways (mistakes) From my First Big Javascript Project
Tags: javascript, webdev, beginners, vue
Published: 2021-02-10 23:24:31

I learned to code intent on building a project, I’d had in mind for some time. Previously, I’d hired freelance developers to build my ideas - some were good, some were bad, but they were always expensive! Learning to code, was a great decision - I love it!

So, I created [On Your Frequency](https://onyourfrequency.com/), which provides a way for new music producers and artists, to get help and feedback from experienced musicians, instantly via video chat. 

Though I’m pleased with the project, I definitely made some mistakes.

# I spent too much time building before testing

I did a Udemy course to create the video element, and quite quickly I had something good enough to test with users - I just didn’t realize it. So I kept building, which was fun. and I learnt a lot - Firebase, Github, Stripe integration, Bootstrap, Twilio, Node.js to name a few - but I was making assumptions. Testing sooner would have given me clearer direction. 

# I built too much

Any time someone said “what about adding this?” I would add it. Sometimes it worked, sometimes it didn’t, but it always took time, and made the project more complicated. 


# I built everything from scratch 

I really enjoy problem solving, and some aspects of the project, like the video connection, work I because I experimented. However, I quickly realized the more mundane problems weren’t worth spending time solving, as they’ve already been solved many times, by people smarter than me! I could have saved time by using existing templates, and by making my own code more reusable. 


# I didn’t use a framework

I really like vanilla javascript. For me it’s like reading, writing and math - I don’t know how I lived without it. That said, although the platform the works, the code is difficult to maintain. It’s ’noob’ code to start with, and it’s not well organized. So I’m using Vue JS now - here’s a video I made on some great ways I found to learn it:  
{% youtube OPiMJ787-c0 %}


# So what’s next?

I’m glad you asked. I really enjoyed working on this project, although it’s not perfect. The next goal is to take this concept and make it a business - part of that is writing manageable code, of course. I’ve gotten great feedback, and will be rebranding and expanding beyond music, including areas of interest to the Dev.to community. I’m also moving beyond just video. There will be some announcements soon, so if you’re interested please follow me on here. If you’d like to know more before then, ask me in the comments, or send me a message.

Thanks
Introduction to decorators in JavaScript
Published: 2021-02-10 23:14:44

---
title: Introduction to decorators in JavaScript
published: true
description: A decorator is a function that takes in a function as an argument and alters its behaviour without modifying the underlying function
tags: 
//cover_image: https://miro.medium.com/max/960/0*QVBiJm3K13l4nTYn
---

![Image for post](https://miro.medium.com/max/960/0*QVBiJm3K13l4nTYn)

Credits: [Household beautiful](https://www.housebeautiful.com/uk/decorate/news/a1602/how-to-find-a-good-decorator/)

A **decorator** is a function that takes in a function as an argument and alters its behaviour without modifying the underlying *function*. It is written as a function closure.

## **Decorators vs Higher order functions**

A **higher\-order function** is a function that takes one or more functions as arguments returns a function as its result while a decorator takes is a function that takes in a function as an argument and alters its behaviour. Decorators mutate the variable while higher order functions are recommended not mutate the variable. Practically, decorators and higher order functions do the same thing.

**Examples**

{% gist https://gist.github.com/Rexben001/f0ecf597b3f096eb5410096309bb9925  %}
Created  a powerOf function that takes two parameters and returns the power of the two parameters.

Then, we created a logsDecorator to decorate the powerOf function by adding logs before and after the invocation of the powerOf function.

{% gist https://gist.github.com/Rexben001/aef407e73947932d9bd43ce214426f9c.js %}


In this second example, we created a decorator to cache the results of the powerOf to avoid invoking the functions severally with the same params.

It checks if the parameters are cached, if yes, it pulls the cached result or else it invokes the function and caches the parameters and the results.

{% gist https://gist.github.com/Rexben001/ca7b926733aca35436450de11fefb8c8 %}


I made some changes to the third example, I made use of Class called MathsFunction with a constructor and two methods which includes **powerOf** and **addition**.

**cacheDecorator** takes in two parameters, the object and the function. The reason I passed the object is for it to preserve the value of **this**.


If you try to invoke **func()**, you’ll get an error that this is not defined. So, I used **func.call()** and passed in the object which represents **this**.

The **call()** method calls a function with a given **this** value and arguments provided individually.

# Summary

1.  We learnt the definition of decorators.
2.  We learnt that decorators and higher order functions do the same thing.
3.  We learnt how to use decorators for logging events
4.  We learnt how to use decorator for caching
5.  We learnt that **call()** method calls a function with a given **this** value and arguments provided individually.
Quick tips to easily create a beautiful custom PDF resume with HTML and CSS
Tags: resume, career, codenewbie, css
Published: 2021-02-10 23:07:28

Nobody enjoys sitting down and writing their resume, right? But we *do* enjoy making websites (hopefully most of the time anyway)

So.... why is it normal practice to write our resumes in tools like Microsoft Word when we've got all these CSS skills just waiting to be used!

Creating a full-page, full-bleed, totally custom PDF resume from a web-page is easy, it just depends on one piece of CSS code:

```css
@media print {
    body {
        width: 8.25in;
        height: 11.75in;
        margin: 0 0 0 0;
    }
}
```
This will make it so that when you print a web page within Chrome, it will print it to perfectly fit the size of an A4 piece of paper.

The only other setting you need to adjust at the print preview screen in Chrome; in 'More Settings' make sure Margin is set to None, print the page to PDF and there you have it! A custom HTML & CSS resume as a full-page digital resume.

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

*Note:*  When designing your new resume, it's best to work with a custom viewport in the dev tools rather than having to go into print preview every time to see how it will look on paper - You can set it to 825 x 1175 to correspond to the paper size.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emq5y2far80gqb3hlj0q.png)

*Note 2:* This only works in Chrome as right now I can't see a way to do a full-bleed print to PDF in Firefox...

**Final added benefits to convince you:**

- All `<a>` tag links in your web page will *still* function as working links in your final PDF
- Instead of being stuck with MS Office, you can create your resume with whatever tool you're comfortable with; Sass, Tailwind, hell - even Bootstrap! (I'm *definitely* not saying you should, I'm just... saying that you *can*)
- You can have your own custom backgrounds to make your resume stand out. Go with lots of colours to funk it up, or maybe choose a textured off-white background for something a little more classy.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hifnuw73wzmr6zvgj8bz.gif)

So there you have it! Go get creative, use those dev skills and actually *enjoy* writing your CV for once :-)