teleren/devto huggingface dataset:
Code-it Notes: Create Your Own! 📝
Tags: explainlikeimfive, beginners, tutorial, javascript
Published: 2019-04-08 21:10:17

A few weeks ago, I prototyped an idea to help me better understand the JavaScript methods I always seemed to forget.

The idea was simple. Create Post-it note like summaries that could be refered to whenever I needed them. An explaination on one side and an example on the other. I love [MDN](https://developer.mozilla.org/en-US/) and [W3Schools](https://www.w3schools.com/), but putting something into your own words always seems better when trying to decipher how a piece of code works.

Feedback from the [original dev.to post](https://dev.to/danielharding/code-it-notes---2gli) was reassuringly positive, but as I'd created the notes in Google Slides, designing new topics soon became time consuming. Post-it notes are meant to be quick, and this certainly wasn't. 

{% devcomment 9iho %}

Following a few encouraging comments, it felt worthwhile to spend some time thinking about how to recreate the notes in a more flexible format. Releasing the Google Slides deck would be the easiest way, but the same problems would still exist. I'd also experimented with Instagram (see below), but images containing text have poor accessibility and don't allow for further editing (although swiping between each side worked really well). Back to the drawing board.  

{% instagram BvH2z08nONS %}

The solution came thanks to the dev.to markdown editor's use of Liquid tags. By building a template in CodePen and embedding it here on dev.to, anybody would be able to fork the pen, remix and share their creation back to the community (or anywhere else for that matter). What's more, the [#explainlikeimfive](https://dev.to/t/explainlikeimfive) hashtag seemed a perfect fit for what I was trying to achieve. Take a coding concept, boil it down to its simplest form and give an example. That's it! 👌 

{% codepen https://codepen.io/danieladamharding/pen/dLXBJQ %}

An added bonus is that you get to tinker with a bit of code whilst making a Code-it. There's CSS Grid, clip paths, variables, media queries, transitions, basic JavaScript and more. Don't like it? Rip it up and edit it until you do. 

So, if you're interested in creating your own Code-it note, here are the instructions: 

**How to Create Your Own Code-it Note**
1. Fork the pen. 
2. Decide on a topic for your Code-it. Remember, the smaller the better (e.g. a single JavaScript method, CSS property etc).
3. Research the topic and edit your pen. 
4. Once you've finished, write a new dev.to post, tag it with #explainlikeimfive and embed your new pen.
5. Take pride in improving your own knowledge whilst also creating a community resource for other people to benefit from!

The pen includes a link to the [FontAwesome](https://fontawesome.com/icons?d=gallery&m=free) CDN, so feel free to use their library of free icons to illustrate your creations. 

If you have any feedback, or would like to offer suggestions about how the template code could be improved, I'd love to hear it.
Illustrated Developer Topics
Tags: javascript, react, babel
Published: 2019-04-08 20:51:57

At egghead.io, we put a lot of time into thinking about how we can best teach someone how to code/learn a completely new topic. One way that works for a lot of people is to use metaphors for visualizing concepts that can be hard to understand. 

Maggie, our awesome designer ([@Mappletons](https://twitter.com/Mappletons) on twitter), has been putting together these illustrations about different topics in web development. She puts in a lot of effort to learn these topics herself in order to come up with these illustrations. They are amazing 😍

As of right now, shes gone through:
- babel
- jsx
- transpilers
- weak vs stict equals in JS
- virtual dom
- spead operator

Y'all should take a look!

[illustrated.dev](https://illustrated.dev/)
Top ten most popular docker images each contain at least 30 vulnerabilities
Tags: docker, image, container, security
Published: 2019-04-08 20:36:33

---
title: Top ten most popular docker images each contain at least 30 vulnerabilities
published: true
description: Prefer minimal base images to minimize attack surface
tags: docker, image, container, security
---

## Prefer minimal base images

Often times, you might start projects with a generic Docker container image such as writing a `Dockerfile` with a `FROM node`, as your “default”.

However, when specifying the node image, you should take into consideration that the fully installed Debian Stretch distribution is the underlying image that is used to build it.

If your project doesn’t require any general system libraries or system utilities then it is better to avoid using a full blown operating system (OS) as a base image.

In Snyk’s [State of open source security report – 2019](https://snyk.io/blog/top-ten-most-popular-docker-images-each-contain-at-least-30-vulnerabilities/), we found that many of the popular Docker containers that are featured on the Docker Hub website are bundling images that contain many known vulnerabilities.

For example, when you use a generic and popularly downloaded node image such as `docker pull node`, you are actually introducing an OS into your application that is known to have 580 vulnerabilities in its system libraries.

![https://res.cloudinary.com/snyk/image/upload/v1551121069/Number_of_OS_vulnerabilities_by_docker_image.png](https://res.cloudinary.com/snyk/image/upload/v1551121069/Number_of_OS_vulnerabilities_by_docker_image.png)

Taken from the open source security report 2019, as can be seen, each of the top ten Docker images we inspected on Docker Hub contained known vulnerabilities.

By preferring minimal images that bundle only the necessary system tools and libraries required to run your project, you are also minimizing the attack surface for attackers and ensuring that you ship a secure OS.


---

This tip is part of a complete [10 Docker image security best practices](https://snyk.io/blog/10-docker-image-security-best-practices/) you should adopt. Thanks for reading and to [Omer Levi Hevroni](https://twitter.com/omerlh) who worked with me on it.

The original blog post includes a high-resolution printable PDF like the snippet you see below. [Check it out](https://snyk.io/blog/10-docker-image-security-best-practices/)
Introducing ZephJS
Tags: javascript
Published: 2019-04-08 19:41:36

---
title: Introducing ZephJS
tags: JavaScript 
published: true
---

ZephJS makes writing Web Components super simple and easy without the need for a big framework like Angular or learning the complications of Shadow DOM like lit-html. It is entirely standards based and weighs in at less than 20k. 

An easy to follow introduction can be found at https://gist.github.com/arei/8083a6270e704b830c68a2020f3e5e3e.
Guide: Python DataFrames for Data Analysis
Tags: python, datascience
Published: 2019-04-08 19:22:54

---
title: Guide: Python DataFrames for Data Analysis
published: true
description: Learn when, why and how to use Pandas DataFrames for data analysis with Python. You'll learn basics of how to create, inspect, and manipulate a DataFrame.
tags: python, datascience
canonical_url: https://kite.com/blog/python/pandas-dataframe/
---

![pandas dataframes] (https://thepracticaldev.s3.amazonaws.com/i/3lcuuas4ttvcyszsmyrf.jpg)

The core data structure in Pandas is a DataFrame. A DataFrame is a two-dimensional data structure made up of columns and rows

If you have a background in the statistical programming language R, a DataFrame is modeled after the data.frame object in R.

The Pandas DataFrame structure gives you the speed of low-level languages combined with the ease and expressiveness of high-level languages.

Each row in a DataFrame makes up an individual record—think of a user for a SaaS application or the summary of a single day of stock transactions for a particular stock symbol.

Each column in a DataFrame represents an observed value for each row in the DataFrame. DataFrames can have multiple columns, each of which has a defined type.

For example, if you have a DataFrame that contains daily transaction summaries for a stock symbol, you might have one column of type float that indicates the closing price while another column of type int that indicates the total volume traded that day.

DataFrames are built on top of NumPy, a blazing-fast library that uses C/C++ and Fortran for fast, efficient computation of data.

Now that we understand the basics behind a DataFrame, let’s play around with creating and viewing a DataFrame.

Read more [here] (https://kite.com/blog/python/pandas-dataframe)!
Open sourcing tsconfig
Tags: typescript, opensource, tsconfig
Published: 2019-04-08 19:03:08

---
title: Open sourcing tsconfig
published: true
description: 
tags: typescript, opensource, tsconfig
---

# Hi again 🖖

Today I want to write about the thing that we did in my work. I currently work at [Ingrid](https://www.ingrid.com/). All of your codebases is written in TypeScript which is using `tsconfig` as a way
to tell the compiler what to do. Most of tsconfig is the same for all of your project
so we decided to open source it 🎉.

## Why

You may ask why do such a thing? A first argument is that we can enforce good practices
for all of our codebase. If there is a new setting - we can adjust it in one place and
all the project will have it.

This is also the first step in making our internal ts-guide. We already have a common
prettier config. The next step will be to add Ingrid tslint rules.

## How can you use it

Because it is open source you can use it in your own project by installing it:

```shell
npm install --save-dev @ingridab/tsconfig
```

and extending your own configuration:

```json
{
  "extends": "@ingridab/tsconfig",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~src/*": ["src/*"]
    },
    "plugins": [
      {
        "name": "typescript-tslint-plugin"
      }
    ]
  }
}
```

## Summary & TL;DR

The company that I work for open sourced their [tsconfig](https://www.npmjs.com/package/@ingridab/tsconfig).
You can use it in your own project too! What are the other
tools or configs that your company open sourced? Please write in the comments!

P.S

If you want to get those posts 1 week before those on dev.to you can join my newsletter on https://krzysztofzuraw.com/newsletter.
4 Simple Steps For Custom Bash Commands
Tags: bash, productivity, codenewbie
Published: 2019-04-08 18:48:23

---
title: 4 Simple Steps For Custom Bash Commands
published: true
description: a concise guide to personalized bash commands
tags: #bash, #productivity, #codenewbie
---

The terminal isn’t the most user friendly - sensitive to errors, challenging to read, and it requires a lot of typing!  I frequently find myself typing the same commands over and over into my terminal. If only there was a way to create my own shortcuts to access my main folders by typing a single keyword…

Luckily this functionality exists! Let's walk through 4 simple steps to creating your personalized bash commands:

#### 1. Locate Your .bash_profile (OSX) or .bashrc (Linux)
<ul>
<li> Navigate through your terminal to either your .bash_profile file or .bashrc depending on your operating system. Your shortcuts will live in these files so that each time you open a new terminal session, the shortcuts are accessible. 
</li>
</ul>
![navigate to bash profile in osx](https://thepracticaldev.s3.amazonaws.com/i/6w90ltpnzk4mqwjmf6to.png)<figcaption> navigate to .bash_profile within OSX</figcaption>


#### 2. Add Your Commands
<ul>
<li> Inside the file start creating your own commands! Use them to help you navigate to frequently accessed folders, shorten git commands, open applications, or anything you think would be helpful and time saving.  Examples below: 
</li>
</ul>
![bash shortcut command examples](https://thepracticaldev.s3.amazonaws.com/i/ir6mx5xzv9gy2o0uvri1.png)
<figcaption> a few examples of personalized bash commands</figcaption>


#### 3. Update Your Command File Through the Terminal
<ul>
<li> For best practice, after you add new commands to your shortcut file, be sure to run the command below to refresh your file via the terminal: <i> source ~/.yourfilenamehere </i>
</li>
</ul>
 ![update file through bash](https://thepracticaldev.s3.amazonaws.com/i/k6tlig1nj5vm9kepqeqn.png)<figcaption> run this command after editing your file</figcaption>             

#### 4. Run Your Commands!
<ul>
<li> Use your commands and enjoy the time you’ve saved by working smarter - not harder! Go back and add commands as you need throughout the future. </li>
</ul>
![get work done gif](https://media.giphy.com/media/oUkLEfuYSrPOg/giphy.gif)
</li>
SouthEast Dreamin’ 2019
Tags: blog, salesforce, lwc
Published: 2019-07-22 12:24:14

---
title: SouthEast Dreamin’ 2019
published: true
tags: Blog, Salesforce, lwc
canonical_url: https://wipdeveloper.com/southeast-dreamin-2019/
cover_image: https://i1.wp.com/wipdeveloper.com/wp-content/uploads/2019/04/IMG_1516-2.jpg
---

Last month I took a little trip to ATL to attended [Southeast Dreamin’ 2019](https://www.southeastdreamin.com/).

It was a great conference to attend and the team that organizes it should be proud.

While there I presented on Salesforce’s new ui development model – Lightning Web Components.

## A Quick Intro to Lightning Web Components

> Lighting Web Components are the new, standards based way to create UI elements for Lighting. We will take a quick look at the tools needed to get started and the basics of creating a Lighting Web Component.

## Code

[https://github.com/BrettMN/quick-intro-to-lwc](https://github.com/BrettMN/quick-intro-to-lwc)

## Slides

[A Quick Intro to Lightning Web Components – Brett Nelson](https://wipdeveloper.com/wp-content/uploads/2019/04/A-Quick-Intro-to-Lightning-Web-Components-Brett-Nelson.pdf)[Download](https://wipdeveloper.com/wp-content/uploads/2019/04/A-Quick-Intro-to-Lightning-Web-Components-Brett-Nelson.pdf)

## That’s it for now.

Remember to sign up for [**The Weekly Stand-Up!**](https://wipdeveloper.com/newsletter/)  and you can get updated with any new information we have on WIPDeveloper.com.

The post [SouthEast Dreamin’ 2019](https://wipdeveloper.com/southeast-dreamin-2019/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).
Looking back on C# 6: Static Imports
Tags: csharp
Published: 2019-05-30 08:00:05

---
title: Looking back on C# 6: Static Imports
published: true
tags: csharp
canonical_url: https://blog.csmac.nz/looking-back-on-csharp6-static-imports/
---

 ![Looking back on C# 6: Static Imports](https://images.unsplash.com/photo-1502426899022-660e3522a15a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE2ODI3fQ)

With C# 8 on our doorstep, I wanted to go through some of the C# 6 and 7 language features I have been using that you may have missed.

Another feature that I avoided for a while, but have really starting to use a lot more. `using` brings a namespace into the scope of the file. This allows us to write `Console.WriteLine("Hi");` instead of `System.Console.WriteLine("Hi");`. But with this language feature, we introduce a Static class into scope. So instead we could write `WriteLine("Hi");`. This looks a bit strange to start with because the code appears the same as calling a method in the current class (or base class).

The syntax to make this works is rather straight forward.

```
// This is a standard 'using'
using System;

// To pull in for the example above you would use the new syntax:
using static System.Console;

// But you can import any static class you like
using static MySystem.Helpers.LookupTables;
```

Used sparingly, this can reduce the noise in the code for strong domain concepts that you use everywhere, and improve readability as well as save keystrokes. The example always used is `System.Math`. but use this however best suits the domain you are working in.

As a language feature reaches a large enough common usage status, it becomes canonical in its usage. For me, this language feature has reached that point. Expect to see more of this strategically used in code going forward.
How do you emotionally deal with rejections?
Tags: discuss, career
Published: 2019-04-08 17:54:14

---
title: How do you emotionally deal with rejections? 
published: true
description: 
tags: discuss, career
---

I recently left my job to take some break and focus on studying for interviews and applying full time. I completely forgot how hurtful I feel when I get rejected by my "dream" company. It's like getting rejected by your crush. I guess the feelings are even stronger since I am putting almost 100% of my time dedicated interview preparation. 

How do you all deal with this without losing motivation? How do you keep yourself disciplined and not let it affect your determination? How do you prevent it from affecting your confidence in yourself?

I know this is an overdone topic, but I am curious about how everyone on this community deals with this. 

One way I learned is to never resist sad feelings or pretend to be strong. I try let them surface to their fullest and take their course.
What is Pomodoro?
Tags: blog, concepts, tipsandtricks, blogging
Published: 2019-04-10 16:09:18

---
title: What is Pomodoro?
published: true
tags: blog,concepts,tips-and-tricks,blogging
canonical_url: https://itscoderslife.wordpress.com/2019/04/08/what-is-pomodoro/
---

Pomodoro is basically a time management technique used to accomplish your day’s work by dividing and executing them into smaller chunks with regular breaks.

### Underlying principles

Steps involved in the technique:

1. List out all the tasks to be done
2. Set the timer to 25 minutes – set alarm to ring after 25 minutes
3. Work on the task till the timer rings
4. Stop the work and update the task list
5. Take a short break say 5 minutes
6. Repeat from step 2 – This concludes 1 chunk of pomodoro
7. After every 4 chunks take a long break say 30 minutes

![pomodoro](https://itscoderslife.files.wordpress.com/2019/04/pomodoro.jpg?w=331&h=443)

The rationale behind this technique is to plan, track, record, process and visualize your work.

While planning – tasks are prioritized by recording them in the task list. This enables users to estimate the effort tasks require – How many chunks of pomodoro is required for this task.

One way to use this technique efficiently is any time remaining in the chunk is devoted to learning. Short breaks are taken to avoid burnout. A short rest separates consecutive chunks. Four chunks form a set. A longer rest is taken between sets.

A pomodoro chunk is indivisible; when interrupted during the chunk. If interrupted either the activity must be recorded and postponed (using the inform – negotiate – schedule – call back strategy) or the chunk must be abandoned.

1. **Inform** the other person you’re working on something right now
2. **Negotiate** a time when you can get back
3. **Schedule** follow-up immediately
4. **Call back** when your pomodoro chunk is complete

A goal of the technique is to focus and flow reducing the impact of internal and external interruptions.

_Pomodoro is an italian word for Tomato._
Editor choices through the years?
Tags: editors, tools, discuss
Published: 2019-04-08 17:27:45

---
title: Editor choices through the years?
published: true
description: 
tags: editors, tools, discuss
---

First DEV post in a really (*...really!*) long time, but that's a story on its own for another time.

During my morning skim of Twitter, I came across a string of tweets from various developers regarding their progression over the years from editor to editor. Always interesting to see where people's travels have taken them, so let's give it a go:

// begin late-80s

1. Atari DOS line editor
2. Microsoft DOS Editor
3. Microsoft Notepad, Jove (university studies)
4. Borland Turbo C++ IDE
5. Arachnophilia (summer jobs, learning the web)
6. Allaire/Macromedia ColdFusion Studio (first "real world" job)
7. BlueFish
8. NetBeans, gedit (brief, soul-sucking stint with legacy Java support)
9. ActiveState Komodo Edit (the PHP years)
10. Microsoft VS Code, xed, Remarkable (operations and "applied" IT)

// end present day
My Favorite Coding Analogies
Tags: bestofdev
Published: 2019-04-08 17:19:31

---
title: My Favorite Coding Analogies
published: true
description: 
tags: bestofdev
cover_image: https://cl.ly/82d7a4c901c6/download/Image%202019-04-08%20at%201.18.42%20PM.png
---

I really admire people who are able to encompass metaphors in their teaching (and those who do it so effortlessly in everyday conversation!). So many of my aha! moments are sparked by a good analogy, so I thought I'd share a few DEV posts that really do this really well:


{% link https://dev.to/danlebrero/kubernetes-explained-in-pictures-the-theme-park-analogy-3d99 %}

{% link https://dev.to/aspittel/thank-u-next-an-introduction-to-linked-lists-4pph %}

{% link https://dev.to/kbk0125/amazon-web-services-aws-explained-by-operating-abrewery-2j0 %}

{% link https://dev.to/victoria/knapsack-problem-algorithms-for-my-real-life-carry-on-knapsack-33jj %}

{% link https://dev.to/geekgalgroks/skeletons-and-caboodles---how-i-explain-websites-4ghl %}

{% link https://dev.to/presto412/visualising-the-javascript-event-loop-with-a-pizza-restaurant-analogy-47a8 %}

🍕🎢🎤🎒🍻🍕
Keep your iOS projects healthy
Tags: ios, swift, objc, xcode
Published: 2019-04-08 17:18:59

---
title: Keep your iOS projects healthy
published: true
description: 
tags: ios,swift,obj-c,xcode
---
Keeping your code and projects is the best thing you can do to your projects and here’s how to do it your iOS projects written in swift.

Following style guide
------------------

There are several style guide for writing swift, and every team member should follow them well. Such as

1. [Raywinderlich style guide](https://github.com/raywenderlich/swift-style-guide)
2. [Linkedin style guide](https://github.com/linkedin/swift-style-guide)
2. [Google style guide](https://google.github.io/swift/)

Using tools
---------

In reality not everyone does it properly so there should be a way to enforce it amongst team members, a way of doing is manual code review which is very time-consuming and code review should happen in logic level not how a developer should declare variable or indentation, we could simple automate these things and invest our time more on harder things.

1. [Swiftlint](https://github.com/realm/SwiftLint) will excellently lint the swift codes. 
2. You can also add linting for storyboard and xib files with [xiblint](https://github.com/lyft/xiblint)
3. It is also preferred to have a one way of formatting code like how many indents, way declaring variable etc and this is where [Swiftformat](https://github.com/nicklockwood/SwiftFormat) shines really well.
4. To Eliminate Unused Swift Code go for [periphery](https://github.com/peripheryapp/periphery)
5. Having a static analysis of your codes is a good way to have fewer bugs, [Infer](http://fbinfer.com) is a static analysis tool that produces a list of potential bugs.
6. You can also automate using these tools on [Continuous Integration](https://www.thoughtworks.com/continuous-integration) level using danger. You can use Danger to codify your teams’ norms. Leaving humans to think about harder problems. And [danger](https://danger.systems/ruby/) supports Circle, Travis, Jenkins, Buildkite, BuddyBuild, Semaphore, TeamCity, Xcode Bots, Drone, Surf and Bitrise.


Organising Xcode projects
---------

In older versions of Xcode you could only group and in beneath there was no folder structure so basically every file used to stay in one single folder by default and this is messy!

1. You can use [Synx](https://github.com/venmo/synx), a command line tool to create folder according to Xcode group.
2. And sometimes your Xcode project might be corrupted and broken and you can get back your Xcode project based on folder structure using [XcodeGen](https://github.com/yonaskolb/XcodeGen), A Swift command line tool for generating your Xcode project.