teleren/devto huggingface dataset:
Regular Expressions Notes(2)
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-02 16:27:39

#### Match Characters that Occur Zero or More Times
* The last challenge used the plus `+` sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times.
* The character to do this is the asterisk or star: *.
* For this post, `chewieQuote` has been initialized as the string `Aaaaaaaaaaaaaaaarrrgh!` Let's Create a regex `chewieRegex` that uses the `*` character to match an uppercase `A` character immediately followed by zero or more lowercase `a` characters in `chewieQuote`. Your regex does not need flags or character classes, and it should not match any of the other quotes.
```
let chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!";
let chewieRegex = /Aa*/;
let result = chewieQuote.match(chewieRegex);

console.log(result); will display [ 'Aaaaaaaaaaaaaaaa' ]
```


#### Find Characters with Lazy Matching
* In regular expressions, a *greedy* match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a lazy match, which finds the smallest possible part of the string that satisfies the regex pattern.
* You can apply the regex `/t[a-z]*i/` to the string `"titanic"`. This regex is basically a pattern that starts with `t`, ends with `i`, and has some letters in between.
* Regular expressions are by default greedy, so the match would return `["titani"]`. It finds the largest sub-string possible to fit the pattern.
* However, you can use the `?` character to change it to lazy matching. `"titanic"` matched against the adjusted regex of `/t[a-z]*?i/` returns `["ti"]`.

* Let's Fix the regex `/<.*>/` to return the HTML tag `<h1>` and not the text `"<h1>Winter is coming</h1>"`. 
* Remember the wildcard `.` in a regular expression matches any character.
```
let text = "<h1>Winter is coming</h1>";
let myRegex = /<.*>/; // Change this line
let result = text.match(myRegex);
```
* Answer:
```
let text = "<h1>Winter is coming</h1>";
let myRegex = /<.*?>/; 
let result = text.match(myRegex);

console.log(result); will display [ "<h1>" ]
```
Have you experimented with CSS container queries?
Tags: discuss, css, webdev
Published: 2021-05-02 16:26:55

CSS container queries have landed as an experiment in Chrome Canary! You can enable them under `chrome://flags`.

**Have you had a chance to experiment with them yet**? How do you feel about them being available in CSS?

![demo of using container queries within a flexbox grid layout, using color and CSS content to note when flex children are rendered as small, medium, or large container sizes.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cyo7o480u92lqe4ed6b.gif)

Resources if you're just hearing about them now:
- Miriam Suzanne is the proposal author, and you should [start with her explainer](https://css.oddbird.net/rwd/query/explainer/)
- Check out her [CodePen collection of demos](https://codepen.io/collection/XQrgJo)
- You might like highlights from [my Twitch stream of exploring them](https://www.twitch.tv/collections/8k9OzUpxdxb9VA) for the first and second time
- [A quick start guide](https://www.oddbird.net/2021/04/05/containerqueries/) from David A. Herron
- Ahmad Shadeed's excellent [overview with practical examples](https://ishadeed.com/article/say-hello-to-css-container-queries/)
- And links to more within Stu Robson's repo [Awesome-Container-Queries](https://github.com/sturobson/Awesome-Container-Queries)
Go analog to get things done 📝
Tags: productivity, programming
Published: 2021-05-02 16:17:27

As programmers, our first instinct is often to use the nearest piece of technology.

While digital tools allow us to do incredibly things, they can also be incredibly distracting.

However, going analog can be a great boost of productivity.


## 1. Use analog alarm clock ⏰

Imagine this:
You turn off the alarm, and reflexively open Twitter on your phone.

You spend the next 30 minutes scrolling. When you finally get up, you feel unfocused.

Familiar?

Get an old school alarm clock. No more morning scrolling.


## 2. Use an hourglass ⏳

Timers help us focus. However, with digital timers, it's easy to forget them. They disappear from sight way too easily.

If you put a physical hourglass on your desk, it won't go anywhere. Seeing the literal sand shift will remind you that time is ticking.


## 3. Use pen & paper 📝

This tip is simple and widely applicable.

Want to figure out a problem? Write it down.
Want to start working on an app design? Sketch it out.
Want to design a new architecture for your codebase? Leave your laptop and phone in another room, grab a physical notebook.

When you need to think, modern technology often doesn't help.

---

*Originally published as [a short thread on Twitter](https://twitter.com/deprocrastinate/status/1386375020889399297).*
An Intro to Kubernetes webinar
Tags: kubernetes, virtualisation, devops, containers
Published: 2021-05-02 16:04:39

I did a webinar last week to help virtualisation admins/ PlatformOps peeps etc with the basic building blocks of how we have gone from physical > virtual > cloud options > containers. Then some of the Kubernetes basic building blocks 

https://www.veeam.com/videos/webinar-introduction-to-kubernetes.html?rwty
“What is This?! Icons for Ants?”
How to Resize Icons
Tags: icons, resize, formatting
Published: 2021-05-02 15:53:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwabsq97mu7dezjn1dbm.jpg)
When I was building my portfolio site, I wanted to include icons of the programming languages I use, like HTML5, CSS3, C#, JavaScript, etc.  But I didn’t want to just list them, I wanted more pizzazz.  I found some really nice (free to use) development language icons on https://devicon.dev and downloaded the master folder and copy/pasted the necessary files into my project folder. I followed the instructions on what ref links to add to my index.html file and the icon name specific link and voila! I had icons...tiny...tiny icons.  I tried several ways to try and make them bigger, but all I managed to do is instead of a row, I turned them into a column... a very tiny column.  Needless to say I was frustrated, I just wanted pretty icons that people could actually view with their naked eye.

Google is my best friend and should be yours too.  I found out that my website template’s CSS style-sheet already had a generic icon size and all I needed to do was override the size in my icon line on my Index file. I was able to tell it to make the specific icon what ever size I wanted, so naturally, I set mine to 18px.  And then I had big, beautiful, and VISIBLE icons!

I would have saved so much time and frustration (and eye strain) if I had turned to Google sooner, after all, there is no shame in making a few attempts and then turning to the experts, or at least others who experienced the same frustration and were nice enough to put their solution on the internet for others, just like I’m doing right...now.  Go forth and make big, beautiful icons, or medium, or maybe your icon was too big, now you can make it smaller.
🎨 Front-end v/s Back-end ⚡️
Tags: discuss, todayilearned, programming, weeklylearning
Published: 2021-05-02 15:49:45

Hello everyone, are you amongst the ones who really get confused while listening to this term. No worries today I am going to explain this to you super quickly using a story. After the end of this blog you will understand the following : 
1. Front-end
2. Api's
3. Server (Back-end)
4. Database (Back-end)

## :pushpin: Storytime!

Okay! so take a daily life example of you being hungry and there's no food at home (Or you are super bored to cook one yourself). So you get your phone give an order to the delivery boy (of any food delivery application). That boy delivery boy goes to the hotel asks the manager for your order. The kitchen prepares your order and hands it over to the manager. Then the manager does the billing tasks and hands it over to the delivery boy. Then the delivery boy delivers it to you and you enjoy your food. :smiley:

### Now how is this story relevant to Front-end and Back-end?

Replace the entities of this story with the techs.

You -> Front-end
Delivery boy -> API
Hotel - Backend (Manager -> server , Kitchen -> Database)

Front-end gives a call to API. Then API asks the server for the required data is received from the call. The server processes the information and fetches the data from the database. Then server returns the data to the API call. Then the frontend fetches the data from the API.

Hopefully, you have got a clear picture of how this thing actually works.

*If I have explained anything wrong, please do let me know in the comments below. I am still learning and would love to improve my knowledge :smile:*

## ❤️ Thank you for reading ❤️
**🌏 Like | Follow | Share 🌏**
React Note Application – React props and state exampler
Tags: react
Published: 2021-05-02 15:43:58

https://grokonez.com/frontend/react/react-note-application-react-example-with-react-props-state-example

React Note Application – React props and state example

In this tutorial, we're gonna create a simple React Note Application that uses both React <strong>props</strong> and <strong>state</strong>.

Related Posts:
- <a href="https://grokonez.com/frontend/react-components-example">React Components example</a>
- <a href="https://grokonez.com/frontend/react-component-props-example">React Component Props example</a>
- <a href="https://grokonez.com/frontend/react-state-example">React State example</a>

You can try this application with <a href="https://grokonez.com/frontend/react-stateless-functional-components-example">React Stateless Functional Components example</a>.

<!--more-->
<h2>I. Project Overview</h2>
<h3>1. Goal</h3>
We will build a React Note Application that can add, remove Note using React <strong>props</strong> and <strong>state</strong>, UI will be updated immediately:

<img src="https://grokonez.com/wp-content/uploads/2018/03/react-note-app-goal.png" alt="react-note-app-goal" width="369" height="327" class="alignnone size-full wp-image-11398" />
<h3>2. How it works</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/react-note-app-overview.png" alt="react-note-app-overview" width="700" height="395" class="alignnone size-full wp-image-11399" />

<strong><em>NoteApp</em></strong> component:
- <code>jsaNotes[]</code> array as <strong>state</strong>
- <code>appRemoveAll</code>, <code>appAddNote</code>, <code>appDeleteNote</code> as <strong>props</strong>

<strong><em>Notes</em></strong> component:
- receive <code>jsaNotes[]</code> as <code>notes</code> props, then pass each <code>note</code> to <strong><em>Note</em></strong> component
- receive <code>appDeleteNote</code> as <code>deleteNote</code> props, then pass it to <strong><em>Note</em></strong> component

<strong><em>Note</em></strong> component:
- receive <code>note</code> props, display it
- receive <code>deleteNote</code>, then use it in <code>deleteData</code> event method

<strong><em>Action</em></strong> component:
- receive <code>appRemoveAll</code> as <code>removeAll</code> props, and call it directly
- receive <code>appAddNote</code> as <code>addNote</code> props, then use it in <code>addData</code> event method
<h3>3. Code overview</h3>

More at:

https://grokonez.com/frontend/react/react-note-application-react-example-with-react-props-state-example

React Note Application – React props and state example
The Perfect Web Crawling Stack
Published: 2021-05-02 15:38:44

Here is a freewheeling fantasy list of things I would have in the perfect web crawling/web scraping stack.

1. I would use Scrapy to write spiders.

2. Amazon t3.xlarge EC2 servers running on 4 cores with 16 GB RAM on their High-Speed data network.

3. Maxed out concurrency for each spider considering I will be using a Rotating Proxy Network like Proxies API.

4. Use Scrapy’s Signals module to capture and record the status of each spider into a MySQL database.

5. A simple PHP interface to Query the records and also start, pause, and Cancel Spiders.

6. Scrapyd to run multiple spiders at a time.

7. CSS Selectors to scrape the data.

8. Data exported to JSON and stored on Amazon S3 using Scrapy’s inbuilt support for both.

The author is the founder of Proxies API the rotating proxies service.
SPACE INVADERS GAME
Tags: python, pygame, spaceinvaders
Published: 2021-05-02 15:38:06

**Hello Dev's**
Finally Completed the SPACE INVADERS Game ...
Download the game from this link: https://arwazkhan189.github.io/SPACE-INVADERS/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bbo3rajqyhl1tbhh6d2.png)

Please give your feedback to improve the game.
How to update wsl clock on Ubuntu 18 wsl2
Tags: wsl
Published: 2021-05-02 15:37:51

<sub>Photo by <a href="https://unsplash.com/@thomasbormans">Thomas Bormans</a> on <a href="https://unsplash.com/s/photos/clock">Unsplash</a>
  </sub>

Due to daylight time change, my WSL2 Ubuntu was not in sync with time, and got denied to connect to my k8s cluster.

[First answer](https://askubuntu.com/questions/81293/what-is-the-command-to-update-time-and-date-from-internet), was to install ntpdate and use but it seems, using [hwclock](https://serverfault.com/questions/496076/how-to-set-hwclock-to-utc) was better.

It has caused to get my Docker daemon, not in sync anymore, so i had to disable integration, to enable it later.

WSL2 team announced [they have fixed the clock sync issue](https://devblogs.microsoft.com/commandline/servicing-the-windows-subsystem-for-linux-wsl-2-linux-kernel/#bug-fix-clock-sync).

Hope this helps
Convincing Others of System / Code Changes: Quick Outline
Tags: communication
Published: 2021-05-02 15:36:24

Here's a quick 7-Step Outline you can use to create a presentation or document when you need convince Stakeholders that a Code or System change should be implemented.

1. **Describe the current state** (of system or code) and what is missing.   
  * The audience needs to know why you are asking for the change.
  * Make sure your **Problem Statement** is clear.  This is an often ignored item that confuses the audience.
2. **Summarize the desired state** and why it is important.  
  * Again, the audience needs to know what advantages which will arise from implementing the change.
3. **Provide steps** to get to desired state. 
  * This will allow your audience to get an idea of the scope of the project (and help them understand if it will takes hours, days or years to implement the change).
4. **Why you (or your group) are the right team** to get to the desired state.  
  * How much history you have with your audience will determine how much info you need to provide to convince them that you are the right person or team to do the work.
5. **List Challenges** to achieving the desired state.
   * Provide a list of items that could hinder the team (or cause the project to fail)
6. **Provide feasibility** of achieving desired state.
  * Provide monetary and time estimates and list of resources needed so audience can determine how likely it is that everything can be pulled together to achieve the desired state.
7. **Provide a convincing call** for others to drive towards the desired state.
   * After you've put everything forward, make strong request that the project begin so the problem can be solved.

If you apply this outline as you attempt to create your documentation or presentation, it will help you create a fast / short document which will provide the necessary details so a good dialogue about the project can begin.
React Simple Data Binding example
Tags: react, binding
Published: 2021-05-02 15:33:45

https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example

React Simple Data Binding example

In previous <a href="https://grokonez.com/frontend/react-helloworld-example">post</a>, we created a simple <a href="https://grokonez.com/frontend/react-helloworld-example">React Hello World</a> Application. This tutorial shows way to implement simple data binding with React.

<!--more-->
<h2>I. Technologies</h2>
- React 16
- NodeJs 6.11.2
- NPM 3.10.10
- Yarn 1.5.1
- Babel 6.24.1
<h2>II. Practice</h2>
<h3>1. Goal</h3>
We will build a React Application that can receive click event to add/minus value to a variable, then update variable in UI immediately:

<img src="https://grokonez.com/wp-content/uploads/2018/03/react-bind-data-example-result.png" alt="react-bind-data-example-result" width="264" height="440" class="alignnone size-full wp-image-11320" />
<h3>2. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/react-example-project-structure.png" alt="react-example-project-structure" width="189" height="215" class="alignnone size-full wp-image-11329" />
<h3>3. Step by Step</h3>
<h4>3.0 Set up Environment</h4>
We need NodeJs, Yarn and Babel to compile and run this example.
Please visit <a href="https://grokonez.com/frontend/react/react-helloworld-example#I_Set_up_Environment">Set up Environment</a> for step by step.
<h4>3.1 Set up Project folder</h4>
Create folder for <strong>BindData</strong> project, then make subfolders and subfiles like this:
<img src="https://grokonez.com/wp-content/uploads/2018/03/react-example-create-folder.png" alt="react-example-create-folder" width="171" height="150" class="alignnone size-full wp-image-11319" />
<h4>3.2 Dependency</h4>
Open <strong>package.json</strong>, write these lines for project information and dependency:
<pre><code class="language-json">
{
  "name": "bind-data",
  "version": "1.0.0",
  "main": "index.js",
  "author": "JavaSampleApproach",
  "license": "MIT",
  "dependencies": {
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1"
  }
}</code></pre>
<h4>3.3 index.html</h4>
This is the default HTML file that appears in the browser when we invokes our application.
We also use this HTML file to embed React files and reference to our javascript <strong>app.js</strong>.

More at:

https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example

React Simple Data Binding example
React Stateless Functional Components example
Tags: react, stateless, functional
Published: 2021-05-02 15:27:44

https://grokonez.com/frontend/react/react-stateless-functional-components-example

React Stateless Functional Components example

We have known how to define a React Component in the post <a href="https://grokonez.com/frontend/react-components-example">React Components example</a>. There is a simpler way to do this which is called stateless functional components. Remember that we can only use this method for components that <strong>don't</strong> have state.

Related Posts:
- <a href="https://grokonez.com/frontend/react-component-props-example">React Component Props example</a>
- <a href="https://grokonez.com/frontend/react-state-example">React State example</a>
- <a href="https://grokonez.com/frontend/react-note-application-react-example-with-react-props-state-example">React Note Application – React props and state example</a>

<!--more-->
<h2>I. How to</h2>
With component that we created from the class:
<pre><code class="language-java">class MyComponent extends React.Component {
    render() {
        return (
            &lt;div&gt;
                &lt;h2&gt;{this.props.abc}&lt;/h2&gt;
                &lt;h4&gt;{this.props.xyz}&lt;/h4&gt;
            &lt;/div&gt;
        );
    }
}</code></pre>
We can define it in another way (stateless functional component way):
<pre><code class="language-java">const Header = (props) =&gt; {
    return (
        &lt;div&gt;
            &lt;h2&gt;{props.abc}&lt;/h2&gt;
            &lt;h4&gt;{props.xyz}&lt;/h4&gt;
        &lt;/div&gt;
    );
};</code></pre>
We can see that the stateless component is just a function. There is no <code>this</code> keyword.
<h2>II. Practice</h2>
<h3>1. Overview</h3>
We will build a React Note Application like the post: <a href="https://grokonez.com/frontend/react-note-application-react-example-with-react-props-state-example">React Note Application – React props and state example</a> using Stateless Functional Components wherever we can:

<img src="https://grokonez.com/wp-content/uploads/2018/03/react-note-app-goal.png" alt="react-note-app-goal" width="369" height="327" class="alignnone size-full wp-image-11398" />

More at:
https://grokonez.com/frontend/react/react-stateless-functional-components-example

React Stateless Functional Components example
Taskforce a life-changing boot camp
Tags: beginners, choosetochallenge
Published: 2021-05-02 15:17:49

It only takes two months of determined work with a right guide to master two new __programming languages__ and land __a job overseas__. Yeah that's the __task-force__ fellas with __Code Of Africa__ and __Awesomity Lab.__

You all have been trying to land jobs or gain investors but you keep failing because you lack either experience or communication skills, believe in the __task-force__ you will gain both at zero cost.

Joining the task-force I had a few skills both technically and professionally, during the bootcamp I gained __a tremendous__ amount of skills, I just studied __java__ and __typescript__ from zero to mastery and built a number of secure APIs using both languages following all the best practices needed out there on the market. 

We all know team communication is a key to success.__Code Of Africa__  helped me with that, teaching me how to __communicate__ using different platform(email, slack, wonder.me, miro...), __working in teams__ to build solutions and __self management__ leading to productivity. All these skills helped me out to land __a job in Italy.__

While working with Code Of Africa and Awesomity Lab you feel like you are in __a family__ and this is the thing I appreciated the most.

The boot camp for me was a stone that killed two birds at a time. I really appreciate __*Code Of Africa*__ and __*Awesomity Lab*__, I wish you all the best and thank you for the opportunity and experience.
Java 9 TIFF Image I/O plugins
Tags: java, java9, image, tiff
Published: 2021-04-28 15:01:54

Java 9 TIFF Image I/O plugins

https://grokonez.com/java/java-9/java-9-tiff-image-io-plugins

In earlier version of Java, Image I/O Framework <code>javax.imageio</code> provides a standard way to plug-in image codecs for some formats such as <strong>PNG</strong> and <strong>JPEG</strong>. But <strong>TIFF</strong> is still missing from this set. It was packaged in <code>com.sun.media.imageio.plugins.tiff</code> before. Java 9 <strong>TIFF Image I/O plugins</strong> has a new package called <code>javax.imageio.plugins.tiff</code> which is renamed from <code>com.sun.media.imageio.plugins.tiff</code>.

In this article, we're gonna take a look at that package and test a simple example.

<!--more-->
<h2>I. javax.imageio.plugins.tiff</h2>
The package contains some classes that support the built-in TIFF reader and writer plug-ins. It includes:
- Some classes representing common additional tags and the set of tags found in baseline TIFF specification, Exif IFD, TIFF-F (RFC 2036) file, GeoTIFF IFD.
- <code>TIFFImageReadParam</code>: an extension of <code>ImageReadParam</code> which can specify which metadata tags are allowed to be read and set some destination properties.

For more details, please visit:
- <a href="http://download.java.net/java/jdk9/docs/api/javax/imageio/plugins/tiff/package-summary.html" target="_blank" rel="nofollow">javax.imageio.plugins.tiff - Package Summary</a>
- <a href="http://download.java.net/java/jdk9/docs/api/javax/imageio/metadata/doc-files/tiff_metadata.html" target="_blank" rel="nofollow">TIFF Metadata Format Specification and Usage Notes</a>.
<h2>II. Example</h2>
In the example, we will read an input stream of TIFF image, set its metadata tags and destination offset. Then we write data after processing to another TIFF image as result.

This is source code:


More at:

Java 9 TIFF Image I/O plugins

https://grokonez.com/java/java-9/java-9-tiff-image-io-plugins