teleren/devto huggingface dataset:
VS Code: Search-and-Replace Regex
Tags: vscode, regex, findandreplace, webdev
Published: 2019-09-16 15:56:16

---
title: VS Code: Search-and-Replace Regex
published: true
description: Find and Replace is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it for VS Code. 
tags: VSCode, Regex, FindAndReplace, WebDev
series: VS Code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tqdcgu6b23hfczjp6jt0.png
---

This is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it. Therefore, I am writing this article as my own reference to a useful tool with VS Code.

## Details (Regex Flavor)

> The find widget is simply using **JavaScript's regular expressions** as specified in ECMAScript 5 (the runtime of VS Code) ...

[Reference](https://github.com/Microsoft/vscode/issues/8635#issuecomment-230318011)

VS Code has the option to opt into using the Perl based PCRE2 engine. This can be enabled through the settings config.

This allows more advanced regex operations like lookaheads and backreferences. The regex still has to be valid JavaScript regex.

> VS Code does support regular expression searches, however, backreferences and lookaround aren't supported by default. But you can enable these with the setting search.usePCRE2. This configures ripgrep to use the PCRE2 regex engine. While PCRE2 supports many other features, we only support regex expressions that are still valid in JavaScript, because open editors are still searched using the editor's JavaScript-based search.

## Use Find-And-Replace

You can press **<kbd>Ctrl + H</kbd>** on Windows and Linux, or **<kbd>⌥⌘F</kbd>** on Mac to enable search and replace tool.

![Search-And-Replace Image](https://thepracticaldev.s3.amazonaws.com/i/0wp01npxh0bmxp92tahj.png)

[Reference](https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_search-and-modify)

Basically, with some code needing a **Search-and-Replace** pattern applied ...

```javascript
const demo = {
  test1: 'test1',
  test2: 'test2',
  test3: 'test3',
  test4: 'test4',
  test5: 'test5',
  test6: 'test6'
};
```

... with this code, assuming I want to create an ***index*** that uses the number within the string, we can use a regex like ... `'(.*?)(\d+)'`. This regex will select all the text within and including the single-quotes.

If I want something like `test1: 'test1', index: 1,` then a simple replace of the selection above would become ... `'$1$2', index: $2` and the code when all are replaced becomes ...

```javascript
const demo = {
  test1: 'test1', index: 1,
  test2: 'test2', index: 2,
  test3: 'test3', index: 3,
  test4: 'test4', index: 4,
  test5: 'test5', index: 5,
  test6: 'test6', index: 6
};
```

## Conclusion

Because this is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it, I wrote this article as my own reference to a useful tool with VS Code.
Life in a growing startup!
Tags: startup, life, growth
Published: 2019-09-16 15:50:23

---
title: Life in a growing startup!
published: true
description: 
tags: startup, life, growth
---

It's been almost 2 years now, I've been working with a start-up that has created an amazing SaaS product for any teaching institutes to bring them out of the traditional pen paper approach to a sophisticated yet simplified online platform for student management. [ReportCard](https://reportcard.ae) | going through this will let you know what I'm talking about, 

Coming back to the topic now, this journey has been a rollercoaster ride for me in all senses possible, there have been super chilled days as well as there have been rigorous nights, but it's always been challenging and fun.. Now to young developers out there, I've got some nooks & crooks to say for paying your way into this life...

Firstly, life in startup isn't easy at all, everyday I reach up to my office and there's something new waiting for me.. maybe a new / uncovered use-case, new client onboarding, certain tweaks and turns based on client-requests. You got to be in one to know one. 
Secondly, the scope of development is immense.. you never know what all are the things you'll learn while you are in this journey of uncertainty, the biggest of the uncertainties being, what will be client favourable. Now I can tell this from experience I've had that there would never be an ideal client, you'll be sure about them using a certain feature, and will end up developing it, to find that it's not being used by many... But that's the learning road you'll have to undertake in order to reach at a good place. 

Next, I'm sure many of your startup enthusiasts will understand is that, you've to be prepared all the time... Be on holiday, be at home, be it middle of the night, you've to be prepared and be ready for support coming in. There's no option here, especially if you are in growing startup with a small team, it's imperative that you stay on feet all the time. But trust me, it's a different level of fun, solving the problems and turning it around asap!

Finally, since there's a lot about this journey that I can't share over 1 post, I would like to mention, the team you work with is the most crucial part of it... There's nothing better than having a great team coordination and understanding to make things like a great startup happen.


_(P.S. this is my first post after long long time.. your criticism is highly appreciated)_
Fullstacking: Users + Login/Register
Published: 2019-09-16 15:43:55

Before adding Users I tried to implement GraphQL's Subscription, but ended up running into a lot of trouble and decided to worry about this later as I should be launching the MVP as soons as possible. For this reason, this part of the tutorial will be a little clumsy, sorry about that.

Our goal now is to add User's Login and Register.
We shall start by duplicating all our Event's files and adjust them to Users as the idea behind it's exactly the same.

## User Files (server)

No big mystery here, just copy and paste your `EventType` and `EventModel` file and change everything from Event to User.

Also, change the EventType author from String to User as follows

![](http://i.imgur.com/dLyUncx.png)

While we're at the server side, we can also create [UserLoginWithMutation.js](https://github.com/Markkop/fullstacking/commit/97533ea988a8643524c87838118cd56a64607c88#diff-6ec151a2085e8c0deccbc7a0da03e720) and [UserRegisterWithMutation.js](https://github.com/Markkop/fullstacking/commit/97533ea988a8643524c87838118cd56a64607c88#diff-f34217d827a55eae529952ebfb32c7ca)

Don't forget to [add](https://github.com/Markkop/fullstacking/commit/97533ea988a8643524c87838118cd56a64607c88#diff-6ec151a2085e8c0deccbc7a0da03e720) these new queries and mutations to our GraphQL Types and updating its Schema (`yarn update-schema`)

Make sure to split User and Event files in separated folders so the project keeps organized.

## User files (app)

In the app's folder you will [mimic the strategy](https://github.com/Markkop/fullstacking/commit/8c92938e2fd2df4768ab1c878ad144033ea9c120).

![](http://i.imgur.com/wVJb8wj.png)

## Password and JWT

To encrypt and decrypt the password we'll be using `bcryptjs` lib and for JWT `jsonwebtoken` lib.
Check [this commit](https://github.com/Markkop/fullstacking/commit/6fb3f0dfa81a249ac5044e8ddada71369ee37ed3) to see how implement these few lines.

## Navigation and Authentication

For [navigation](https://github.com/Markkop/fullstacking/commit/740bc38c7afd837c8d9dcb5da099070b4ee9eb3b), we'll use `react-navigation` with a temporary navigator called `createMaterialTopTabNavigator`. It's pretty similar to `react-router` and the authentication stack can be implemented [this way](https://reactnavigation.org/docs/en/auth-flow.html).

We'll also need to get the JWT returned from the server to make sure our user can perform requests.

![](http://i.imgur.com/pHr4jwt.png)

## Author field

We want to display the event's author name without manually inserting it. I still haven't find the correct way to do it, but managed to implement this workaround:

![](http://i.imgur.com/vqX8Kyv.png)

We'll change this any time soon
What should I do in this circumstance?
Tags: css, html
Published: 2019-09-16 14:12:06

I wrote a css code like this:
<☆style> 
        input type="text/css" {
        background-image:url(https://postfiles.pstatic.net/MjAxOTA5MTVfNzkg/MDAxNTY4NTU2MzUyMDgy.zafr2QX1piImxHGJ-J87MKVI9rnYQ8j9KaMo5v2rpbAg.cXcUCJfnJoTfYe8GwhxbXfTowmwR5g5_i3smAhRcAG8g.PNG.lyj1898/%EC%A0%9C%EB%AA%A9_%EC%97%86%EC%9D%8C-1.png?type=w966); 
}

<☆/style>

And It looks like this:

https://imgur.com/a/ah1XhbE

But in the website I'm using, it looks like this:

https://imgur.com/a/6QMBzD6

I've also tried background-repeat but it ain't work in my blog.(worked well in Tryit Editor.)

How can I align the Image properly? it should've looked like the picture one.
I can't help with how the input box was coded since I'm not the one who programmed the website.

Please, help me saving my life & ass.

https://postfiles.pstatic.net/MjAxOTA5MTVfNzkg/MDAxNTY4NTU2MzUyMDgy.zafr2QX1piImxHGJ-J87MKVI9rnYQ8j9KaMo5v2rpbAg.cXcUCJfnJoTfYe8GwhxbXfTowmwR5g5_i3smAhRcAG8g.PNG.lyj1898/%EC%A0%9C%EB%AA%A9_%EC%97%86%EC%9D%8C-1.png?type=w966

This is the original image as you see. thanks.
Does Your Workplace Encourage Open Source?
Tags: discuss, opensource
Published: 2019-09-16 14:43:02

---
title: Does Your Workplace Encourage Open Source?
published: true
description: 
tags: #discuss #opensource
---

I recently attended a conference where [Jason Lengstorf](https://twitter.com/jlengstorf?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) gave a talk called "You Belong Here: How to Make Open Source More Open". Over the course of the talk he labelled the ways the Gatsby team had encouraged OSS, and how to make it more accessible and inclusive to a greater audience of people. I was curious how many people are working for companies/teams that have this same attitude.

Does your workplace encourage you to contribute to open source? If they do, do they give you time during work hours for working on open source projects? Do they have any open source initiatives of their own?
ReactStrap and YOU!
Tags: reactnative, bootstrap
Published: 2019-09-16 14:34:44

React is a great framework for displaying all of your precious code.  It's dynamic and interesting in the way that it communicates through its unique components. But what if you wanted to use Bootstrap, an open source development kit for html, css, and javascript, that makes creating an interesting webpage quickly.  

Introducing ReactStrap!  What it serves to do is simply offer some extra tag names for creating pre-built functionality quickly on the page.  For example, if you wanted a button (<button/>) on your page, instead of going through the process of setting up the full click functionality as well as an on hover event to indicate it being clickable, you can just use <Button/> that sets all of that up for you!  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n5eiqdukf69n2xoiv2hw.png)

It also includes a large variety of options for displaying text, images, and other forms of input, with similar functionality.  The "Card" tag for example will take a variety of information and display it in a nice, orderly fashion.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6embmk8w17l8xzpb2ldy.png)

Organize displayed properties by <Row/> and <Col/>, being rows and columns.  Each row can contain up to twelve columns depending on their size, which you set.  When the combined size of each column reaches more than twelve, it will automatically set the next property underneath the last.  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jgljbmvnu3nfv4knzfei.png)

As a last attempt to sway you to, reactStrap makes forms an after-thought.  Simply create a <Form/> tag with required information and it'll do the rest for you!  This includes a password input that will hide characters upon typing them, an email input that makes sure the input string matches the structure of an email, toggle switches that keep track of votes in a poll for example, and many more.

this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bdqi9zymn2095tufgd8a.png)

renders this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/phpwbpg6aznko7sv9mrx.png)

In conclusion, instead of fumbling with css for hours on the front-end of your website, try out reactStrap!  It's quick and easy to install and learn, it saves a lot of time, and it looks much more professional.
The RGB split effect with css and a bit of javascript
Tags: javascript, css, typography
Published: 2019-09-16 14:19:15

While developing my personal website, I came accross this amazing library, [Blotter.js](https://blotter.js.org/), which exposes several methods (materials) that apply various effect on texts.

[ChannelSplitMaterial](https://blotter.js.org/#/materials/ChannelSplitMaterial) is one of those effects that piqued my interest.

The idea behind this effect is simple, just split up the red, green and blue pixels and place them in different location from the original one. And that's just what we are going to do!

But first, lets see what the final result looks like

{% codepen https://codepen.io/giannisKapa/pen/BaBJywb default-tab=js,result %}

Lets start with the HTML

{% gist https://gist.github.com/kapantzak/d53131d52d8b211c2c5821f30ea735e3 file=index.html %}

The `#wrapper` element just holds the affected element, the `#text` div. The `#text` div holds the text that we are going to apply the RGB effect to.

Now, we need to create a function that takes one argument, the HTML element to be affected. Lets call this function `channelSplit`. `channelSplit` will take the innerHTML of the element passed as the first argument and clone it 3 times, one for each primary color (red, green and blue).

{% gist https://gist.github.com/kapantzak/d53131d52d8b211c2c5821f30ea735e3 file=main.js %}

As you can see, we are placing a `.channel-split-static` span inside the initial element. `.channel-split-static` has zero opacity and its use is to preserve the initial dimentions of the text holder element.

Summarizing the functionality of the `channelSplit` function:
- Takes one argument, the text holder element
- Clones the innerHTML of the text holder and appends 3 `.channel-split` elements, one for each primary color (red, green, blue)
- Places one `.channel-split-static` span with zero opacity

We are now done with Javascript 😁!

Now, all we have to do is to apply some css in order to achieve the desired effect.

In order to stack each of the three `.channel-split` elements one above the other, we set their `position` property value to `absolute`.

Another important change we need to make, is to set `mix-blend-mode: difference` to the `.channel-split` elements in order to blend their colors. If we don't apply this rule, the final result will display the font color of the elemnt stacked on top of all.

Here are the main css rules that help us achieve the rgb split effect

{% gist https://gist.github.com/kapantzak/d53131d52d8b211c2c5821f30ea735e3 file=style.css %}

Finally, we are going to apply some animation in order to separately move each of the `.channel-split` elements away from each other in order to illustrate the effect.

{% gist https://gist.github.com/kapantzak/d53131d52d8b211c2c5821f30ea735e3 file=style2.css %}

And that's it!

Thanks for reading this post and I hope you liked it!
Seeking Toronto based front-end web developer w/ experience building video intensive websites - short-term freelance contract. 
Tags: javascript, sideprojects, career
Published: 2019-09-16 14:15:37

We are developing an interactive documentary experience that focuses on a social justice issue. We will provide you with all video content, wire frame, and images. We require a developer who is able to create a simple, clean, website that will match the aesthetic of the video content that we provide.


The project focuses on the issue of forced adoptions in Canada and outlines the history and legacy in church and state involvement. This project will be used in high schools, university social working programs, and could eventually be developed into a training program for 60,000 social workers across Canada.


Our ideal Candidate will have:

 -  experience developing interactive video projects

 - a strong design sensibility and understanding of visual storytelling

 - knowledge of modern front-end web development (HTML, JS, and CSS), including expertise building solutions with current tools and frameworks

 - a proven ability to deliver web applications that are responsive, accessible, and cross-browser compatible

 - availability to commence work as of October 1st


For visual references, please visit our website at www.mumsthewordthefilm.com and our Facebook page at https://www.facebook.com/mumstheword.themovie/?ref=bookmarks


Please submit all resumes to colinscheyen@hotmail.com
Civic Hacking and YOU
Tags: career, beginners, meetups
Published: 2019-09-16 14:09:32

Here in the United States our [National Day of Civic Hacking on September 21st](https://www.codeforamerica.org/events/national-day-of-civic-hacking-2019) is fast approaching, so in this post I'm going to tell you a little bit about civic hacking and why you should try it out.

## Civic Hacking 101

Civic hacking is just hacktivism aimed at solving government and community related problems. Civic hackers can be anybody, from devs to designers to data scientists to concerned citizens of no particular background. Civic hackers have done some [pretty](https://github.com/codeforamerica/courtbot) [cool](https://github.com/nodeschool/sanfrancisco) [stuff.](https://github.com/codefordc/the-rat-hack)

## Why You Should Be a Civic Hacker

I've been participating in my local civic hacking meetup for some months now and it's a lot of fun. If you might be interested in volunteering some of your time, I can tell you about my experience so far:

* Attracts smart people in your local dev community
* Gets you involved in open source projects with clear goals
* Practice skills you don't normally use
* Opportunities to lead projects
* Sometimes there's pizza

## How YOU Can Be a Civic Hacker

Now that you're completely convinced that civic hacking is a good use of your volunteer hours, here's what you can do:

* Attend a [NDCH](https://www.codeforamerica.org/events/national-day-of-civic-hacking-2019) event and pitch in (if you're in the US)
* Join a local civic hacking organization, or if your area has none you can try to organize your own
* Contribute to open source projects led by civic hackers
* If your company is hiring, I've certainly seen businesses donate workspace for meetups and then send someone to give a recruiting pitch

![thats_all_folks.gif](https://media.giphy.com/media/lD76yTC5zxZPG/giphy.gif)

See you there!
freelancer web developer team
Tags: php, javascript, android, ios
Published: 2019-09-16 14:04:15

Memento technologies is india best leading It Web and mobile app development company.
they have good command in website design usign html5,css,css3,javascript,jquery and more..
Mobile app development is main focus in Memento organization like android app development,ios app development and ionic development.
Many CMS in we are working like wordpress,shopify,magento and more...
www.mementotech.in
Daily Challenge #68 - Grade Book
Tags: challenge
Published: 2019-09-16 13:37:45

---
title: Daily Challenge #68 - Grade Book
published: true
series: Daily Challenge
description: Today's challenge is to write a function that accepts three integer values, calculates the mean, then returns the letter value associated with that grade.
tags: challenge
---

Today's challenge is to write a function that accepts three integer values, calculates the mean, then returns the letter value associated with that grade. If the mean of those three integers ends in a number greater than five, append a plus sign to the letter grade. If it is less than five, append a minus sign. 

<pre>
Numerical Score	     Letter Grade
90 <= score <= 100	  'A'
80 <= score < 90	  'B'
70 <= score < 80	  'C'
60 <= score < 70	  'D'
 0 <= score < 60	  'F'
</pre>

Examples: 
`grade(64, 55, 92)` => `C-` (70.3)
`grade(99, 89, 93)` => `A-` (93.6)
`grade(33, 99, 95)` => `C+` (75.6)

Happy coding!

***
_This [challenge](<https://www.codewars.com/kata/55cbd4ba903825f7970000f5>) was inspired by CodeWars user danleavitt0. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Site Reliability Engineering Book Trio
Tags: sre, devops, books
Published: 2019-12-10 14:06:03

---
title: Site Reliability Engineering Book Trio
published: true
date: 2019-12-10 13:00:00 UTC
tags: sre,devops,books
canonical_url: https://mattorb.com/site-reliability-engineering-book-trio/
---

 ![Site Reliability Engineering Book Trio](https://mattorb.com/content/images/2019/09/timothy-muza-@timothymuza-4F42IqLRjf4-unsplash.jpg) photo credit: [timothy-muza](https://unsplash.com/@timothymuza)

What works for Google, what works for Facebook, and what works for Netflix may not be the right thing for the rest of us.   Putting too much weight behind the opinions of a few large organizations can bite you.  The same is true of charting a path forward based on the experience of a few individuals, without being aware of the broader landscape.  This is why I'm a huge fan of studies that are more broadly based, like [Accelerate](https://www.amazon.com/Accelerate-Software-Performing-Technology-Organizations/dp/1942788339) and the accompanying yearly State of DevOps reports.  Do what works in your context, but stay informed of what is working well for others, to make better and better choices as you go.

One particular area that has been getting more refined is Site Reliabilty Engineering.  There are three great books I read over the last year that provide a peak into some experiences and experiments.

This trio of books is a treasure trove of ideas, techniques, practices, and organizational approaches for improving both the delivery of value to production, and how the teams around that are organized:

1. [Site Reliability Engineering: How Google Runs Production Systems](https://www.amazon.com/Site-Reliability-Engineering-Production-Systems/dp/149192912X), 
2. [The Site Reliability Engineering Workbook: Practical Ways to Implement SRE](https://www.amazon.com/Site-Reliability-Workbook-Practical-Implement/dp/1492029505/)
3. [Seeking SRE: Conversations About Running Production Systems at Scale](https://www.amazon.com/Seeking-SRE-Conversations-Running-Production/dp/1491978864).

SRE is all about applying a software development mindset to infrastructure and operations.

I particularly enjoyed 'Seeking SRE' which is a series of essays.  Each chapter stands on its own, and several are based on years of history and experience reports at well known companies.
TIL: RegExp global flag doesn't return what you'd expect
Tags: javascript
Published: 2019-09-16 13:12:51

```js
const myRegExp = /[0-9]+ [a-z]+ [a-z]+/gi
const myString = '10 Banana Road'

const doesItMatch = myRegExp.test(myString)
// true
const itShouldMatch = myRegExp.test(myString)
// false
```

Wait, what?!? Why is it `true` and then `false`? What's going on here?

The answer isn't as intuitive as I first thought. This is what I found on stackoverflow: https://stackoverflow.com/a/1520853

Essentially the global flag is what's causing the issue. It appears to have some internal state which wasn't something I was aware of. Upon removing the global flag the tests will both return `true`.