teleren/devto huggingface dataset:
Drom - Cargo-like package manager for OCaml
Tags: ocaml, tutorial, beginners
Published: 2020-12-24 13:12:02

---
title: Drom - Cargo-like package manager for OCaml
published: true
description: New face in your OCaml workflow
tags: ["ocaml","tutorial","beginner"]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bdjssvunbli7c9efknt5.png
---

OCaml come with default package manager : `opam`. Opam work both version manager and package manager for OCaml.

OCaml had various build system like `dune` and `ocamlbuild`.

How if that `opam` and `dune` collab ? drom.

Citing from drom home page, here *Raison d'être* of drom

> It’s a tool to build and install the project, combining calls to opam and dune to create a local switch, install dependencies, build the project and its documentation.
 
TL;DR : `opam` + `dune` + `odoc` with Cargo taste.

## Install drom

Firstly, you need `opam` and OCaml installed on your device. Installing `drom` bit like installing `yarn` with `npm`.

`opam install drom`

## Create project with drom

After installing drom, to create project

``` drom new [project name]```

![drom new](https://dev-to-uploads.s3.amazonaws.com/i/bdjssvunbli7c9efknt5.png)

## Run Project

Do this on your project folder
``` drom run ```

More details about `drom` 
- [Quickstart - drom](https://ocamlpro.github.io/drom/sphinx/quickstart.html)
- [Repository](https://github.com/ocamlpro/drom)
How HTML gives us tooltips for free!
Tags: webdev, javascript, html, beginners
Published: 2020-12-24 13:11:03

---
title: How HTML gives us tooltips for free!
published: true
description: Create a tooltip, with zero dependencies, great browser support and in less than 10 charaters to impliment!
tags: webdev, javascript, html, beginners
series: Web Dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fzxr211tme6efyznesvw.png
canonical_url: https://jordanfinners.dev/blogs/how-html-gives-us-tooltips-for-free
---

# Contents 
1. [Intro](#intro)
2. [Title](#title)
4. [Example](#example)
5. [Summary](#summary)

# Intro <a name="intro"></a>

Tooltips! Aargh, I still don't know how I feel about them.
I understand they are useful, but part of me feels like there must be a better way to get that information across.

Nevertheless, we're probably going to have to implement them at some point, so let's dive in.

# Title <a name="title"></a>

You can achieve a tooltip on any HTML element very simply by setting the attribute `title`.
That's it! No NPM installs, no tricks!
The rest is browser magic.

```html
<span title="Yay, a tooltip!">ℹ️</span>
```

## Styling 

Let's get this out of the way. You can't style how the title attribute displays, it's up to the browsers.

But if styling a tooltip is a MUST. I'd argue you are probably best off not using a tooltip and getting the information across in a different way.

# Example <a name="example"></a>

Shut up and show me the code.
10 Internet points to those who get the movie reference in the tooltip!

{% jsfiddle https://jsfiddle.net/yjkb0awp/ result,html,css,js %} 

# Summary <a name="summary"></a>

In summary, you can use what browsers give you to create a tooltip. 
It will be accessible for all users as its semantic HTML.
There will be nothing faster as it is a HTML attribute.

Happy building!

What are your thoughts on tooltips? Love them or hate?
Daily Developer Jokes - Thursday, Dec 24, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-24 13:00:14

---
title: "Daily Developer Jokes - Thursday, Dec 24, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Dec%2024%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125964dfaa7.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What is React's favorite movie genre?

___A:___ Suspense
 -->
Introduction to C 
Tags: beginners, c
Published: 2020-12-24 12:55:59

What is Programming ?

Computer programming is a medium for us to communicate with computers. Just like we use 'HINDI' or 'ENGLISH' to communicate with each other , programming is a way for us to 
deliver our instructions to the computer.


What is C ?

C is a programming language.
C is one of the oldest and finest programming language.
C was developed by Dennis Ritchie at AT & T's Bell Labs , USA in 1972.


Uses Of C 

C language is used to perform a wide variety of systems. Some of the uses of c are as follows :
• Major part of windows , linux and other operating systems are written in c.
• C is used to write driver program for devices like Tables , Printers etc.
• C language is used toprogram embedded systems whether programs need to run faster in limited memory.
• C is used to develop games , an area where latency is very important .i.e. computer has 
to react quickly on user input.
Top 6 Actionable Website Design Optimisation Tips
Tags: design, beginners, productivity, webdev
Published: 2020-12-24 12:50:38

Are you trying to optimise your website's design?

Maybe you're trying to make your website look more vibrant on a phone but don't know how.

I'm a web developer and designer myself, and I've recently been diving deeper into the different techniques to optimise your site's design for mobile.

Want to know what they are? Let's dive right in...

## Compress and Minify your assets

Image compression is absolutely essential for when it comes to the web, if your images don't load within a reasonable amount of time you'll lose customers as soon as they land on your website.

What can you do about this?

There's tools available, such as [Tiny PNG](https://tinypng.com/), but beyond this...

Please...

Make sure that you're optimising your image's resolution as well for the page that your images are on, for example:

Say you've got a website, and your site's container is 1140px wide, there's no point having an image resolution that's 1920px wide.

This is not only going to slow your page speed down, but did you know that the [Speed Update](https://searchengineland.com/google-speed-update-page-speed-will-become-ranking-factor-mobile-search-289904) that Google released back in 2018 has played a huge part in how your site ranks based on page speed!

## Wait... didn't you say 6 tips?

**I sure did,** and I don't really want to repeat myself twice, so that's why I've already put together an article on this that you might be interested in reading...

Check it out: [6 Actionable Responsive Website Design Optimisation Tips](https://domain-monitor.io/blog/responsive-website-design-optimisation-tips)
How to Create an Array Containing 1 to N in JavaScript
Published: 2020-12-24 12:50:38

If you have to create an array that starts at **1** and ends at **1000**, I'll bet $20 that you're not going to type in all the numbers manually.

## But how would you create such an enormous array?

### Using the `For Loop`

Let's begin with one of the most basic method of JavaScript. Almost everyone I know that knows JavaScript learned about the `for loop` at the very beginning of their JS learning path. So I'm assuming you're familiar with it all too well.

Let's see this in action:

```javascript
const bigArray = [];

for (let i = 0; i < 1000; i++) {
  bigArray[i] = i + 1;
}

console.log(bigArray);
// An array starting at 1 that ends at 1000
```

* Here `i` starts at **0** and ends at **999**, this gives the array a length of 1000.
* For each index of the array, we store **that-index** + **1** to it. Because the specification of this array tells us to return an array beginning at 1.
* If we had not added the 1 with every item of the array, we'd have end up with an array beginning at **0** and ending at **999**.

### Using the `Array.from` Method

We can return the same array we created with `for loop` in a much easier way using the `Array.from` method.

Let's see this in action:

```javascript
const numbers = Array.from(
    {length: 1000},
    (item, index) => item = index + 1
);

console.log(numbers);
// we get the same result!
```

What did we do here?

> The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object.

* If we pass anything iterable to `Array.from` it'd return us an array.
* Remember that after everything array is an object in JavaScript and it have some built in property to it.
* So we destructured the length property out of a newly created array and set its value to 1000.
* The `Array.from` has a built in `map function` to it.
* We iterate over the array of 1000 items with the `map function` and pass in the **current item** and the **current index**.
* Finally we set the **index + 1** value to the current item.

That's how we can easily get back an array beginning at a certain number and ending at another.

---

[Create an Array of Months with JavaScript](https://dev.to/shafiemoji/create-an-array-of-months-with-javascript-2cpj)

[Format Date and Time with JavaScript](https://dev.to/shafiemoji/format-date-and-time-with-javascript-13hf)
The Ultimate CSS Colors Tutorial - Codecademy PRO version
Tags: webdev, beginners, tutorial, css
Published: 2020-12-24 12:48:22

**TL;DR:** I completed a **CSS Colors** course in **Getting More Advanced with Design** module on Codecademy. This is a part of the **Web Development Career Path**.

You can find the video on YouTube below ⬇️
{% youtube ntLsOXRVF_k %}

*If you like the video, don't forget to smash that like icon* 👍 *and subscribe* ❤️*. It will help a lot! Thanks!* 🙏



Chapters:
🔗 [0:00](https://www.youtube.com/watch?v=ntLsOXRVF_k) Intro
🔗 [0:30](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=30s) Introduction to Color
🔗 [2:25](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=145s) Foreground vs Background
🔗 [5:15](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=315s) Hexadecimal
🔗 [11:45](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=705s) RGB Colors
🔗 [13:47](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=827s) Hex and RGB
🔗 [17:05](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=1025s) Hue, Saturation, and Lightness
🔗 [21:12](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=1272s) Opacity and Alpha
🔗 [25:18](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=1518s) Color Review
🔗 [28:16](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=1696s) Paint Store Project
🔗 [41:29](https://www.youtube.com/watch?v=ntLsOXRVF_k&t=2489s) Quiz

🔗 [CSS colors on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

🔗 [Codecademy CSS Colors cheatsheet](https://www.codecademy.com/learn/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-colors/cheatsheet)


This is the follow-up video from the 🔗 [Codecademy Web Development Career Path](https://youtube.com/playlist?list=PL7K3igiHYVk1_ulFuHesiv7BP_ALn82o8) series challenge.

Thanks for reading! I hope you find it useful.

Happy Holidays! 🎄🎅✨🎁❄️
Nextjs Image Component
Tags: nextjs, react, image
Published: 2020-12-24 12:31:04

Hello developers :)

I launched a new video with my favourite feature in Nextjs 10, the Nextjs Image Component.

With this new Next.js Image component we can resize and optimize images. We can also serve images in newer and more optimized formats, like webp!

In the video I also explain srcset and sizes - very important for how this Next.js Image component works, by using the srcset and sizes from the "img" HMTL tag

{% youtube R4sdWUI3-mY %}
CI/CD Of Invalidation AWS CDN Using Gitlab Pipeline
Tags: aws, gitlab, cloudfron, devops
Published: 2020-12-24 12:30:33

- CloudFront can speed up the delivery of your static content (for example, images, style sheets, JavaScript, and so on) to viewers across the globe. By using CloudFront, you can take advantage of the AWS backbone network and CloudFront edge servers to give your viewers a fast, safe, and reliable experience when they visit your website.

- A simple approach for storing and delivering static content is to use an Amazon S3 bucket. Using S3 together with CloudFront has a number of advantages, including the option to use Origin Access Identity (OAI) to easily restrict access to your S3 content.

- When developers want to update the static files, they just need to push the commit of changes, everything else leave for Gitlab pipeline job

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

**General Flow:** Gitlab pipeline job sync files to S3 -> S3 notification event triggers lambda function -> Lambda function creates invalidation request to cloudfront

###**1. Create Gitlab pipeline job**
[.gitlab-ci.yaml](https://github.com/vumdao/cicd-invalidation-cdn/blob/master/.gitlab-ci.yaml)
```
before_script:
  - echo "Deploy CDN"

deploy_cdn:
  stage: deploy
  timeout: 5m
  script:
    - aws s3 sync static/src s3://static-demo/src/
  only:
    refs:
      - master
    changes:
      - static/src/**/*
  tags:
    - gitlab-runner
```

###**3. [Create lambda Function associate with the S3 event using AWS chalice](https://dev.to/vumdao/create-aws-lambda-function-triggered-by-s3-notification-event-9p0)**
How to automate tests for webhooks
Tags: java, docker, testing, automation
Published: 2020-12-24 12:30:10

## Problem 

Has it happened to you that you are coding a test that requires you to wait for a webhook notification? It is a problem because normally the third-party service is outside your network and your machine will not hear their notification unless you provide them with your public IP, and sometimes the public IP is not a feasible option.

![HowToTestWebhooks?](https://dev-to-uploads.s3.amazonaws.com/i/6b25snc29alky4toi3uf.png)

The automated tests that I have seen for these scenarios aren't too pretty. So maybe there is a better/prettier way to do this, but I wanted to share my approach in case anyone finds it useful.

## Why?

When your code needs to interact with a third party, you should probably take some time to read their documentation to learn how to make requests to them and how they will respond. 

Unfortunately, sometimes their documentation is out of date and when that happens your trust in their documentation disappears. Therefore, you will want to see for yourself that everything really works as expected and be prepared for any undocumented behavior that you encounter.

Besides that, I think it's useful to have tests between my code and anything outside my control to be able to know that everything works as expected.

## How?

I used [testcontainer](https://www.testcontainers.org/) to integrate into my tests the lifecycle of the Docker containers that I required. Testcontainer lets me forget about having to run `docker run` and `docker stop` before and after running any of my tests, as it integrates those commands with the start and finish of related tests.
 
I used [ngrok](https://ngrok.com/) to open a tunnel from the Internet to my container so the webhook could target the server waiting on my test. In other words, it allows me to have an URL for my public IP and makes accessible my machine from outside my private network.

And a small web service that will be listening for any request made to the Ngrok URL.

## Proposal

Putting all the pieces together this is more or less what I build to be able to automate a webhook test.

![NgrokForWebhookTesting](https://dev-to-uploads.s3.amazonaws.com/i/mnr8pgziyh6zl5bpe253.png)

To illustrate what I did I made a dummy project that you can find [here](https://github.com/JosemyDuarte/testcontainer_webhook_poc).

Please, feel free to suggest improvements and suggestions 😉

*Originally posted on [josemyduarte.github.io](https://josemyduarte.github.io/2020-12-24-testing-webhooks/)*
AZ-303 Hybrid Identity [Module 2]
Tags: azure, az303, hybrid, identity
Published: 2020-12-24 12:24:56

AZ-303 Microsoft Azure Architect Technologies - Module 2 is about setting up Single Sign On (SSO) and Hybrid Identity Strategy 

Video is in progress.....

Selecting what is the right identity synchronization strategy is important step. Among...
- Password Hash Sync (PHS)
- Pass-through Authentication 
- Federation (AD FS or 3rd Party)

{% youtube YtW2cmVqSEw %}

## Install and Configure Active Directory in Windows Server (Demo)

{% youtube Ct7D5e7hjEs %}

## Installing and Configuring Azure AD Connect Tool (Demo)

{% youtube DxCEiq6SWOY %}

# Resources
Choose the right authentication method for your Azure Active Directory hybrid identity solution
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/choose-ad-authn

Decision Tree
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/choose-ad-authn#decision-tree

What is password hash synchronization with Azure AD?
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/whatis-phs

User sign-in with Azure Active Directory Pass-through Authentication
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/how-to-connect-pta

What is federation with Azure AD?
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/whatis-fed

Custom installation of Azure Active Directory Connect
https://docs.microsoft.com/en-us/azure/active-directory/hybrid/how-to-connect-install-custom
Performance optimization Hook: *useCallback* and *useMemo* hook!
Tags: react, webdev, hooks, usecallback
Published: 2020-12-24 12:13:24

**What is** *useCallback* **hook?**

*useCallback* hook is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed.

**Why do we use** *useCallback* **hook?**

It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders!

**What is** *useMemo* **hook?**

*useMemo* hook is very similar to *useCallback* hook but the difference is that *useMemo* hook invokes the provided function and caches its results.

**useCallback vs useMemo**

*If you need to cache a function, then use* **useCallback** *hook whereas,*
*If you need to cache the result of the invoked function use* **useMemo** *hook.*

*Happy Coding!*

*-Jayant Khandelwal*
A Gift for Git-mas
Tags: git, github, video
Published: 2020-12-24 12:12:40

## Merry Git-mas one and all...

**Video lower down...**

In this video I want to give you 3 wonderful git knowledge gifts, from me to you, for you to indulge on this holiday season. The 3 Git gifts I have for you are under the tree and ready to un-wrap and enjoy...

Without spoiling the surprises for you too much, I discuss 3 git topics in this merry video. I talk about the Git config command, the Git stash command and how to 'undo' in Git. For each topic I explain the concepts so they hopefully make sense and give you lots of juicy commands (most of which can be directly copied and pasted) to help you enhance your git workflow and experience.

This video will hopefully teach you something new, that maybe you didn't know before about these 3 areas of git and the more "lesser-known" additions to these commands. This video showcases many lines of git commands and explains how to construct your own and how to use them AND the best bit of all after the video if you want to somehow keep a copy of everything I have covered in the video then I have created a CHEAT SHEET that you can refer to forever and always that contains absolutely everything that I cover in this video, so there is no need to pause the video and frantically take notes it's all there for you at this link (PDF): 

[Cheatsheet PDF here](http://bit.ly/3mEQUat)

Enjoy!

## The Video

Merry Git-mas! Git bless us, everyone!

{% youtube cYeCiLi9MVo%}

## Onwards
If you have ANY feedback or questions at all please let me know in the comments below or reach out to me on twitter:

[My Twitter (@ben_kadel)](https://twitter.com/ben_kadel)

Or if you want to see more videos from my channel then here you go:

[My Youtube Channel](https://youtube.com/BenKadel)

Thanks for reading and possibly watching!
Intro to the Creative Coding Workbench
Tags: dohackathon, programming, webdev, javascript
Published: 2020-12-24 12:02:22

My holidays have started and so have my two weeks time for the Digital Ocean Hackathon. Hackathons are always fun and force me to start and finish a new project in a fixed timebox. I am glad this one was announced because in the last few weeks a topic really got me interested: Generative Art and Creative Coding.

## The topic
Basicly it's about creating art sketches with the use of code, creativity and a bit of randomness. One creation of mine is this random combination of triangles:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fdvod9d6pjc996cxv0bq.png)
If you want to get a quick introduction to generative art the talk [generative art speedrun](https://www.youtube.com/watch?v=4Se0_w0ISYk&t=11s&ab_channel=CSSConfAustralia) is a great way to start. On the speakers [website](https://generativeartistry.com/tutorials/) you can find a few tutorials and a podcast aswell. A second (extraordinary) ressource is [the Coding Train](https://thecodingtrain.com/).

## The idea
So while I was exploring art generated by code I said to myself: 'When I go down this rabbit hole I will need a toolbox that helps me to work on art sketches'. My plan for the next weeks is to develop exactly this. In my day job I usually build innovative web based applications therefore my platform of choice to paint my sketches will be the HTML Canvas. I tried out the [p5.js Framework](https://p5js.org/) and while it is super easy to getting started with this abstraction layer I am not really satisfied by it. For the next weeks I will center my work around the plain HTML Canvas to explore how everything works on the most basic layer.

## The tech
Recently I discovered the Framework Svelte/Sapper and it it's really easy to work with. Maybe Sapper will be a little overkill for this project but I will choose it anyway. Of course the project will be hosted on the Digital Ocean App Platform. The currently planned features for my 'Creative Coding Workbench' are the following.

### Planned features:
 - draw sketch on HTML canvas
 - expose sketch settings to UI
 - export sketch (print?)
 - toggle sketch animation
 - save sketch to a library
 - load sketch from a library
 - edit sketch from a library
 - ...

### Planned Technologies:
 - Sapper 
 - Digitial Ocean App Platform
 - ...

There is already a little Mock-Up created in [Figma](https://www.figma.com/) which shows how it should look like in the end:

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

I am sure while I am working on it there will be more ideas for features and new integrations.

Stay tuned for updates on this project as there will be posts for each part of it.