teleren/devto huggingface dataset:
Increasing Your Linkedin Engagement 30x times
Tags: linkedin, adobe, profile, watercooler
Published: 2020-11-29 05:05:55

---
title: Increasing Your Linkedin Engagement 30x times
published: true
description: LinkedIn Profile Tips
tags: linkedin, adobe, profile, watercooler
cover_image: https://news.linkedin.com/etc.clientlibs/settings/wcm/designs/gandalf/clientlibs/resources/images/og-social-share-image.jpg
---

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

👋 devs,

A few weeks back I read an [article](https://business.linkedin.com/sales-solutions/sales-navigator-customer-hub/resources/build-your-sales-profile) added by [Adobe](https://www.adobe.com/careers.html) to optimize your [LinkedIn](https://www.linkedin.com/in/goyalsaloni95/) profile. The steps looked pretty simple and I had the time, so I went ahead and did it without thinking much of it.

But it really does increase throughput to your profile, which can be helpful especially if you are open for job opportunities.

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

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

The steps are - 

###1. Change Your Background Image

Use an image that best represents your industry, company, or location.

###2. Upload a Professional Photo

Sales Navigator users have a larger photo than other members to better stand out.

###3. Write a Compelling Headline

It’s the first thing people look at in your profile after your photo, and follows your name in search results.

###4. Tell Your Story in Your Summary

Use this area to tell your story, including your passion, professional background, company contribution, and add a call to action.

> There are some more tips to elevate your profile further in the article. Its a small article, do give it a read especially if are using LinkedIn to actively attract recruiters or make professional connections.

Would be happy to hear if you see some difference following these. 😊

Thanks for reading!
Sharpening Our Tools
Tags: productivity, webdev, codenewbie
Published: 2020-11-29 04:45:51


As we study and put our programming knowledge to practice, we acquire a variety of tools we use regularly. These tools help us to become more efficient developers. Although we might be busy with several projects or learning new tech, we also need to maintain and sharpen the tools we use. 

We might have a favorite code editor or a particular method of committing code on GitHub. We might also have some go-to debugging techniques or particular array methods that we are most comfortable using. Let’s take these tools to the next level to help us grow as developers. 

## Here’s a simple plan to get started:

1. Identify the tools we want to sharpen. Make a list of tools or add some questions about those tools for further exploration.

2. Find some resources to learn more about these tools. These can be YouTube videos, blog posts, courses, or the documentation.

3. Determine a block of time to focus on this. Decide if this is a daily activity for 15 minutes a day or a weekly practice for 2 hours on the weekends, for example. 

### Some examples of how to put this plan into action

- Open up a repository on GitHub and take a look at all the possible features and settings. Make changes and look up any features that seem unclear.

- Watch a video and test out different ways to utilize Chrome or Firefox Developer Tools.

- Learn new code editor keyboard shortcuts.

This is a chance to explore and tinker with the tools we use. Carrying on this habit helps us use tools to an advanced level. 

Is this something you already do? Or are you trying to implement something like this on a regular basis? Please share any experiences, ideas, questions, or comments! 

<span>Photo by <a href="https://unsplash.com/@codestorm?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Safar Safarov</a> on <a href="https://unsplash.com/s/photos/laptop?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Awesome box stairs outline 
Published: 2020-11-29 04:36:55

Always wanted to create a cool design on your card or box with css, here one a multiple color outline of a box.
#box {

    line-height: 30px;

   
    box-shadow:
      inset #0cab9c 0 0 0 5px, 
      inset #059c8e 0 0 0 1px, 
      inset #0cab9c 0 0 0 10px, 
      inset #1fbdae 0 0 0 11px, 
      inset #8ce9ff 0 0 0 16px, 
      inset #48e4d6 0 0 0 17px, 
      inset #bfecf7 0 0 0 21px, 
      inset #48e4d6 0 0 0 22px
}
TOGAF 9.2 components
Tags: togaf, enterprisearchitect, ea
Published: 2020-11-29 04:00:11

---
title: TOGAF 9.2 components
published: true
description: 
tags: TOGAF, EnterpriseArchitect, EA
//cover_image: https://direct_url_to_image.jpg
---

For clearing TOGAF certification, there are two key topics.
1. Architecture Development Method(ADM)
2. TOGAF Components.

I have published article on TOGAF ADM, You can refer [here](https://dev.to/chanduthedev/togaf-9-2-architecture-development-method-adm-in-one-page-2387) if not read earlier. 
If you memorize these two topics, I am sure you will clear TOGAF exam very easily.
You can refer in the below picture all about TOGAF components in detail.

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

Get the original image from [here](https://drive.google.com/file/d/16b0ytSMP2s8pHv-qJ9QpSQJYVb8sfV-V/view?usp=sharing).
Solving LeetCode - Reverse Integer
Published: 2020-11-29 03:58:19

# Question

Given a 32-bit signed integer, reverse digits of an integer.

Example 1:
```
Input: x = 123
Output: 321
```
Example 2:
```
Input: x = -123
Output: -321
```
Example 3:
```
Input: x = 120
Output: 21
```
Example 4:
```
Input: x = 0
Output: 0
```
Constraints:

* -231 <= x <= 231 - 1

## Let's Go!

Solve by using [PREP](https://dev.to/phariale/prep-technique-for-algorithms-in-js-5b0g).
* **P** - One parameter. A number _x_
* **R** - Return the reverse of the number
* **E** - Examples provided by question. (See Above)
* **P** - See Below

```javascript
var reverse = function(x) {
    const reversed = x
        .toString()
        .split('')
        .reverse()
        .join('');

    return parseInt(reversed) * Math.sign(x);
};

```

Translate into code...

```javascript
var reverse = function(x) {
    // Convert x from number to string
    // Split string into array of elements
    // Apply reverse method
    // Join String
    const reversed = x
        .toString()
        .split('')
        .reverse()
        .join('');
    
    // Convert string to number & multiple by the sign of x
    // Return the above
    return parseInt(reversed) * Math.sign(x);
};

```

### Conclusion

& Remember... Happy coding, friends! =)

#### Sources
* https://leetcode.com/problems/reverse-integer/submissions/
My latest javascript / tech / web development newsletter is out!
Tags: javascript, webdev, tech
Published: 2020-11-29 03:45:31

The latest instalment of my newsletter is out:

Web design in Japan, PWAs in gaming, urban planning, workflow builders, history of version control, cool APIs and tools, curl infra, edge handlers, shell history, Python community, cool podcasts...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-28-11-2020
UI Command Pattern : Part II
Tags: xamarin, csharp, mobile, dotnet
Published: 2020-11-29 03:15:40

This post is a continuation on the [UI Command Pattern : Part I](https://dev.to/keozdev/ui-command-pattern-268n) where I go through different approaches for `ICommand` implementation with pros and cons.

I left out [MvvmCross](https://www.mvvmcross.com/) Command implementation in that post but now I have updated the sample application with `MvxAsyncCommand`. You can follow along with the same project from here: https://github.com/keozx/CleanRx/tree/master/src/samples/Commands

### Comparison

Since my winner from last post is [ReactiveCommand](https://dev.to/keozdev/ui-command-pattern-268n#option-4) I present a framework command comparison including `ReactiveCommand`, `AsyncCommand` and `MvxAsyncCommand` given that to my surprise, MvvmCross has a very nice implementation of the Command, though still lacking of course the great versatility of `ReactiveCommand` but nonetheless a good option.

Feature | Async | MvxAsync | Reactive 
------------------- | --------- | --- | --- 
Executes a simple bindable Action      | ✔️ | ✔️ | ✔️ \<T\>
Create from Task\<T\> (not async void) | ✔️ | ✔️ | ✔️ 
Retrieve unhandled exceptions          | ✔️ | ❌ | ✔️ 
Observes boolean changes for "CanExecute" behavior through INPC (not RaiseCanExecute)                  | ❌ | ❌ | ✔️ *WhenAnyValue
Observes IObservable ticks for "CanExecute" behavior | ❌| ❌ | ✔️ 
Guards against double execution (double tap) | ❌ | ✔️ | ✔️  
Returns a \<T\> result at end of execution | ❌ | ❌ | ✔️ 
Accessible "CanExecute" state | ❌ | ❌ | ✔️ 
Accessible "IsExecuting" state | ❌ | ❌ | ✔️ 
Subscribe to Completion and executes handler for \<T\> result | ❌ | ❌ | ❌ | ✔️ 

### Cons 
The biggest downside of `MvxCommand` is the lack of handling errors like `AsyncCommand` does, so if we want to handle unhandled exceptions we have to wrap it ourselves.

### Pros

There is an overload constructor that takes a `CancellationToken` for the function being executed so you can cancel the task at a later point, this token is autogenerated so to cancel it from a button for example I think is not straightforward, still, this is not as interesting as the way `ReactiveCommand` handles cancellation in a functional state pulling way.

One of the great things of `MvxCommand` and `MvxAsyncCommand` is the ability to pass a boolean on instantiation, to indicate whether or not concurrent execution is allowed for a given command, this mimics `ReactiveCommand` double tap protection. Unfortunately that's all the advantage we have over `AsyncCommand`.

### Conclusion

The ICommand implementation still has a winner in `ReactiveCommand` even though all the features are only accessible through the base and not only the interface, I think all is moving away from ICommand anyway, just look at how things are going in MAUI + MVU for example, is time for new UI paradigms and more efficient patterns. This is an exciting time for innovation, in the meantime let's make it all reactive!
ความต่างโครงสร้าง type ของ Haskell กับ Elixir
Tags: haskell, elixir
Published: 2020-11-29 02:31:09

Haskell เป็น static type ส่วน Elixir เป็น dynamic type แต่ไม่ได้เรื่องนี้เท่านั้น ยังมีเรื่องแนวคิดของโครงสร้าง type เรื่องการสร้างค่าของ type (data constructor) อีกที่ต่างกัน

* Haskell นั้นให้เรากำหนด type ใหม่ขึ้นมาได้ โดยให้เราออกแบบ data constructor เองได้ ว่า data ของ type เป็นแบบไหนได้บ้าง เช่น

```haskell
data Color = Red | Green | Blue
```

จะเห็นว่า ออกแบบ data constructor ได้เองเลย ถ้า data type ที่ซับซ้อนกว่านั้นก็อาศัยกลไลของ Sum Type และ Product Type สร้าง data constructor แบบที่ต้องการขึ้นมา

ขอดีคือออกแบบเองได้เลย ข้อเสียคือ ในเมื่อโครงสร้างของ data constructor มันไม่เหมือนกัน ดังนั้นก็ต้องเขียนโค้ดเองเพื่อจัดการ การแสดงผลของ data type

Haskell มี class Show ให้สามารถ derive ได้ก็จริง แต่ก็ไม่ทุกเคสที่จะสามารถ generate code instance Show ให้ได้ อย่าง data Color ข้างบนง่ายๆแบบนั้น ก็ deriving Show แบบนี้ได้เลย

```haskell
data Color = Red | Green | Blue deriving (Show)
```

คนใช้งานก็ต้องมานั่งศึกษาเองแต่ละ type ว่าจะสร้างค่ายังไง บาง library ที่ type ซับซ้อน ก็จะมี function builder ช่วยให้อีกที

* Elixir ส่วนของ Elixir นั้น กำหนดโครงสร้างข้อมูลพื้นฐานมาให้เช่น number, keyword, string, list, map 

การสร้าง type ขึ้นมาเองนั้นจริงๆแล้วไม่ได้กำหนดแบบ static แบบ Haskell แต่เป็นการเอา type พื้นฐานมากำหนดโครงสร้าง และมีการใช้ defstruct ที่โครงสร้างด้านในคือ map แต่ว่า compiler จะช่วยเช็ค key sets ให้เพราะ struct เป็นโครงสร้างที่ต้องระบุ key ที่รู้ล่วงหน้า เช่น

```elixir
defmodule Employee do
  defstruct [:name, :age, :department]
end
```

ข้อเสียก็คือเราสร้าง static type name เองไม่ได้ แต่ส่วนใหญ่แก้ด้วยการเขียน type spec เพื่อเป็น document และใช้ static analysis tool ช่วยเช็คได้บ้าง

ข้อดีคือข้อมูลมันแสดงผลออกมาได้อยู่แล้วเพราะมันเป็นแค่ ข้อมูลพื้นฐานที่ประกอบกัน และ คนใช้งานก็สามารถสร้างข้อมูลออกมาได้เสมอ ไม่ต้องเรียนรู้แยกไปในแต่ละ type แบบ Haskell
How to get the highest and lowest number from an array in JavaScript?
Tags: javascript
Published: 2020-11-29 00:00:00

---
  title: How to get the highest and lowest number from an array in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Nov 29 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/lowest-highest-number-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-a5e986f7e469b51c95326976134808c9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/lowest-highest-number-array-javascript)
  
To get the highest or lowest number from an array in JavaScript, you can use the `Math.max()` or the `Math.min()` methods then spread the elements from the array to these methods using the spread operator (`...`).

Consider this array of numbers,

```js
// number array
const numberArr = [23, 122, 1, 23, 4, 56];
```

Now let's use the `Math.max()` and `Math.min()` methods and use the spread operator on the array like this,

```js
// number array
const numberArr = [23, 122, 1, 23, 4, 56];

// get highest number
const highest = Math.max(...numberArr);

// get lowest number
const lowest = Math.min(...numberArr);

console.log("Highest Number: " + highest); // Highest Number: 122

console.log("Lowest Number: " + lowest); // Lowest Number: 1
```

- Both the methods `Math.max()` and `Math.min()` returns a number.

See the above example live in [JSBin](https://jsbin.com/feyufimiti/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
ReactDOM.render()
Tags: react, beginners, codenewbie, todayilearned
Published: 2020-11-28 23:45:30

Hello Fellow Codenewbies 👋

One functionality of ReactDOM is to **render** React elements to the web page, which can be achieved with [ReactDOM.render()](https://reactjs.org/docs/react-dom.html#render) method.

## Syntax

```javascript
ReactDOM.render(element, container[, callback])
``` 
We can see it this way:

```bash
ReactDOM.render(WHAT to render, WHERE to render[, callback if any])
``` 

## Prerequisite
Before we dive in, in this post, we will use both React, and ReactDOM [CDN](https://reactjs.org/docs/cdn-links.html) links in an HTML file to run the React app instead of installing the `create-react-app`. This way, you can see and understand how `react-dom` dependency works under the hood.

```html
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
``` 
We also need [Babel](https://babeljs.io/docs/en/#jsx-and-react) to convert the JSX syntax.

```html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
``` 

## `ReactDOM.render()` In Action
Let's create a `<div>` with `id="root"` in an `index.html` file.

```html
<html>
    <head>
        ...
    </head>
    <body>
        <div id="root"></div>
        <!-- CDN Links -->
        ...
    </body>
</html>
``` 
Anything between the opening and the closing `div` tag is **where** React will render what we've created.
The `<div id="root"></div>` is *the container* for our entire application.

Now we will render an `h1`.
Since we need Babel to translate the JSX, we will run the `ReactDOM.render()` in `<script type="text/babel">`.

```html
<script type="text/babel">
  ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
</script>
``` 

📖 How to read:
Render `h1` in the `<div>` with `id="root"`.

As you can see, we put the HTML element of `h1` in the middle of Javascript's code as a parameter. That entire line of code is called **JSX**.
We will talk more about JSX in the next post.

## Conclusion
- `ReactDOM.render()` is a React method to render a React app to the web page.
- `ReactDOM.render()` takes at least 2 parameters:
 1. element (**what** we want to render)
 2. container (**where** we want to render)

---

I provide here the complete code.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReactDOM.render()</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Babel CDN Link -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <!-- React & ReactDOM CDN Links -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Render to page -->
    <script type="text/babel">
      ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
    </script>
  </body>
</html>
```
Scocial Group for Artists & coders
Tags: art, coding, uiweekly, webdesign
Published: 2020-11-28 22:57:06

Group dedicated to bring artist and coders together to create random projects, open source, UI/UX designs, animation etc... If you have any Animations, Svg or logo Designs you want feedback on, upload them to the group or come join to create a community...
https://www.deviantart.com/art4coding-official
How does React update the DOM?
Tags: react, javascript, beginners
Published: 2020-11-28 22:23:44

As I continue learning about React and working my way through this series on React, I find myself falling in love with it. In this blog, I would like to touch on React's virtual DOM.

#### What is the DOM?
According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), the Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.
...
The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

#### React's Virtual DOM

React uses [virtual DOM(s)](https://reactjs.org/docs/faq-internals.html). A virtual DOM simply is a DOM representation in Javascript.

The `render()` method does not immediately render to the real DOM. 

Render is in fact, more a suggestion of what the HTML should look like, but `render()` can very well be called and be the same as what was already displayed.

Upon `render()` being called, React compares virtual DOMs. It has an old virtual DOM and a re-rendered or a future virtual DOM. By comparing the "old" VDOM with the "future" VDOM, React can determine if there are any differences. If it detects differences, it reaches out to the real DOM and updates it--but not entirely!--it only changes the real DOM in the places where differences were detected.

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

This is important because as you might know, accessing the DOM is really slow. Specifically, every time the DOM changes, the browser needs to recalculate the CSS, layout, and repaint the page. This takes time and is something you want to do as little as possible.

###Recap
React's virtual DOM means speed in most cases and it helps alleviate us from having to think about when to render changes to the DOM and focus more on writing code creatively and solving problems.

Happy Coding!
OSD600 - Lab8 Did you say test?
Published: 2020-11-28 22:13:55

This week in OSD600 (Open Source development) at Seneca, [Lab8](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-8) required us to set up testing framework for our [Link Checker](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails), write the test and include a test for 200 and 404 Responses for a given URL. We had to add code coverage analysis and then merge the testing into our project. Then we had to add continuous integration and add a test to someone else's project.  

Since my project is in node.js  I needed to do the necessary reading to figure out how I was going to create this test.  I created an index.test.js file that runs the test and then added code that supported the test in my [Link Checker](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/blob/master/index.js).  After I ran the test I saved, commit my changes to the [testing](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/tree/Testing) branch and created the [PR](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/pull/47) and [merged](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/actions) testing.

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

The next thing I had to do was supposed to be simple.  I had a file path issue when I tried to create the PR to Test my CI. As a student, our knowledge only goes so far. I tried to move the packages.json and that didn't work.  I consulted some friends in and out of the class.  Seemed like I ran in full circle ending up back with the same issue. I tried so many things that I have a very long list of commits to the branch. After 4 hours of not being able to figure out what to do, our awesome professor came to my rescue.  Something I need to pay attention to when creating a project.  File path is important and obviously I need more practice.  After I created the node.js.yml and made the [PR](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/pull/40), the file path was fixed and [merged](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/commit/a4294973bb6a57056a7dc88923db0509e780d4f6) to my project.

I will admit, I was a little hesitant creating a test for my friend's [Link Checker](Joey
https://github.com/strawberries73/OSD600-Release0.1/tree/Issue-25
).  I added more to his test and then noticed he had some minor errors.  I fixed the errors and then tested his project.  All was good so I proceeded to create the [PR](https://github.com/joey2031/OSD600-Release0.1/pull/26). My friend happy with the test and the fixes, he [merged](https://github.com/joey2031/OSD600-Release0.1/commit/a20f73c7d0b4823595fd5cc67fb3173b1d7a5062) this PR.

Now that I've learned more about testing, I feel that it is important to learn more.  I need way more practice of course and I'm sure that these mistakes I've made along the way won't be the last.  I also feel like I have barely scraped surface of the knowledge on how to use git.  When I'm finished, I will get to reading that git book I purchased!
More Inkscape Stuff 
Tags: design, webdev, webdesign, frontend
Published: 2020-11-28 22:05:14

## Getting Started

This time I was working on a new illustration for my 404 error page. I am not an artist, so my first call of action was searching for reference images online.

## Reference Image

![Reference Image](https://dev-to-uploads.s3.amazonaws.com/i/qtvqrqghytarmnpvv041.jpg)

## Intermediate Steps

![Step 1](https://dev-to-uploads.s3.amazonaws.com/i/d7gfu4lxg4dptm169jlf.png)

![Step 2](https://dev-to-uploads.s3.amazonaws.com/i/dh40tci8n4xu4epdbel8.png)

![Step 3](https://dev-to-uploads.s3.amazonaws.com/i/eeeqghp4c1ldc990awem.png)

![Step 4](https://dev-to-uploads.s3.amazonaws.com/i/g5aq8xhru5qmy38exkc4.png)

![Step 5](https://dev-to-uploads.s3.amazonaws.com/i/d1ejuiiqtd3krtnoxmjd.png)

![Step 6](https://dev-to-uploads.s3.amazonaws.com/i/ajwcovd2n9gevc59ggm4.png)

I only started to worry about colors once all shapes were created to streamline my work process.

![Step 7](https://dev-to-uploads.s3.amazonaws.com/i/k8rnq2bbcaq120xufu3e.png)

## End Result 

I combined the satellite figure with another background image I did the day prior to yesterday:

![End Result](https://dev-to-uploads.s3.amazonaws.com/i/l9ef7mvlhixvpgos96ww.PNG)

Some people might argue that there are too many small details in this figure, and I guess they might be right about that, but I still kinda like it. This is something I'll try to work on over time.

The _final_ step would be to add animations to this image of which I had a few ideas; I think the easiest effect to implement would be an infinite slow-paced floating up-and-down animation for the satellite, but this is something I will have to explore sometime later.