teleren/devto huggingface dataset:
A Blog is Born
Tags: codenewbie, javascript, womenintech
Published: 2020-03-30 08:37:23

Here it is - the first official post of my self-developed portfolio and blog site! I'm still trying to wrap my head around dynamically rendering blog posts, so for now, I'm (embarrassingly) statically rendering them within the blog page. I feel like I'm on the brink of an idea and it involves pushing posts into an array that renders through DOM manipulation on the page. I know it would be a breeze with React or Gatsby, but for now I'm trying to focus solely on JS.

Speaking of which - I started in today on a JavaScript course on Udemy. I always love the beginnings of any JS lessons, books, etc. I'm pretty aware of how far I've come and I love being able to complete all the exercises with relative ease. Looking forward to spending these next couple of weeks focused on that and continuing to strengthen my JS foundation.

I'm hoping to document at least every day or two. I recently shipped a new side project - [Three To-Do's A Day](https://alexlsalt.github.io/three-todos/). I'll be updating some features and interactivity over the next few weeks, but I just love that feeling of publishing something (even when it's not completely perfect).

_This post was originally published on February 3, 2020 on [my blog](https://alexlsalt.github.io/blog)._
How to steer your startup through this pandemic
Published: 2020-03-30 08:36:04

The coronavirus pandemic has, and will continue, to make entrepreneurs' jobs harder.
 
Sifted spoke to VCs offering practical advice to guide startups through the storm, such as setting second quarter sales to 0 and spreading your cash to last 18 months rather than the standard 12. 

Read the full article here and let me know what you're doing to get through this in the comments -> https://sifted.eu/articles/investor-coronavirus-advice/
What’s New in Xcode 11.4?
Tags: ios, swift, xcode, programming
Published: 2020-03-30 08:30:40

*Apple continuously tries and makes our favourite tool for developing applications for iOS/macOS/watchOS/etc. even better.*

They announced interesting new features, which I’ll describe briefly. In my opinion, they’re actually very important.


**Clang Compiler (11.0.3)**
If your framework uses any third-party framework dependencies, the compiler displays the warning `-Watimport-in-framework-header` by default in the event of a framework importing a third-party dependency.

**Debugging**
The view debugger shows UILayoutGuide and its referencing constraints
The view debugger supports showing layers. 
Editor → Show Layers
You can forward Xcode’s Console I/O to Terminal. 
Product → Scheme → Edit Scheme → Options tab

About **Swift 5.2** and new features of **Simulator** and **Testing** more on Medium:
https://medium.com/better-programming/whats-new-in-xcode-11-4-bd7c6f6bb0ba
The Front End Podcast - Episode #4
Tags: career, podcast, frontend
Published: 2020-03-30 08:15:03

Da da da daaa, introducing Episode 4 of [The Front End](https://thefrontendpodcast.site). It's all processed and edited and ready for your listening pleasure via the following channels:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## About episode 4

Episode four features not one but two guests, [Arjun Gillard](https://www.linkedin.com/in/arjgillard/) and [Simran Hundal](https://www.linkedin.com/in/simran-hundal/), both very experienced recruiters with the firm, Understanding Recruitment. 

On the show they're going to cover a range of 'getting hired' topics including: how to get hired as a developer; how to help recruiters to help you; why you should use a recruiter; how can employers engage with and attract the best software engineers; and the age old question of 'do you need a software development degree?'. All this and more in episode four.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:6X9PX73PWIa3h7Gs5PHCEW%}

## Want to be a guest or sponsor the show?

I'm definitely looking for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Stopping a Webcam with JavaScript
Tags: javascript
Published: 2020-03-30 08:14:47

I recently had to manually get a running web camera to turn off using JavaScript for a project at work.

I had a hard time figuring out JavaScript's MediaStream API so here are some quick notes on how I got the camera to stop.

If the camera is running through a video element, you can stop the video by getting its `MediaStreamTrack` object and using the `stop()` method:

```javascript
const video = document.querySelector('video');

// A video's MediaStream object is available through its srcObject attribute
const mediaStream = video.srcObject;

// Through the MediaStream, you can get the MediaStreamTracks with getTracks():
const tracks = mediaStream.getTracks();

// Tracks are returned as an array, so if you know you only have one, you can stop it with: 
tracks[0].stop();

// Or stop all like so:
tracks.forEach(track => track.stop())
```

Another way to get all the MediaStreams is to use `mediaDevices.getUserMedia()` which is called on `navigator` tracks. It prompts the user for permission (if not already granted) to access the media devices. It will return a Promise so you can write the necessary code within the Promise's `then`:

```javascript
navigator.mediaDevices.getUserMedia({video: true, audio: false})
  .then(mediaStream => {
    const stream = mediaStream;
    const tracks = stream.getTracks();

    tracks[0].stop;
  })
```
Make sure you only call `getUserMedia` once or `stop()` won't work, so if your code or a library you're using calls `getUserMedia` on the page to activate a camera, then you probably won't be able to use this method.

## References
- [MDN MediaStreamTrack Documentation](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack)
- [MDN MediaStreamTrack Documentation](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack)
- [MDN MediaDevices.getUserMedia()
 Documentation](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
3 ways to add distinct underline style for the anchor tags 
Tags: html, css, beginners, webdev
Published: 2020-03-30 08:13:34

Add some slick _underline_ styles to your anchor tags with these 3 ways.

1. [text-decoration](#1-textdecoration)
2. [border](#2-border)
3. [box-shadow](#3-boxshadow)

## 1. text-decoration

The first and most obvious way is to use the `text-decoration` property to give your links a distinctive style. The [`text-decoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) property is a shorthand that:

> sets the appearance of decorative lines on text

This property will set `text-decoration-line`, `text-decoration-color`, `text-decoration-style`. However it can take from one up to three parameters.

```css
a {
  text-decoration: underline;
}
```
You can add more unique styles by throwing in the color and style properties:

```css
a {
  text-decoration: underline dotted #047cea;
}
```

Available styles are:
* solid;
* double;
* dotted;
* dashed;
* wavy.

## 2. border

The `border-bottom` property will allow you to make _underline_ more custom.

```css
a {
  text-decoration: none;
  border-bottom: 1px dashed #047cea;
}
```
Now you can control _underline_'s width and use styles specific only to the `border` property like:

* dotted;
* dashed;
* solid;
* double;
* groove;
* ridge;
* inset;
* outset.

Another benefit of using the `border-bottom` property is you can control the space between the text and the _underline_ by adding a `padding` property.

```css
a {
  text-decoration: none;
  border-bottom: 1px dashed #047cea;
  padding-bottom: 2px; 
}
```

## 3. box-shadow

The last one is `box-shadow` property. Like the `border` it will allow you to control the width of the _underline_ and space between the text as well.

```css
a {
  text-decoration: none;
  box-shadow: 0 2px #047cea;
  padding-bottom: 3px;
}
```
Along with other properties like *blur* and *spread* which can create some funky effects.

```css
a {
  text-decoration: none;
  box-shadow: 0 2px 2px -2px #047cea;
}
```

To conclude, if you want something more than a default styling use `border` or `box-shadow`. These properties also allow using transitions on them so you can get creative with hover effects. 😉

I've put together a collection of possible anchor tag styles on CodePen, check 'em out.

{% codepen https://codepen.io/nikitahl/pen/jvaPrp default-tab=result %}

Cover photo by [LUM3N](https://unsplash.com/@lum3n?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unsplash
Should you use JS utility libraries or in-built methods?
Tags: javascript, functional, learning, concepts
Published: 2020-03-30 07:41:38

Today I would like to talk about JS utility libraries like UnderscoreJS, Lodash, and RamdaJS. These libraries have been really good in terms of the features they provide. Often it has been seen that a developer ends up writing custom utility methods in order to fulfill the heavy object manipulations.

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

Key points to note - 
- Object manipulation
- Array iterations 
- Creating chained functions to handle and get results.

> We as developers can learn many design patterns from these libraries. I have personally found Functional programming as one of the best implementations in these libraries.

It's interesting to see how these libraries have implemented and fully utilized the design patterns of modern programming languages.

Developers usually come across problems related to functions, arrays, and objects in the day to day development. 

I have been working with Lodash for the past 10 months. One thing which every programmer will understand that you need to get deeper and deeper into these libraries to understand the core part of the design patterns they implement.

I found one of the articles which explain the difference between native javascript methods and Lodash implementation of methods in a really nice way.

[https://codeburst.io/why-you-shouldnt-use-lodash-anymore-and-use-pure-javascript-instead-c397df51a66](https://codeburst.io/why-you-shouldnt-use-lodash-anymore-and-use-pure-javascript-instead-c397df51a66)

Important things to be observed in these libraries are chaining of methods ( Example of functional programming). The important thing to notice here is that the time complexity in terms of the execution of these methods. 


JavaScript developers must explore _Functional programming_

Some resources that I would suggest for JS developers in general

- [EloquentJS](https://eloquentjavascript.net/)

- [Functional programming in JS](https://opensource.com/article/17/6/functional-javascript)


**Happy learning, stay healthy and fit!**
Blog on Oracle technologies and other programming languages
Tags: showdev, oracle, plsql, orclapex
Published: 2020-03-30 07:37:28

Hello guys, I am [Vinish Kapoor](https://www.foxinfotech.in/about-vinish-kapoor) and I want to introduce you to my blog [foxinfotech.in](https://www.foxinfotech.in/). I am writing tutorials on Oracle technologies such as Oracle Database, Oracle PL/SQL, Oracle Apex, and Oracle Forms. You can find the posts for a particular topic with the following links:

- [Oracle PL/SQL](https://www.foxinfotech.in/category/plsql)
- [Oracle SQL](https://www.foxinfotech.in/category/sql)
- [Oracle Apex](https://www.foxinfotech.in/category/apex)
- [Oracle Forms](https://www.foxinfotech.in/category/oracle-forms)
- [cx_Oracle](https://www.foxinfotech.in/2018/09/cx_oracle-python-tutorials.html)
- [Linux/Unix](https://www.foxinfotech.in/category/linuxunix)
- [Toad for Oracle](https://www.foxinfotech.in/category/toad)
- [SQL Developer](https://www.foxinfotech.in/category/sql-developer)

Please let me know your views and suggestions. Thanks.
【WordPress】アイキャッチ画像がある時、無い時の分岐OGP
Tags: wordpress
Published: 2020-03-30 07:17:21

```
<?php if(has_post_thumbnail()): ?> 
<?php 
// アイキャッチ画像のIDを取得
$thumbnail_id = get_post_thumbnail_id(); 
 
$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );

echo '<meta property="og:image" content="'.$eye_img[0].'">';
?>
<?php else: ?>
    <meta property="og:image" content="★アイキャッチ無い時の指定画像★">
<?php endif; ?>
```
Lessons on targeted goals from a Google backed open source education project — Oppia
Tags: opensource, elearning, erxes, oppia
Published: 2020-03-30 07:12:30


Here is an interview we did with Diana Chen from Oppia. [Oppia Foundation] (https://www.oppiafoundation.org/) is a non-profit that offers an online platform, which makes it easy to create interactive lessons. As announced on [Google’s Open Source Blog] (https://opensource.googleblog.com/2014/02/oppia-tool-for-interactive-learning.html) in 2014, the launch of Oppia was Google’s second educational experiment.

Here are some of the key takeaways:
* Keeping your focus razor sharp when it comes to overall strategy helps allocating resources wisely and also maintaining momentum.
* While it is tempting to design a project that checks all your boxes, the focus should always be on the end-user.
* All your larger strategic decisions should be based on evidence.

I encourage you to read the **[full interview] (https://erxes.io/blog/posts/targeted-goals-for-growth-in-open-source)**, as it gives valuable advice if you are planning or already started an education project.

###### <center>_[erxes] (https://erxes.io/) is an open source application for the complete growth marketing lifecycle with a focus on mission and community._</center>
4. How to match whitespace and non whitespace characters.
Tags: regex, java
Published: 2020-03-30 06:57:11

The **\s** expression any whitespace characters[space,tab] and **\S**
expression  matches every non whitespace characters.
 e.g :- String Pattern :- \\\S\\\s\\\S\\\s\\\S
        Test String :- **a b c** def

**Note**:- Use \\\ instead of \ in Java.

*Sample code in Java:*

import java.io.*;
import java.util.Scanner;
import java.util.regex.*;
class RegexSearch{
        public void tester(String Regex_Pattern){
                Scanner sc= new Scanner(System.in);
                String Test_String = sc.nextLine();
                Pattern p = Pattern.compile(Regex_Pattern);
                Matcher m = p.matcher(Test_String);
                while(m.find()){
                        System.out.print(m.group());
                }
        }
}
public class Main{
        public static void main(String[]args){
                RegexSearch obj = new RegexSearch();
                obj.tester("\\\S\\\s\\\S\\\s\\\S");
        }
} 

[You can view the code here also.](https://onlinegdb.com/ByL8xMJDU)
 
Do read my previous blog on Regex. {% link https://dev.to/shalya21/1-introduction-about-regex-3ig3 %}

{% link https://dev.to/shalya21/2-the-dot-54l8 %}

{% link https://dev.to/shalya21/matching-digits-and-non-digits-character-46db %}

                      👍 Have a nice day, Coders.👍
Starting an open source project with no corporate backing with Ben Gubler
Tags: opensource, javascript, erxes, squirrelly
Published: 2020-03-30 06:31:34

Today, we had the opportunity to chat with Ben Gubler, the founder of [Squirrelly] (https://bengubler.com/project/squirrelly/), an ultrafast, lightweight, modern JS template engine. He talked about his experiences scaling his early stage open source project. If there are any other developers in the early stages of project development, this interview might be interesting to you.

These are the 3 things he said he'd do differently, if he could start the project over:
* Pick my tooling better
* Focus on writing good tests during development
* Be more confident, take more risks, reach out to people for feedback.

Also, he talked about starting a project with no corporate funding and how he approaches the challenge of monetization.

What are you thoughts on this? Did you also relate to these takeaways in some ways? 👉 [Read the full interview here.] (https://erxes.io/blog/posts/starting-an-open-source-project-with-no-corporate-funding)

<center>_**[erxes] (https://erxes.io/)** is an open source application for the complete growth marketing lifecycle with a focus on mission and community._</center>
Linux Test Session: Manually mounting an SDHC card [unedited]
Published: 2020-03-30 06:07:55

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

The system failed to detect ( and mount) the card when inserted. Ultimately, had to manually mount it.

#1. Check if the device is read by the system:

- Before inserting
*$ ls /dev/* | wc -l
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mrkd736spkltpaf0ixim.png)

- After inserting
*$ ls /dev/* | wc -l
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pc31avlvhn3eepf0f6bt.png)

*538 to 542 tells some files or directories were added

- Also 
*$ dmesg | tail -n 7*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wqyz3ct7u59wvrrk93d2.png)

Notice : mmcblk0, that's the device name

#2. Check if the device is listed (Other ways to see if device is recognized in some way)

*$lsblk*
Lists block devices
*$lsusb*
Lists usb devices

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

Notice the name : *mmcblk0* and *mmcblk0p1*
Also the size : *3.7G*

#3. Mount
*$mount -t type device dir
Mounts a device name *device* of fs type *type* to directory *dr*

Here:
*$ sudo mount -t vfat /dev/mmcblk0p1 Desktop/card/

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


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


*[-t] option indicates fstype ie. the filesystem type with which the device is formatted; which in here is vfat
The most common are ext2, ext3, ext4, xfs, btrfs, vfat, sysfs, proc, nfs and cifs *


#DONE!

Also check:
https://dev.to/bijaykumarpun/linux-test-session-monitoring-disk-space-unedited-2g8f
Is there any R function to combine 366 days of a year into 52 weeks?
Published: 2020-03-30 05:53:35

https://stackoverflow.com/q/60924696/13150634
I have daily values of rainfall from 1968 to 2019.I want to make the weekly sum table for 52 weeks.

in which, I want to make the 9th week (feb 28 to mar 04 ) of 8 days in leap year and 52nd (dec 24 to dec 31)week of 8 days in all year.
The Future of Web Components
Published: 2020-03-30 05:42:10

Web Components have been a standard created for the improvement of technology adoption within the Internet of Things. The definition of Web Components is a set of web platform API's that allow the user to create HTML tags to use within web pages and apps. What this means is that it allows the code that is created to be used and shared without compatibility problems.

When developers look at Web Components, they find it appealing to use these Web Components because they do not rely on front end frameworks. Web Components consist of three technologies, custom elements, Shadow DOM and HTML templates that can be used together to create custom elements with encapsulated functionality that can be reused without any code collisions.

With the standards that make up Web Components, it allows more creative opportunities for the user. The business world is always adapting to emerging technologies, and with the implications that Web Components hold for the future, developers should begin to expose themselves to Web Components. 

Youtube Video: https://www.youtube.com/watch?v=s0lffsbd9b4
3.Matching digits and non digits character.
Tags: regex, java
Published: 2020-03-30 05:30:24

The expression **\d** matches any digit[0-9] character and expression **\D** matches every non-digit character.

**Note :-** For java use \\\d or \\\D instead of \d or\D.

e.g:- Regex Pattern : \\\d\\\d\\\d\\\d
      Test String : dev community @**1245**6
      Explanation : Here \\\d expression which is written four times will match 
                    any four digits character.

*Sample code in Java:*

import java.io.*;
import java.util.Scanner;
import java.util.regex.*;
class RegexSearch{
     public void tester(String Regex_Pattern){
          Scanner sc = new Scanner(System.in);
          String Test_String = sc.nextLine();
          Pattern p = Pattern.compile(Regex_Pattern);
          Matcher m = p.matcher(Test_String);
          while(m.find()){
                System.out.print(m.group());
          }
     }
}
public class Main{
     public static void main(String[] args){
           RegexSearch obj = new RegexSearch();
           obj.Pattern("\\\d\\\d\\\d\\\d\\\D");
     }
}

**Input**:- dev community@12456dev
**Output**:- 1245d

[You can view the code here also] (https://onlinegdb.com/rk3CeZ1vI)
 
Do read my previous blog on REGEX.
{% link https://dev.to/shalya21/1-introduction-about-regex-3ig3 %}
{% link https://dev.to/shalya21/2-the-dot-54l8 %}

        👍 Have a nice day,Coders.👍
React Component Library with Material UI
Tags: development, javascript, react, materialui
Published: 2020-03-30 05:26:09

---
title: React Component Library with Material UI
published: true
description: Using Material UI which supports Styled Components is an excellent combination of libraries to start building a design system of your own
tags: ['development', 'javascript', 'react', material-ui]
---

## Why Material UI?

Creating a custom component library from scratch can be tedious and time-consuming. Instead, it’s much faster to use one of an existing component libraries well-architected components than to spin up a custom one.
Instead of using Sass or JS in CSS, I prefer using Styled Components for the ability to pass functions and props, write regular CSS, inject custom properties like any other React component and just the overall component-driven nature of it.
Well, the good news is, Material UI pretty much supports it out of the box.

## Setting up Material UI

Install Material-UI's source files via npm:

```sh
npm install @material-ui/core
```

Or using yarn:

```sh
yarn add @material-ui/core
```

Material-UI components work without any additional setup, and also don't pollute the global scope.

```js
import styled from "styled-components";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)`
  color: white;
  && :hover {
    color: blue;
  }
`;
```

Pretty simple isn't it? 

## Using ThemeProvider for avoiding use of && everywhere

If we want to be able to style our Material UI components without using **&&** then we have to do the following:

```js
import { StylesProvider } from '@material-ui/styles';
import Button from "@material-ui/core/Button";

<StylesProvider injectFirst>
  <Button>Hey there!</Button>
</StylesProvider>
```

All it does is ensure that Material UI’s styles get injected first so that Styled Components classes take priority.

Read more [here](https://seanamarasinghe.com/developer/2020-03-16-react-component-library-with-material-ui)