teleren/devto huggingface dataset:
Your portfolio is your first impression to recruiters
Tags: webdev, career, motivat
Published: 2020-11-22 08:55:20

As a young developper myself, I need to find internships and get job offers, and the key to that isn't a great resume or a nice cover letter, but an **attractive portfolio**. *Actually a nice resume matters as well, but it isn't the first thing potential recruiters will see*.

# Stand out from the crowd

Every day, there are more and more developpers seeking a job, and even if we are more than wanted and needed by several companies, it doesn't mean everyone will get the job they want. It sounds like an advice from an old '80s motivational movie "stand out, be yourself, be creative", and also very mainstream, but that's truly the key to impress a recruiter.

I've seen a lot of my pairs on LinkedIn posting their flat colourless resume without any presentation of their previous work. Let's see this from a recruiter point of view: how would you sort hundreds of applications for a few positions, given their resume and/or portfolio? The ones that catch the eyes will often go first, the others will go last.

# Don't be afraid to make something unconventional

As I said before, we, as developpers, are more than wanted, and the process of recruitment can be different. Let me explain myself: very often the conventional steps of sending your resume along with a cover letter, then getting an interview, maybe another afterward, can be shortened into getting in touch with the recruiter, sending them your best portfolio and a few lines to tell them you are looking for a position as a [insert job title here], and you'll have on head start on any other applicants.

*Nota bene*: it won't work with *every* recruiter and job offer, it's a general advice and you should always follow your gut.

Thus, you should
* add colors
* CSS effects, animations (not too much otherwise you'll create the opposite effect and repel the recruiter(s))
* use GIF to showcase your work (so that recruiters won't have to follow 10 links to know what your project is about)
* [any idea you always wanted to try here]

# Examples

*let me know in the comments if you want to be added here to provide newcommers with examples*

## Unconventional (great)

* [https://superfola.github.io/](https://superfola.github.io/) *tip: try a Konami code on it, works also on mobile (replace `B`, `A` by double tapping)*

## Conventional (borring)

* [resume](https://superfola.github.io/CV_US_format.html)

------

I always loved to help my friends when their projects didn't work as intended, or when they didn't know how to do something, and I though that this kind of experience (i.e. how to attract people with your work) was lacking on my dev.to account.

Hope it helps!
Important HTML tags (part 2) 💻🖥🖱
Tags: html, tutorial, webdev
Published: 2020-11-22 08:54:18

Hello all, here you have part two of Important HTML Tags. If you have not checked the first part yet, I invite you to do it [here](https://dev.to/johncornea/important-html-tags-part-1-i53). 🧡

## What is HTML and why do we need it?

HTML (Hypertext Markup Language) is a standard markup language used to build web pages. You can define the structure of the web page with HTML.

This article will cover the other 5 important HTML tags that are very important and every Developer should know.

## 1️⃣ HTML `<noscript>` tag

The HTML `<noscript>` tag renders the content inside this tag, only when the browser has the JavaScript is disabled.

```
<noscript style="color:orange;"><h2>JavaScript is awesome!</h2></noscript>
```

In case of failure this tag provides a fallback option for the components that will stop working in case where JavaScript is disabled.

## 2️⃣ HTML `<figure>` tag

This HTML tag allows us to mark up a photo.

The <figure> tag can contain also a secondary tag <figcaption>.

```
<figure><img src="https://i.imgur.com/RONOgLf.jpg" alt="JavaScript" style="width:100%">
  <figcaption style="color:orange;">Fig.1 - OPP Programming</figcaption>
</figure>
``` 

## 3️⃣ `Contenteditable` attribute

This HTML attribute tells us whether the content of an element is editable or not.

```
<p contenteditable="true" style="color:orange;">You can edit this paragraph.</p>
```

## 4️⃣ HTML `<acronym>` tag

This tag defines an explanation of a group of words, for example HTML. When you hover the mouse pointer over the text with the `<acronym>` tag active, a small box will appear with the text that you’ve written within the title tag.

```
<acronym title="HyperText Markup Language" style="color:orange;"> HTML</acronym>
```

## 5️⃣ HTML `<ins>` and `<del>` tags

As the name says, the tags `<ins>` shows what has been added to the document with a horizontal underline and `<del>` shows what has been removed from the document with a strikethrough.

```
JavaScript is a <del style="color:orange;">boring</del> <ins style="color:lightblue;">AWESOME</ins> programming language.
```


Thanks for reading folks! 🧡
Day 15 of 100 - Exercise Log MERN stack application
Tags: react, javascript, node, 100daysofcode
Published: 2020-11-22 08:34:47

*Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my twitter [@jwhubert91](www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [link](https://github.com/jwhubert91/100daysofreact/tree/master/day-15-mern-exercise-tracker)

Just a short post today.

I followed Beau Carnes' wonderful, detailed MERN stack Youtube tutorial to create a functioning CRUD application with some basic user management and the ability to log exercises.

This was a great way to practice React, the axios API, routing with Express, and basic Mongoose functionality.

No deploy today because all of the routes and axios calls use `localhost` rather than `__dirname` for brevity but this was a fun one.

Also I officially have a new favorite npm package- the react-datepicker package which is a component that creates a date picker and returns a date.

Here's the Youtube link to the tutorial: [link](https://www.youtube.com/watch?v=7CqJlxBYj-M&ab_channel=freeCodeCamp.org)
#PureCSS - Responsive The Queen's Gambit
Tags: codepen, purecss, css
Published: 2020-11-22 08:22:43

---
title: #PureCSS - Responsive The Queen's Gambit
published: true
tags: codepen, purecss, css
---

<p>Pure CSS Responsive The Queen's Gambit</p>

<p>Design source  - <a href="https://dribbble.com/shots/14571164-Queen-s-Gambit/" target="_blank">https://dribbble.com/shots/14571164-Queen-s-Gambit/</a></p>

{% codepen https://codepen.io/AsyrafHussin/pen/wvWLRpO %}
💄 How to use Microsoft Fluent UI Icons on your website?
Tags: ux, html, react, design
Published: 2020-11-22 07:56:08

## 👋 Hey Developers!

I really love the icons used and provided by Microsoft in their products. And I always wish to use them in my projects. But it is pretty hard to find a way to use them. This post will help you to use them in your project!

It is pretty easy to set this up on both static and React apps.

## 🌐 Setting up on a static site

If you want to use it in your static site, you can include **Fabric UI Core's CDN** in your `<head>` like this 👇.

```html
<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>
```
And once you have added that, it's as easy as doing this 👇.

```html
<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606026997034/f9UKn8EPv.png)

You can refer [this site](https://developer.microsoft.com/en-us/fluentui?fabricVer=7#/styles/web/icons#available-icons) and use any icon you want. Just copy the name and paste it in the place of `Mail`.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606026918227/xuvUJikeq.png)

```html
<i class="ms-Icon ms-Icon--Settings" aria-hidden="true"></i>
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606026971701/czvomW1mm.png)

## ⚛ Setting up in a React App

There are **2 ways** you can achieve this. 1st one is to include the CDN in the `<head>` tag in `public/index.html` and then use the `<i>` tag as we did in the static type. But I recommend the 2nd way which is better.

Install the `@fluentui/react-icons` package in your app using `npm` or `yarn` as per your preference.

```
npm i @fluentui/react-icons
## OR
yarn add @fluentui/react-icons
```

Once you do that you can easily import the icon components and use them in your app just like this one 👇

```jsx
import { MailIcon, SettingsIcon } from '@fluentui/react-icons';

function App() {
  return (
    <div>
      <MailIcon /> { /* Without any element */ }
      <button>
        <SettingsIcon /> { /* Within any element */ }
      </button>
    </div>
  )
};

export default App;
```
As I said you can refer [this site](https://developer.microsoft.com/en-us/fluentui?fabricVer=7#/styles/web/icons#available-icons) and copy the icon name and just append **Icon** after it.

Example: `MailIcon`, `FeedbackIcon`, etc.

### I hope this post helped you achieve your goal. Please give it a like 💙 if you liked it. And share it if you want.  [Learn more about Fluent UI](https://developer.microsoft.com/en-us/fluentui) 

Good luck 👍 and thanks for reading!
git kraken speed improvement for mac os big sur users
Tags: git
Published: 2020-11-22 07:50:18

This article is for mac os big sur



The official twitter account has posted a temporary workaround.
This code is a command that will erase some signatures.
```bash
codesign --remove-signature /Applications/GitKraken.app/Contents/Frameworks/GitKraken\ Helper\ \(Renderer\).app
```

By hitting this command, the speed of git kraken is now similar to that of catarina.

Reference
https://twitter.com/gitkraken/status/1329443370385743877?s=21
Creating Chaos and a Giveaway ⚒ 🎁
Tags: kubernetes, sre, tutorial, chaosengineering
Published: 2020-11-22 07:04:50

![Alt text of image](https://media.giphy.com/media/FnatKdwxRxpVC/giphy.gif)
<figcaption>Introducing Chaos</figcaption>

>*"Chaos engineering is the discipline of experimenting on a software system in production in order to build confidence in the system's capability to withstand turbulent and unexpected conditions."*

------------------------------

I think when most of us hear 'Chaos' we automatically get a little anxious. The idea of presenting failure into anything let alone a system can sound scary, however, by running these controlled experiments we can gain insight and reduce disasters. This is important because inevitably a system WILL fail. 

So let's break some stuff and see how it all works! 


Below is a repo with step by step instructions to setup Kubernetes clusters and use a few different platforms to run experiments on them.

A lot of tutorials I have found around running chaos experiments with K8s skip the cluster setup bit - making this repo a good complete getting started guide if you're new to K8s and Chaos Engineering. 🙂 🎉

{% github ari-hacks/kubernetes-chaos-sandbox  %}


There are several organizations making waves in the chaos experimenting world today. I choose to learn a bit more about [Gremlin](https://www.gremlin.com/), [Litmus](https://litmuschaos.io/), and [Chaos Mesh](https://chaos-mesh.org/).

Each provides various interesting experiments and testing experiences. Gremlin is chaos engineering as a service. This is perfect if you like a good GUI and want to get up and running quickly. Litmus Chaos is a good choice if you enjoy the command line (which I do 😉 ). I had the opportunity to contribute to their project and the team is great! Chaos Mesh is similar to Litmus Chaos and they have some awesome documentation I was able to contribute to this Hacktoberfest as well. Chaos Mesh offers the option of using an interactive GUI or the command line (or both!) making it very developer friendly. 


While the purpose of Chaos experimenting is introducing failure the main goal in testing is really to fix and overcome any weaknesses found in a system. By using these tools we are making software and infrastructure more reliable and sustainable. 
 
![Alt text of image](https://media.giphy.com/media/AeUcmWquAI8tW/giphy.gif)
<figcaption>"The purpose of Chaos Engineering is NOT to 'Break Things on Purpose'. If anything it is to try and 'Fix Them on Purpose.'"</figcaption>



#### 🚨 Before you go.....

I am giving away a $12 voucher to the dev shop! Leave a comment below if interested and I'll pick someone at random this weekend to send it to! 🎁 ✌🏾
svghero: Javascript package for hero effect in SVG
Tags: opensource, javascript, html, css
Published: 2020-11-22 06:59:13

### you can get that effect by one line of code `svghero(id,title,text,width,height,x,y,scale)`


[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/za2fmp2khp1tn450c8yv.gif)](https://www.youtube.com/watch?v=n69Xqy9Q5kk)

Video links - https://www.youtube.com/watch?v=n69Xqy9Q5kk


### How to use this
- Copy and paste this code in body section of html.
  ```html
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svghero@0.2.0/example/style.css">
      <script src="https://cdn.jsdelivr.net/npm/svghero@0.2.0/cdn.js"></script>
  ```
- in `script` tag or in js file add `svghero(id,title,text,width,height,x,y,scale)`

  where 
  - id = svg group id or id of elements that want to show in details page (string)
  - title = title that show in details page (string)
  - text = text that show in details page (string)
  - width = width of new svg that show in details page (number)
  - height = height of new svg that show in details page (number)
  - x = relative position of svg in details page (number)
  - y = relative position of svg in details page (number)
  - scale = relative scale of svg in details page (number)

  example `svghero("id","title","this is text",800,400,-100,50,2)`
- And it's Done 🎉


## Documentation

- [Getting Started](https://github.com/vimalverma558/svghero)
- [Examples](https://svghero.netlify.app/example/)
- [Overview](https://github.com/vimalverma558/svghero)
- [History](#)

{% youtube n69Xqy9Q5kk %}
{% github vimalverma558/svghero %}
Ruby's Shovel Method: Digging Deeper
Tags: ruby, devjournal, tutorial, rails
Published: 2020-11-22 05:53:26

>Heads up! This is not _actually_ a deep dive 😬

With everything going on in the world, I almost forgot how fun it can be to code in Ruby! I am not being sarcastic, its _actually_ really fun!

## What kind of fun?

 Earlier, I was reviewing some code in a PR to [Bridgetown](https://github.com/bridgetownrb/bridgetown), and I came across this change:

```diff
- static_template_files << "/Gemfile"
+ static_template_files.push "/Gemfile", "/package.json"
```

Whenever I see small method changes during code review, I find it a helpful mind exercise to consider whether the method actually *needed* to be changed since there's almost always _a way_ in Ruby. More often than not, this leads me to my favorite type of Ruby: quirky, fun, and a bit magical.

You could even call it *blursed*...🤔

And if we are really being honest, blursed Ruby is my favorite type of Ruby.

## `Array#<<`

Commonly referred to as the "shovel operator", `<<` is a method in Ruby that is commonly used to push an object onto an array, but you can shovel into strings as well.

For example:

```ruby
["foo", "bar"] << "baz"
#=> ["foo", "bar", "baz"]
```

> Speaking of blursed Ruby, [check out the example code in the docs for `str << int`](https://ruby-doc.org/core-2.6/String.html#method-i-3C-3C). 

## TIL!

Today I `/re(learned|membered)/` you can chain shovels! Not that you _should_....but just in case, know that you _can_.

The following is a blursed example of just that:

![Blursed Ruby Shovel Code Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/yufpo9f1pbnp7y3flt9u.png)

[View gist](https://gist.github.com/andrewmcodes/2e4ba1d60016e065155f0509d3814234)

I realized I was grinning from ear to ear while writing this code. This code will run just fine if you paste it into IRB or Pry, emojis and all! A fun example of what you _can_ do with Ruby, if you wanted to.

## Back to code review

Just because you _can_ do it doesn't mean you should! The readability of swapping the shovel operator with the `Array#push` method is the right call in my opinion. The change got a green check of approval from me.

But, I couldn't resist sharing my blursed example. Hopefully it makes you grin as well.

As I said at the beginning: it's fun to write Ruby!

Happy coding!
Regex in Java
Tags: java
Published: 2020-11-22 05:33:54

# Introuction

Our use of Java increases with time, and because of this, we must know more needs that help us with the code and give the code less of our products, and examples of these needs
The Regular Expression or Regex
And we will talk about it in Java

The Regex is a set of specific letters that we write in order to search for a specific pattern in the input, times when it becomes a letter or two and other times to be very complicated pattern.

In general, Regex has many expressions, and when you know them, you can apply them in any language, depending on the syntax you write in.

## Examples of Regex:
\ d
This means that you are rotating any number from 0 to 9
\ w
It means that you are running a burn, whether it is an upper case, lower case, or a number
\ s
This means space
[]
This is used if you want to roll a letter or number in a specific range

Example: [a-n] This means that you only rotate the lower case letter from a to n

Ok, if I want, for example, the user, the input, enters a number from 4 to 9, but it is necessary to enter a number at least, and it is possible to enter a lot, but it is necessary to enter at least one number in the form of this + [9-4]
Thus, the regex does not have many needs that you can search for and use in the code instead of what we do.

## As an example in Java:
If I want to check the input, it has a number in the first from 1 to 5, then any letter from m to r, then any number from 2 to 4
```
Scanner scanner = new Scanner (System.in);
String input = scanner.nextLine ();
Pattern pattern = Pattern.compile ("[1-5] [m-r] [2-4]");
Matcher matcher = pattern.matcher (input);
boolean found = matcher.find ();
if (found) {
System.out.println ("Pattern found:" + input);
} else {
System.out.println ("Pattern not found.");
}
```


###### It is just a beginning in Regex
JavaScript map() method
Tags: javascript
Published: 2020-11-22 05:33:32

Today yet another great array method, following [`reduce()`](https://daily-dev-tips.com/posts/javascript-reduce-method) and [`filter()`](https://daily-dev-tips.com/posts/javascript-filter-method/), there is `map()`.

What does map especially do well?
It returns an array of specific values, let's say you only want a list of prices from your products?

Or a combined full name based on two fields?

Let me show you how map makes our lives easier for that.

## Using the Javascript map() method

Let's start by creating an array of items.

```js
const items = [
  { name: 'T-shirt plain', price: 9 },
  { name: 'T-shirt print', price: 20 },
  { name: 'Jeans', price: 30 },
  { name: 'Cap', price: 5 }
];
```

Now next we just want the prices really.

We could loop the items and push the price to a new array right?

```js
let prices = [];
items.forEach(item => {
  prices.push(item.price);
});
// [ 9, 20, 30, 5 ]
```

Success! But we needed to define an empty array and manually loop, it can just be made easier.

```js
const prices = items.map(item => {
  return item.price;
});
// [ 9, 20, 30, 5 ]
```

Ah cool! Same, but better.

As mentioned you can also use it to combine things let's say we have a list of users.

```js
const users = [
  { firstname: 'Louise', lastname: 'Belcher' },
  { firstname: 'Bob', lastname: 'Belcher' },
  { firstname: 'Tina', lastname: 'Belcher' },
  { firstname: 'Jimmy', lastname: 'Pesto' }
];
```

Now we want to get the full names:

```js
const fullnames = users.map(item => {
  return `${item.firstname} ${item.lastname}`;
});
// [ 'Louise Belcher', 'Bob Belcher', 'Tina Belcher', 'Jimmy Pesto' ]
```

I hope you learned what cool things the map() method can bring, and give you an understanding of how to use it.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
every() method explained : JS
Tags: javascript, codenewbie, 100daysofcode, webdev
Published: 2020-11-22 05:32:51

The `every()` method tests whether all elements in the array pass the test implemented by the provided function. The result of the `every()` method is a boolean. Let's see the syntax:-

```Javascript
const new = array.every(v, i, a) => {
     // return boolean
});
 
// new - the boolean that is returned
// array - the array to run the reduce function on. 
// v - the current value being processed
// i - the curret index of the value being processed
// a - the original array
```
The `every()` method can be thought of like a for loop, that is specifically for checking values. Take a look at this example:- 

```javascript
const nums = [11, 12, 13, 14];
let alBelowtwenty = true; 
for(let i = 0; I< nnums.length; i++) {
    if(allBelowTwenty) {
    allBelowTwenty = nums[i] < 20; 
   }
}
   // allBelowTwenty = true; 

```

This code results in a boolean, the results of the implemented test. Yes, it works, but there is an easier and better way to get the same result.  

Rewriting the previous function using the `every()` method. 

```javascript
const nums = [11, 12, 13, 14];
const allBelowTwenty = nums.every(value => value < 20); 

// allBelowTwenty = true; 
```
**Just See. No loop needed!**

And using the arrow function we have a nice and clean function to create the same array. Because we only use the value, we only pass that to the `map()` method. 

Now let's see another example:- 

```javascript
const nums = [11, 12, 13, 14]; 
const nums2 = [0, -1, -77, 15];

nums.every( value => value > 0 ); 
  // returns true
nums2.every( value => value > 0 ); 
  // returns false
```
The second statement returns false because not every item in the nums2 array is bigger than 0.

<hr>
**I'm done!**
Read more;-
- [map() method explained](https://rahulism.co/map-method-explained-js)
- [filter() method explained](https://rahulism.co/filter-method-explained)
-  [reduce() method explained: JS](https://rahulism.co/reduce-method-explained) 
<hr>

**Thanks For Reading.** If you have anything going on your mind comment down below.
TOGAF 9.2 Architecture Development Method(ADM) in one page
Tags: togaf, ea, enterprise, architecture
Published: 2020-11-22 05:26:31

---
title: TOGAF 9.2 Architecture Development Method(ADM) in one page
published: true
description: 
tags: TOGAF, EA, Enterprise, Architecture
//cover_image: https://direct_url_to_image.jpg
---

I have completed my TOGAF 9.2 certification part1 exam with 80% score. For TOGAF, Architecture Development Method(ADM) is the key architecture framework. After reading TOGAF documentation, I prepared completed ADM process in one page. I hope this will help others to complete TOGAF9.2 certification.
When I prepare this page, TOGAF version was 9.2 and this one page prepared basing on TOGAF 9.2 version.

![TOGAF 9.2 ADM in one page](https://dev-to-uploads.s3.amazonaws.com/i/ypgnyp2ltjxy2hw144zm.png)

Get the original image from [here](https://drive.google.com/file/d/1_okgOGMayUv219E_vnXVVaorEaJ0-rsB/view?usp=sharing).

Try to remember everything in the page and do not skip anything form this page. This will cover ~12-15 questions out of 40 questions. 

Happy Learning!!