teleren/devto huggingface dataset:
The Weekly Squeak — KubeCon 2020
Tags: kubernetes, podcast, devops, cloudnative
Published: 2020-09-21 10:28:02

KubeCon 2020 special today! So just head over to the podcast or video links to hear more.

xx Chinch

## Watch and listen
Watch and listen to this newsletter below including my interviews with Vijoy Pandey (Cisco), Amith Nair (HashiCorp), and Michael Friedrich (GitLab).

[Listen to the podcast episode](https://anchor.fm/theweeklysqueak/episodes/KubeCon-EU-2020-einrji/a-a3268rk?utm_campaign=The%20Weekly%20Squeak&utm_medium=email&utm_source=Revue%20newsletter)

{% youtube qlzOcKn-SAg %}

<iframe src="https://anchor.fm/theweeklysqueak/embed/episodes/KubeCon-EU-2020-einrji/a-a3268rk" height="102px" width="400px" frameborder="0" scrolling="no"></iframe>
The Danger of Specializing Too Early
Tags: beginners, javascript
Published: 2020-09-21 23:07:17

---
title: The Danger of Specializing Too Early
published: true
date: 2020-09-21 10:24:36 UTC
tags: Beginner, JavaScript
canonical_url: https://carlanderson.xyz/the-danger-of-specializing-too-early/
cover_image: https://images.unsplash.com/photo-1580558606302-50a9b010800e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ
---

> I want to become a Full-stack dev, but I'm not very good at Front-end. Should I just become a back-end dev?  
> \- A total beginner

When you're learning to code, you're working with a goal in mind. You're not trying to learn to code, you're trying to _become a developer_.

Maybe you're more specific than that - you want to be a _front-end_ or a _full-stack_ developer. Perhaps you've taken it that step further and decided to become a _React_ developer.

This approach can work wonders in your later career. However, if you're still a junior (or pre-junior), it has two significant flaws:

- You should learn skills outside of your specialisation. Learning a broad range of things makes learning new skills easier. If you box yourself in, you'll slow your growth.
- As a Junior, your experience with particular technologies isn't nearly as important to employers as your general programming experience.\*

_\*Take this with a grain of salt. There are no rules when it comes to hiring, so anything is possible. I'm just trying to make things easier for you._

Ideally, you would refrain from specialising until several years into your career. I can appreciate the reality isn't that simple, and that it's easier if you work towards one of these specialisations from the beginning.

As a compromise, what I want you to do is to find something _adjacent_ to what you're learning, and make that your next project.

- If you're consuming an API, can you create your own endpoints with Express and Node?
- If you're learning React/Vue, can you learn to serve the files from a web server?
- Find out what a browser does when it fetches a webpage.

_Be curious_. [Work on a range of projects](https://carlanderson.xyz/how-to-find-ideas-for-practice-projects/). Your future self will thank you.

---
Are you stuck on JavaScript Tutorials? 

[Download my ebook on how to succeed as a self-taught JavaScript Developer, and how to find projects that you'll actually finish.](https://carlanderson.xyz/javascript-for-you/)
5 Points To Remember While Outsourcing An IT Project
Tags: freelancewebdevelopment
Published: 2020-09-21 09:59:31

The IT industry has transformed tremendously in the last few years. IT Industry has a footprint in each industry and today’s world no industry can survive without going digital. In order to sustain and being relevant in the business, every industry needs to digitally transform. We have also witnessed recently that due to Covid19 there are many industries that have been impacted seriously and the only way out for survival is digital transformation so that they can reach out to the customers through digital media and not physical interaction.
<a href="https://www.hermesinfotech.com/2020/06/15/5-points-to-remember-while-outsourcing-an-it-project/">Read More..</a>
What is Responsive Web design?
Tags: html, css, javascript
Published: 2020-09-21 09:56:40

##What is Responsive Web design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s 
behavior and environment based on screen size, platform and orientation.

## Meta Tag

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the 
special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height 
and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

```
<meta name="viewport" content="width=device-width; initial-scale=1.0">
```

##Page Widths

Say you’re looking to provide three different responsive page layouts: one for desktops, one for tablets (or laptops), and one for 
smartphones.Unfortunately, there’s no defined standard for the page widths to target, but the following example responsive values
are often used:
```
    320px
    480px
    600px
    768px
    900px
    1024px
    1200px
```
With any of these reasonable sets of increments, you can target most devices. In practice, there is usually no need to 
separately handle all of the aforementioned examples of page widths seven different resolutions is probably overkill. 

##Which devices should I target?

The purest answer is none of them.
More and more devices are going to come to the market and it seems silly that a device with 767px assumes a 480px 
design because that’s where you set the breakpoint.  Instead if it were set at 800px and again at 
600px (or at what ever point the design looked bad) then you cover ANY device that comes along next week, and years into the future.

##Mobile First

Approaching the design mobile first is the best approach for a responsive design. It allows you to layout the 
content that is most important to your customers in a clear and logical way on the smallest screen real-estate. 
This will force you to really identify what is the most important information on your site.

##Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of
new media features, including max-width, device-width, orientation and color. New devices made after the release of
CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using 
CSS3 features to target these devices would work just fine.

Common Breakpoints:
```
    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
```
Syntax
```
@media media type and (condition: breakpoint) {
  // CSS rules
}
```
Reversing x64
Tags: help, c
Published: 2020-09-21 09:54:40

I have this bit of code (function) in x64 assembly. I am not able to understand what it does. I get lost with MOVSX, MOVZX and MOVSXD.

![Code snippet](https://dev-to-uploads.s3.amazonaws.com/i/alxeh12vljjimsgj1hkn.png)
Form Helper【CakePHP】
Tags: cakephp
Published: 2020-09-21 09:49:56

#Introduction
Please watch over gently🙇‍♀️
I will write about cakePHP "Form Helper"!
List of things you will often see.

#Overall picture
```PHP
<?= $this->Form->create(null, ['url' => ['controller' => 'Advices', 'action' => 'index']]); ?>
<?= $this->Form->control('title', ['type' => 'text']); ?>
<?= $this->Form->hidden( 'user_id', ['value'=>$userID]); ?>
<?= $this->Form->button(__('tap')) ?>
<?= $this->Form->end() ?>
```

#Create
`Cake\View\Helper\FormHelper::create(mixed $context = null, array $options = [])`

####Basic

```PHP
$this->Form->create(null);
```

####change action

```PHP
$this->Form->create(null, ['url' => ['action' => 'publish']]);
```

####change controller & action 

```PHP
$this->Form->create(null, [
    'url' => [
        'controller' => 'Articles',
        'action' => 'publish'
    ]
]);
```

####External

```PHP
$this->Form->create(null, [
    'url' => 'http://www.google.com/search'
]);
```
#Control
`Cake\View\Helper\FormHelper::control(string $fieldName, array $options = [])`
 
####Basic

```PHP
$this->Form->control('title', ['type' => 'text']);
```

```PHP
$this->Form->control('title', ['type' => 'checkbox']);
```

```PHP
$this->Form->textarea('advice', ['rows' => '3']);
```

####Hide

```PHP
$this->Form->hidden( 'article_id', ['value'=>'1' ]);
```
?$this->Form->hidden('id');

####Remove required

```PHP
$this->Form->control('title', ['required' => false]);
```

#button

```PHP
$this->Form->button('Add');
```

#end

```PHP
$this->Form->end();
```



[reference](https://book.cakephp.org/4/ja/views/helpers/form.html)
Let's validate some DNS TXT records. 👍
Tags: php, dns, tutorial
Published: 2020-09-21 09:32:42

Here's a scenario, let's say you have users. And those users can sell domains, or maybe add their domains to their profile.

Now you can validate that they own that domain multiple ways. You could have them send a picture of the dashboard showing the domain. Or you could have them create a page just for you.

While both of these scenarios have their ups and downs. For instance the picture, the user could easily use the developer tools in the browser to add the domain. As for the page, that's just cumbersome.

Why don't we instead ask them to add a TXT record to their DNS that we can then validate? Here's a quick and easy way to validate that in PHP.

## The DNS get record function.

You might think getting DNS records would be hard. But fear not, PHP has a built-in function for that. Introducing [dns_get_record]. 🎉

This function returns the DNS records for a given hostname in an array of associative arrays. Now we can get all records in which this function will return by default. But we want the hostname's TXT records, so let's grab only those.

```php
$records = dns_get_record('example.com', DNS_TXT);
```

If there aren't any TXT records you will get an empty array in return.

## Validating against a key.

So now that we have our `$records`. Let's validate that against a key. And since it returns an array we can do that pretty easily using `array_filter` and `in_array`.

So let's create an `array` containing our key.

```php
$key = array('devdojo-verification=V3m0R0G00yHxVO_wWFMK1tF3nQRJ9');
```

Now we can filter down our `$records` to only return the record that we want. The one matching our key.

```php
$filter = array_filter($records, function ($arr) use ($key) {
    return in_array($arr['txt'], $key);
});
```

And if we have found a match we will have a new value in our `$filter` containing our record. If we don't have a match our `$filter` will be an empty array.

## Is it valid or not?

Now we can check our `$filter` for a record using `sizeof`. If we found a match then the size of our filter will be greater than zero.

```php
print (sizeof($filter) > 0) ? 'Valid' : 'Invalid';
```

## Things to keep in mind.

If the hostname you're checking against adds its TXT record under `www.example.com` and you're checking for `example.com`. You won't find a match. Since `www.example.com` and `example.com` will return two different records.

Keep that in mind, you need to check for the correct hostname. 🙂

## In conclusion.

Now you know how to get a TXT record and check for a match. As with every program though, this can be extended. You could make the check a lot more dynamic. E.g. the key could exist in your database, or in a file on your system.

You could add this to a job in a queue, and have it check every other day if the domain is still valid.

The choice is up to you, as always.

Happy coding. 👍

[dns_get_record]: https://www.php.net/manual/en/function.dns-get-record.php
Parsing Outlook emails in Java
Tags: java, tutorial, email
Published: 2020-09-21 09:28:05

Recently I was in need to parse Outlook emails to extract some values so that automated tests can pass multifactor authentication. I was hoping for some naïve implementation in JavaScript but could not found reliable solution there so that I search for good library in Java. I was not even surprised that there were several solutions for parsing Outlook msg files. Java truly has library for everything. 

I chose the the [Auxilii msgparser]( http://auxilii.com/msgparser/) library. As it seemed like the easiest to use solution. 

Added via Maven.
```xml
<dependency>
    <groupId>com.auxilii.msgparser</groupId>
    <artifactId>msgparser</artifactId>
    <version>1.1.15</version>
</dependency>
```

Usage is then straight forward

```java
Message parsedMessage = new MsgParser().parseMsg(msgFile.getInputStream());
String body = parsedMessage.getBodyText();
List<Attachment> attachments = parsedMessage.getAttachments();
```
Please be aware that Outlook on MacOS does not use `msg` format for it’s emails. Exported emails on mac are `eml`. Those are exported in plain text so they could be parsed via regex just be reading the file. 

The whole code supporting all would look like this. 

```java
String body = "";
if(file.getName().endsWith("msg")) {
    Message parsedMessage = new MsgParser().parseMsg(file);
    body = parsedMessage.getBodyText();
} else if (file.getName().endsWith("eml")) {
    body = new String(Files.readAllBytes(file.toPath()), StandardCharsets.UTF_8);
}
// here parse your body
```

---

If this is interesting to you, you can follow me on [Twitter](https://twitter.com/pavel_polivka).
Watch props in Vue
Tags: vue, javascript, webdev, tutorial
Published: 2020-09-21 09:24:07

I had a wonderful night helping a fellow developer last night and thought I'd share something even I had to look up again. 

Watching props in Vue 2 is pretty simple and mostly the same as watching any data point.

So if we set up a vue component with a prop declared:

```
<template>
    <h1>{{propData}}</h1>
</template>

<script>
export default {
     el: '#app',
     data: {
        text: 'Hello'
     },
     props: ['propData'],
   }
</script>
```
So to simply watch the prop for changes we do as follows:

```
watch: {
        propData: function () {
            deep: true,
            handler(newValue, oldValue) {
                console.log(newValue);
            }
        } 
    }
```

So the Deep part of the set up is if we were watching an Object or an Array which would allow the watch to look into the data structure and check for changes.
[Crop and Save] Image using jQuery Coppie in Codeigniter- Step by Step 
Tags: laravel, html, css, codeigniter
Published: 2020-09-21 09:22:36

today I will show the Crop image before upload using jQuery croppie with ajax. I will show crop and resize image before uploading to database in Codeigniter. 

In this tutorial, we will learn crop image in PHP. this tutorial uses jQuery for image upload with ajax in Codeigniter 4 project. image show a preview of crop and resize image before save in database using Ajax. And without refreshing and reloading web page of your CodeIgniter project.
```
<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class CropImageUpload extends Controller
{
    public function index()
    {    
         return view('crop-image-upload-form');
    }
 
    public function store()
    {  
           helper(['form', 'url']);
         
           $db    = \Config\Database::connect();
         $builder = $db->table('crop_images');
 
 
         $data = $_POST["image"];
 
         $image_array_1 = explode(";", $data);
 
         $image_array_2 = explode(",", $image_array_1[1]);
 
         $data = base64_decode($image_array_2[1]);
 
         $imageName = time() . '.png';
 
         file_put_contents($imageName, $data);
 
         $image_file = addslashes(file_get_contents($imageName));
 
         $save = $builder->insert(['title' =>  $image_file]);
 
         $response = [
          'success' => true,
          'data' => $save,
          'msg' => "Crop Image has been uploaded successfully in codeigniter"
         ];
     
 
       return $this->response->setJSON($response);
 
    }
}

```

[[Crop and Save] Image using jQuery Coppie in Codeigniter](https://www.phpcodingstuff.com/blog/crop-and-save-image-using-jquery-coppie-in-codeigniter.html)
'Do the Thing and You'll Have the Power'
Tags: devjournal, codenewbie, womenintech
Published: 2020-09-21 09:11:52

_This post was originally published on September 21, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Monday, back at it! Today I'll be finishing up a lesson on Data Structures and then I'll be making some steady progress on my Pure React ebook!

Last week was a bit of a break for me, since I had one of those times where all motivation just leaves the building, so I'm going to be getting back into it somewhat slowly.

I stumbled upon this quote from Ralph Waldo Emerson that I like: "Do the thing and you'll have the power."

Going to do the thing(s) this week, and always. Happy Monday!

----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
What do you use to record the screen?
Tags: webdev, discuss, productivity
Published: 2020-09-21 09:00:27

---
title: What do you use to record the screen?
published: true
description: 
tags: webdev, discuss, productivity
cover_image: https://cdn-stack.compsmag.com/wp-content/uploads/2017/10/0ab89eaf2a7d8d864696376890c1f7f5.jpg
---
Whether it is a YouTube tutorial, video presentation for colleagues or a screencast for other purpose, once in a while in the developer workflow you might need to record your screen.

I've mainly worked just with [Free Cam](https://www.freescreenrecording.com/) and [ShareX](https://getsharex.com/) in the past.
What's your favorite tool to record the screen?
My first video series is coming on reactjs. 
Tags: react, node, graphql
Published: 2020-09-21 08:57:25

Hello everyone, i just want to say that my first video series is coming on youtube on reactjs. 
As backend i might use graphql but that is still not decided. 
This will be complete series on authentication and authorization using for a react based client from either REST api or from graphql. 🧐🧐

Will make a post after uploading first video. 😾

Thanks😊
Leetcode #387 First Unique Character in a String with Dart and HashMap
Tags: dart, 100daysofcode, leetcode, codenewbie
Published: 2020-09-21 08:57:25

{% youtube iNXOpiSb778 %}

Enjoy the video 😀🙏

Also written version https://losseff.xyz/leetcode/001-first-unique-character-in-a-string/dart/
docker: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).
Tags: docker, k8s
Published: 2020-09-21 08:45:50

although I have already set the https_proxy value, but it still do not work, but setting https_proxy in the systemd configuration of docker will do the trick
```
systemctl edit docker

[Service]
Environment="HTTP_PROXY=http://USER:PASSWD@SERVER:PORT/"
Environment="HTTPS_PROXY=http://USER:PASSWD@SERVER:PORT/"

systemctl daemon-reload
systemctl restart docker
```

but when I try `kubeadm config images pull`, it still return timeout as docker pull, even I tried prefix the command with tsocks, I didnot find any problem with the proxy

I didnot try the solution in this link
https://github.com/docker/for-win/issues/1534#issuecomment-559947758
because I work around the problem by using a mirror without the need of a proxy
If you could only master ONE programming language what would it be and why?
Tags: webdev, career, discuss, codenewbie
Published: 2020-09-21 08:44:58

If I had asked myself this question a few months ago my answer would have been JavaScript. However since then I have learned more programming languages and I think that Kotlin is extremely versatile. You can do web development, server side scripting, native development for desktop operating systems as well as mobile development for both Android and iOS. It's even capable of doing machine learning too.
Abbreviate a Two Word Name with JavaScript (4 solutions)
Tags: javascript, 100daysofcode, codenewbie, codewars
Published: 2020-09-21 08:13:30

{% youtube kEo7ZRHmNhY %}

To solve this problem, we'll take a few different approaches.
Enjoy the video 😀🙏
Also written version https://losseff.xyz/katas/015-abbreviate-a-two-word-name/javascript/
Becoming a Data Engineer
Tags: database, career, beginners, dataengineering
Published: 2020-09-21 08:09:54

To become a data engineer, there are various skills and software to learn, but the basics are the same!

Today, there are multiple data engineers' certificates and courses that you can take.
Here are the free ones; they cover **the basics**, which are the most important part to grasp and understand, and later introduce specific Azure technologies.

They are **free** and will help you cover the basics and Get Started.

Later it will be easier for you to jump into **any** technology related to data engineering.

## Free Courses to cover the Basics:

📚 [Services for Data Engineer](https://bit.ly/2RXJ12Z)
📓 [Store Data](https://bit.ly/3hP8K87)
📙 [Work with Relational Data](https://bit.ly/2FLpDna)
📒 [Work with NoSql solution](https://bit.ly/3kEzh9N)
📘 [Large scale data processing with Data Lakes](https://bit.ly/33S8nF0)
📗 [Implement a Data Streaming Solution with Azure Streaming Analytics](https://bit.ly/3mME5Mz)
📕 [Implement a Data Warehouse](bit.ly/3iKhVYJ)


Each module will take you about 4 hours to complete. If you are completing 1 every weekend, it will take you only 7 weekends.
After it, you will be ready to take the certification exam. 

🏅 [Data Engineer Certificate](https://bit.ly/3611zqW) 
------
the certificate is not free, but you can apply for a scholarship through the link. 


Now, after you finish understanding everything, you can start diving into any technology related to data!


![](https://media.giphy.com/media/4FQMuOKR6zQRO/giphy.gif)
------
I hope this helps you get started and get a Data Engineer role fast! 

Have concerns? would you like to chat? send me a private message on [twitter](https://twitter.com/AdiPolak).
Vacation Mode JavaScript Action
Tags: actionshackathon, vacation, mentalhealth
Published: 2020-09-21 08:08:51

### My Workflow

This GitHub Action helps maintainers of open source projects go on vacation and take mental health breaks by limiting community interactions within a repository. During this time, commenting, opening issues, or creating pull requests will be limited to a defined group.

This GitHub Action avoids the 24 hour limit of the GitHub repository [interactions limit](https://docs.github.com/en/github/building-a-strong-community/limiting-interactions-in-your-repository) feature. This makes it easier for the project maintainers and more transparent for the community.

This GitHub Action does not make any changes that would generate a commit.

This project was inspired by [@mrdoob](https://github.com/mrdoob), maintainer of [three.js](https://github.com/mrdoob/three.js). I started this project on September 17th based on his feature request.

{% twitter 1305989856368234496 %}

I've already received some amazing feedback, which is why I decided to submit it here for more reach.

{% twitter 1307739588266467331 %}

### Submission Category: 

Maintainer Must-Haves

### Yaml File 

```yaml
name: Vacation Mode

on:
  # Run on all issue activity
  issues:
  # Run daily to reset the 24 hour interaction limit timer as needed
  schedule:
    - cron: "0 0 * * *"

jobs:
  vacation_mode_job:
    runs-on: ubuntu-latest
    name: Update Vacation Mode
    steps:
    - uses: robotnyc/vacation-mode-action@v1
      with:
        limit-group: 'collaborators_only'
        vacation-mode-activated: '![vacation-mode-activated](https://i.imgflip.com/18t5ch.jpg)'
        GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
```

### Code

{% github https://github.com/robotnyc/vacation-mode-action %}

### Additional Resources / Info

* https://github.com/octokit/action.js/