teleren/devto huggingface dataset:
Validate mail address format the easy way
Tags: dotnet, csharp
Published: 2019-11-26 12:21:25

(First published on [What the # do I know?](https://zoharpeled.wordpress.com/2019/11/26/validate-mail-address-format-the-easy-way/))

We’ve seen it numerous times: Using a regular expression to validate a mail address.
Heck, you’re probably doing it yourself.

You might also recall that as a beginner, you wrote a method that use a couple of `IndexOf` methods on a string to make sure it has the at sign (`@`) and a dot (`.`) after it.

Well, with the .Net Framework, that long, unreadable, unmaintainable regular expression can be (and should be) thrown away, never to be used again.

So, how do you validate the format of an email address without a regular expression or looping over your input string? Simple – you use the tools the framework gives you and you try to create an instance of the [`MailAddress`](https://docs.microsoft.com/en-us/dotnet/api/system.net.mail.mailaddress?view=netframework-4.8) class from it.

One of the constructors of this class takes in a single string that is the address to use. This constructor will throw a [`FormatException`](https://docs.microsoft.com/en-us/dotnet/api/system.formatexception?view=netframework-4.8) if the string is not a valid mail address format – so all you have to do in order to validate an email address is this:

```csharp
public bool IsEmailAddressWellFormatted(string address)
{
    try
    {
        var address = new MailAddress(address);
        return true;
    }
    catch (FormatException ex)
    {
        return false;
    }
}
```

And that's it! 
Now you have a mail address format validation that's readable, maintainable, and can easily be transformed to an extension method to string, if you want.
rsync with multiple files pattern
Published: 2019-11-26 12:19:54

Hi,

Sorry, but I am a complete begginner and trying to find in web some solution to my problem.
I would like to find the way to use ssh rsync option having possibility to include only files matching given patterns.
In the following example I am trying to sync only files matching 2 patterns: "*tab*.*" and "*ini*.*".
Unfortunately it grabs only the last pattern and as a result I get only files matching "*ini*.*" pattern.
Is there any way to grab files matching both patterns ?

$ find /test/inc/ -name "*tab*.*" -o -name "*ini*.*" -printf "%P\n" | rsync -a --files-from=- /test/inc/ /test/inc2/
How do you display your code nicely (for example to present a snippet)? 
Tags: discuss, design, productivity
Published: 2019-11-26 12:15:18

Sometimes short snippets or a few important lines of code have to be presented nicely. Whether it's on a web page that doesn't actually have a function for displaying and highlighting code, or in a presentation for the next meeting. And maybe it is sometimes more important to display the code in a nice visual way, because the target group might not be able to appreciate the code itself that much.

What tools do you use for this? Do you just take a screenshot of your editor? Do you have a workflow in ~~Photoshop~~ an image editing program, to manually prepare the code? Or do you use (online) tools developed especially for this purpose?

**Let me know in the comments 😃✍️**
As a Team, How Do You Share Your Knowledge?
Tags: discuss
Published: 2019-11-26 11:37:49

---
title: As a Team, How Do You Share Your Knowledge?
published: true
description: What knowledge database do you recommend?
tags:
- discuss
---

Each engineer knowledge is endlessly valuable, and I'm searching for a way to make all those hours spent on problems profitable by disseminating them amongs a growing team of ~15 software engineers.

We already have countless ways to do so:
- internal brown-bag lunches (BBL)
- a lot of [blog posts](https://marmelab.com/blog/)
- regular hackdays with a demo to the team at the end
- local meetups, etc

But we needs to formalize this knowledge into a base that is easily searchable, discoverable, and easy to feed.

We've heard of Stack Overflow for Teams, also considering to open a Notion.

What do you recommend?
How I demonstrated Growth Mindset recently
Published: 2019-11-26 11:35:31

_"It's Not How Good You Are, It's How Good You Want to Be"_
From Carol Dweck, a professor of Psychology at Stanford University.she defined that a growth mindset is like a tendency to believe that you can grow.

Prior to applying to Andela.I didn't have any practical knowledge on software development.I was passionate about the field but i always felt the need of something that could push me to follow the career path i always dreamed of.

I had passion but i was doing nothing about it.one of my friends told me that there is a tech company called Andela that is hiring talented aspiring software developers and i started applying.i walked through all the learning materials i was given and mastered almost the whole content which did not only help me go through with coding challenges as part of the application process but also improved my technical skills on software development.

I did not just stop there,i started going to developers community events like devfest organised by the google community   in which i was able to meet with many developers in the industry.this changed my perspective on software developers and showed me that they are not just coders but also good communicators and collaborators and some of them leaders which makes a good modern software developer.

for the past few months i went from having basic knowledge on software development to having a a grasp on full stack software development i hope to improve day by day.

A growth mindset is what allowed me to progress through Andela's application phases and now i'm at the bootcamp level and i hope to tackle every challenge given and make it. 

With a growth mindset there are no limits to what you can do regardless of your current skill level as long as you believe you can do better  and put in hard work and dedication.
Implement Google Maps For Android
Tags: ionic4
Published: 2019-11-26 11:22:52

---
title: Implement Google Maps For Android
published: true
description: Google map integration with ionic 4 android app. this guide included google api key setup. it easy to configure google map with google api key.

link : https://android.tutorials24x7.com/blog/implement-google-maps-for-android

tags: ionic 4 
---
Growing everyday episode-1(2019-11-26)
Tags: growing, automation, ui, python
Published: 2019-11-26 11:22:09

---
title: Growing everyday episode-1(2019-11-26)
published: true
description: 
tags: #growing #automation #ui #python
---
Dear folks,
Today suddenly I think I should write down what did I learnt everyday when going to work in automation for specific or coding in general.

This post tends to be in short. Hope it will not spam you or anything.

So today I had to write UI test for new tab page of CocCoc. You can refer to this : [coccoc-newtab](http://coccoc.com/webhp)


1.Find element by css_selector:
This should be an old thing. But today I learn how to find an element by css_selector which does not contains certain class name.
For example like below:

```javascript
ZEN_NEWS_ITEM_CSS_SELECTOR = 'div[class] > a:not(.qc-link)[href]:not(.context-content)'
```

for find element like:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7k45psfqzw9xfzwk1zwp.PNG)

2.String literals in python over 3.6:

For someone using Python, you can use string literals when dealing with strings like this

```javascript
utm_type = 'utm_source'

string_literal_example = f'this is string literal: {utm_type}'
```

3.Regex:

For example, assert certain text in the given text: 

```javascript
    for utm_type in ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term']:
        assert re.search(rf'\b(\w*{utm_type}=\w*)\b(?!\s*$).+', current_url) is not None
```
(text contains utm_type which is variable, and follow by some character)

4.Click on element using javascript:
Sometimes, when click using selenium, you got the selenium intercepted exception.
In that case, you could use javascript click in selenium.

```javascript
    def click_on_any_zen_element(self, driver):
        driver.execute_script('arguments[0].click();', self.new_tab_zen_elem.find_any_zen_element(driver))
```

The self.new_tab_zen_elem.find_any_zen_element(driver) is element type:

```javascript
    def find_any_zen_element(self, driver):
        return self.wait_for_element(driver).until(ec.presence_of_element_located(NewTabZenLocators.ZEN_NEWS_ITEM))
```

5.Scroll down page using javascript in selenium:

Sometimes, move to element function in native selenium does not work.
So you might need to use javascript:

```javascript
    def scroll_to_with_scroll_height(self, driver):
        driver.execute_script('window.scrollTo(0, document.body.scrollHeight);')
```
That's it.
Hope it helps.
Peace!!!
Display Shopify Collections in your Gatsby Ecommerce Site
Tags: gatsby, shopify, react, collections
Published: 2019-11-26 11:20:33

GatsbyJS is used for JAMstack websites. You can create blogs and in this case, you can create ecommerce sites along with Shopify API. 

You need to go through this to setup your Shopify account:
[Ecommerce site with Gatsby and Shopify](https://www.gatsbyjs.org/docs/building-an-ecommerce-site-with-shopify/)

I'm assuming that you have configured your `gatsby-config.js` for the `gatsby-source-shopify` plugin

Collections are equivalent to categories in Shopify. If you have followed the tutorial in the link I gave above, you will be able to list all products. What about displaying Collections?

So in your `gatsby-node.js`

```javascript
const collections = await graphql(`
    query {
      allShopifyCollection (sort: { fields: [title] }) {
        edges {
          node {
            id
            title
            handle
            products {
              title
              images {
                originalSrc
              }
              shopifyId
              handle
              description
              availableForSale
              priceRange {
                maxVariantPrice {
                  amount
                }
                minVariantPrice {
                  amount
                }
              }
            }
          }
        }
      }
    }
  `)

  collections.data.allShopifyCollection.edges.forEach(({ node }) => {
    createPage({
      path: `/collection/${node.handle}`,
      component: path.resolve(`./src/components/Collection.js`),
      context: {
        collection: node,
        productCount: node.products.length
      },
    })
})  
```

We are going to create pages like `/collection/men` for Men collections. 

```javascript
context: {
        collection: node,
        productCount: node.products.length
      },
```

Here we are passing node from graphql as `collection` variable and `productCount` from counting the products by `node.products.length`.

Now create your Collection component, could be `Collection.js`

```javascript
const Collection = ({ pageContext }) => {
  const { collection, productCount } = pageContext


  ....


  return (
    { collection.products.map((product) => (
      <div key={product.shopifyId} className="col-md-4">
        <div className="card card-product-grid">
          <div className="img-wrap">
            <img src={product.images[0].originalSrc} alt={product.handle} />
          </div>
          <a href="#" className="title">{product.title}</a>
          <div className="price-wrap mt-2">
            <span className="price">${product.priceRange.minVariantPrice.amount}</span>
          </div>
        </div>
      </div>
    ))}
  )
```

Now you can access this collection if you have a link to it, like this: 

```javascript
{
   allShopifyCollection.edges.map((d, i) => 
        <DropdownItem key={i}>
            <Link to={`/collection/${d.node.handle}`} className="nav-link">{d.node.title}</Link>
        </DropdownItem>
    )
}

```

Hope it's helpful!

Cheers,

FM
Simple React light-box
Tags: react, javascript, github, webdev
Published: 2019-11-26 11:19:32

### Github
Check the project on Github to read the full documentation
{% github https://github.com/michelecocuccio/simple-react-lightbox %}

### A brief introduction 🧐
It all started when I was working on one of my project using React. The client had a blog page and he wanted to add a light-box to the images in the blog posts. The problem is that the data was fetched from the backend and I had no control over the content of each post (the content was in a WYSIWYG editor).

I checked online for some light-box for React but the way that they were working was that I had to declare the images beforehand in either an array, an object etc...but what if you don't know about the content and you just want to add a light-box to the images? 😞

### My Idea 💡
**Simple React Lightbox** gives you the ability to add a light-box functionality on a set of images, whether you define them yourself or you get them from an external source (API, backend etc…). Just use the provided component to wrap your app, define your options and then use the "SRLWrapper" component by wrapping it around the content in which you have or expect your images 😮! It takes less than 1 minute to implement it.

**Each light-box is individually configurable** both in terms of styles and options. That means that you can easily adapt the style of the light-box to your project.

### Packed with features 📦
**Simple React Lightbox** comes with many features: please check the [options](https://github.com/michelecocuccio/simple-react-lightbox#options) section to see the full list of options. Some features are:
- PanZoom: allows to zoom on an image and drag it to see all the hidden details!
- Autoplay: allows to automatically go to the next image after a set amount of time (which can be configured)
- Image validation: excludes broken images so that they will be ignored by the light-box (if you click on a broken images the light-box won't open)
- Fully customisable: buttons, caption and background colour can be fully customised
- Naturally responsive: Simple React light-box is responsive and supports touch controls. I have also provided clear class names for each part of the light-box in case you need more granular control.

![Simple React Lightbox - Features](https://thepracticaldev.s3.amazonaws.com/i/d5ub389jdcjierjqtrln.jpeg)
<br/>

### Demo
I have provided a working demo on CodeSandbox where you can also play with the options and see the light-box in action. This is the same as running the demo locally.

[![Edit Simple-React-Lightbox§](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/simple-react-lightboxss-39wrb?fontsize=10)

### Images
![Default light-box without options](https://thepracticaldev.s3.amazonaws.com/i/2xzehu54wyd7ijm79d4b.jpeg)


![light-box with custom options](https://thepracticaldev.s3.amazonaws.com/i/mgb6qa8o6lrs9340icik.png)


![light-box with custom options](https://thepracticaldev.s3.amazonaws.com/i/c96wyh7kmnw1lm0gp2xo.png)
React-native
Published: 2019-11-26 11:12:57

3 Bootcamps onde desenvolvi três aplicativos em react native.


1 - Spotify - https://lnkd.in/dRNT8Vm


2 - Airbnb - https://lnkd.in/d_Ze89H


3 - Gobarber - https://lnkd.in/dXGMAe2


Rocketseat Bootcamp


Facebook for Developers


#react #app #front #back
Black Friday 50% off sale for Bootstrap 4 Themes @ Themesberg
Tags: webdev, bootstrap, themes, blackfriday
Published: 2019-11-26 11:11:34

Black Friday has arrived at Themesberg! For the next 10 days (until the 5th of December) you can get all products with a one-time 50% off discount!

Let us present you some of our best selling products:

### 1. [Pixel Pro UI Kit](https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit)

![Pixel Pro Bootstrap 4 UI Kit](https://thepracticaldev.s3.amazonaws.com/i/6zhdj4pt1dgq2ohso85a.jpg)

Pixel Pro is one of the most complete, clean and beautiful Bootstrap 4 UI Kits out there. Get started on working on awesome websites with more than 1000 components, 50 sections and 25+ uniquely crafted pages by the best. The product is already at version 2 and we plan on giving it consistent updates in the future. Check out the file structure and technologies in the product page.

### 2.[Spaces - Coworking Office Bootstrap 4 Theme](https://themesberg.com/product/web-templates/spaces-coworking-listings-template)

![Spaces Preview](https://thepracticaldev.s3.amazonaws.com/i/tgtiz4l3ed31lhverp89.jpg)

Spaces is one of the most advanced Co-working Listing Web Templates we ever created. It is built on the popular Bootstrap 4 CSS Framework and includes beautiful and practical pages to best showcase co-working spaces for awesome workers.

Spaces comes with 13 advanced pages with a focus on providing high quality content in the field of co-working spaces across the world. Not only that, but this product also comes with a vast collection of custom UI Elements including buttons, alerts, navigation bars, pricing cards, profile cards and many more. All of these components are thoroughly documented and have examples provided for their usage.

### 3. [Leaf - Non profit environmental Bootstrap 4 Theme](https://themesberg.com/product/web-templates/leaf-non-profit-enviromental-bootstrap-4-theme)

![Leaf Preview](https://thepracticaldev.s3.amazonaws.com/i/41uqm2tkh0z38cpdlobi.jpg)

We created Leaf to provide non profit organisations a platform through which they can efficiently send their message to the world. It's clean and it is the best non profit environmental theme ever created. We put a lot of focus on the scientifical data about climate change. It is based on the most popular CSS framework called Bootstrap 4 and comes with the most advanced web developer toolkit, namely Sass, Gulp & Npm.

The pages from Leaf are logically constructed to provide both scientifical data but also to offer a way to reach out to donors and let the visitors know about the updates and news the organisation may have. Leaf comes with 15 unique and fully featured pages including a donation page, updates page, "our mission" page and the other specialty pages.

PS: for registered users we will give a one time deal during the campaign. So create an account [here](https://themesberg.com/register)!

Brought to you by [Themesberg.com](https://themesberg.com).

All the best,
Zoli, CEO @ Themesberg
Vue Bootstrap Forms to play with 
Tags: vue, webdev, javascript
Published: 2019-11-26 11:08:27

Vue Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.


https://vue.mdbootstrap.com/#/forms/forms
Postput - Your private Saas to Upload, Download and perform operations on your images
Tags: docker, microservices, kubernetes, typescript
Published: 2019-11-26 10:31:25


Github Link: https://github.com/postput/postput




I'm currently working on a project that would allow any developer to upload, download and perform on-the-fly operations on any kind of files. The aim is to make it the de facto standard for developpers to handle their user-generated files. You can see it like a cloudinary, imgix or imagekit Saas that you can launch freely on your own infrastructure.





Supported storage providers:


Amazon S3

Google Cloud Storage

Spaces - DigitalOcean

Openstack

Azure

Backblaze

Scaleway

In-memory

Filesystem

Webfolder

Proxy

All S3 compliant storages








Operations supported:


Resize Image

Rotate image

Blur image

Mask image

Format image

Postput






Your feedback would be gladly appreciated!
What Is The Difference Between JavaScript REST and Spread
Tags: javascript
Published: 2020-02-05 07:42:36

---
title: What Is The Difference Between JavaScript REST and Spread
published: true
date: 2019-11-26 10:15:36 UTC
tags: Javascript,javascript
canonical_url: https://codesquery.com/javascript-rest-vs-spread/
---

In this article, we are going to learn what is the difference between the Javascript REST and Spread. ES6 introduced the three dots(…) syntax in the Javascript and can be used depending upon the context, as a REST or Spread operator. In short, REST collects all the remaining elements into an array while Spread operator [...]

The post [What Is The Difference Between JavaScript REST and Spread](https://codesquery.com/javascript-rest-vs-spread/) appeared first on [CodesQuery](https://codesquery.com).
Transitioning between two different software development environments.
Tags: javascript, codequality
Published: 2019-11-26 10:14:28

Writing code for me before now was majorly to make things work in virtually unrealistic time frames with little or no regard whatsoever to best practices.

Things always did work out. Eventually. 
Sometimes with a refactor here or an addition there. Other times, it's a living hell especially if it involves reading code that was written a while ago - even if I was the one that wrote it.
```
<!--
  Dear developer, when I was writing this code,
  only I and God understood it. Now only God does.
  I wish you all the very best.
-->
```

> I saw this somewhere and I put it in my code because I could really relate to it😅.
All my thought was to put it in place of proper documentation for the next dev to work on that codebase (I would write proper comments but remember _unrealistic time frames_) but little did I know I would be needing my _words of advice_ first😉

While this rushed approach certainly has its merits, chief among which is that clients can get products lightning fast (I'm talking a medium-sized e-commerce website from scratch in less than 2 months) especially for clients that care more about speed of delivery than quality of work, it's demerit are also very abundant.
For one, there just isn't enough time for automated testing.
Product goes through QA sure, but some _small_ changes don't need to go through QA again right? I mean I just changed this `<i>` to a `<span>` because that is what it should have been from time because of semantics right?
Well, sorry to inform you that the whole app has crashed in production because of a `<span>`

![Sorry to inform you gif](https://media.giphy.com/media/3orif1epWSXezuIXoA/giphy.gif)

Did I also mention that development to production sometimes takes 0s? Yeap. 0s. Because sometimes, I have to edit the code right there on the production server!


Then from this type of environment, I get thrown into the world of automated testing, actual team collaboration, submitting PRs.
I face a number of things as difficulty in this transition:
- The actual learning curve for these things mentioned above and
- The frustration of it all. Frustration in that the code already works quite 
  perfectly but there is still some extra thing to be done
- The very real danger of over engineering. It was almost non-existent before 
  because of the break-neck pace.

Another one that almost drove me mad has to be [Prettier](https://prettier.io/). For someone of a background like the one above to see errors, (not warnings) errors because you had one extra line of white space in your code!!

I have had a lot of moments where I dearly wished for the way things were - when I just wrote code to work as quickly as I could. But there is no denying the merits of this new environment. Collaboration has never been more seamless plus there is this _feeling_, for me at least, of doing things the way they are meant to be done.

All in all, the new environment is looking interesting and I am very much excited   with the way it is going right now so which me luck.

Oh, this is my first post by the way😊