teleren/devto huggingface dataset:
CFML Unit Tests for CFHTTP and BadSSL
Tags: cfml, coldfusion, ssl
Published: 2021-03-31 17:15:35

I'm in the process of migrating some CFML projects from Adobe ColdFusion 2016 to either CF2021 or Lucee.  After the recent CF2016v17 update, I've been reading some reports of SSL connections not working and wanted to find out for myself if all platforms returned equivalent results when connecting to [badssl.com](https://badssl.com/).  While badssl is meant for manual testing of security UI in web clients, it's the best (and only) public SSL testing endpoint that I could find.

Here's the TestBox unit CFC with 59 tests based on the SSL connection results that are currently expected by the Chromium browser. (8 of the tests failed to identify the SSL as "invalid", but that's because CFHTTP doesn't perform the same validity checks that Chromium does.)

## Gist Link

[https://gist.github.com/JamoCA/df8436a55bdc64dfc9276b11fed68aae](https://gist.github.com/JamoCA/df8436a55bdc64dfc9276b11fed68aae)

## Gist Source

{% gist https://gist.github.com/JamoCA/df8436a55bdc64dfc9276b11fed68aae %}
AWS S3 as Docker volumes
Tags: aws, docker, programming, devops
Published: 2021-03-31 17:11:22

# Attaching an S3 Bucket as NFS Volume in Docker

We can attach an S3 bucket as a mounted Volume in docker.

We need to use a Plugin to achieve this. 

The plugin is 

[rexray/rexray](https://github.com/rexray/rexray)

We will first install the plugin

```bash
docker plugin install rexray/s3fs:latest S3FS_REGION=us-east-2 S3FS_OPTIONS="allow_other,iam_role=auto,umask=000" --grant-all-permissions
```

We will have to install the plugin as above ,as it gives access to the plugin to S3.

Once installed we can check using

```bash
docker plugin ls
```

Now we can mount the S3 bucket using the volume driver like below to test the mount.

```bash
docker run -ti --volume-driver=rexray/s3fs -v ${aws-bucket-name}:/data ubuntu sleep infinity
```

Thats it the Volume has been mounted from our S3 Bucket

We can inspect the container and check if the bucket has been mounted

```json
"Mounts": [
            {
                "Type": "volume",
                "Name": "maps-openmaps-schools",
                "Source": "",
                "Destination": "/data",
                "Driver": "rexray/s3fs:latest",
                "Mode": "",
                "RW": true,
                "Propagation": ""
            }
        ],
```

We can also inspect the volume

```json
$ docker volume inspect maps-openmaps-schools
[
    {
        "CreatedAt": "0001-01-01T00:00:00Z",
        "Driver": "rexray/s3fs:latest",
        "Labels": null,
        "Mountpoint": "",
        "Name": "maps-openmaps-schools",
        "Options": null,
        "Scope": "global",
        "Status": {
            "availabilityZone": "",
            "fields": null,
            "iops": 0,
            "name": "maps-openmaps-schools",
            "server": "s3fs",
            "service": "s3fs",
            "size": 0,
            "type": ""
        }
    }
]
```
File Storage and Symbolic Links in Laravel
Tags: laravel, file, symlink
Published: 2021-03-30 11:43:12

---
title: File Storage and Symbolic Links in Laravel
published: true
description: Storing and displaying files locally in laravel
tags: laravel, file, symlink
//cover_image: https://direct_url_to_image.jpg
---
Storing files on the same server where your application lives is not a good practice but a simple application may not necessarily require using cloud storage such as AWS S3 and Cloudinary, and files may be stored locally. Storing files locally and displaying them may be a little tricky than we could imagine.

### Saving files on the local server

Using the default filesystem configuration for Laravel (`config/filesystem`), files are saved in the `storage/app` directory.  So when you upload a file using the storage facade, it is saved in this directory. For example:

```
Storage::put($filename, $file, 'public');
```
will save the file `$file` in the directory `storage/app` with name as `$filename`. i.e. `app/storage/$filename` and will have `public` visibility.

### Displaying Files stored on the server:

As stated earlier,  files are by default stored in the `storage/app/` directory. This prevents files from been `publicly` accessible (that is, anyone assessing your files over the internet without needing permission).  

So to display files in our application from the storage directory correctly, we will create a symbolic link to the public directory using the following artisan command:

```
php artisan storage:link
```

Using the helper function `asset`, we can display this file in our application. For example, to use this in the img tag,

```
<img src=“{{asset($filename)}}” alt=“{{$filename}}” />
```

so, what happens when you choose to store files outside this default directory say `storage/app/myfiles` ?  Laravel offers the option of linking this directory to the public directory as well.

To create a symlink from this subdirectory to the `public ` directory, open the `config/filesystems` file and add the link,
```
'links' => [
        public_path(‘myfiles’) => storage_path('app/myfiles’),
    ],
```
then run the command `php artisan storage:link`

this will create a symlink called `myfiles` in the `public` directory. 

With this, we can be able to access files in this subdirectory with the asset helper as follows:

 For example, say you want to access a file stored as `display.jpeg` in `storage/app/myfiles/` subdirectory, all we need to do is call the `asset` helper as below:

```
<img src=“{{asset(‘myfiles/display.jpeg’)}} alt=“myimage’/>
```
this is applicable when you have subdirectories in the `myfiles` subdirectory. Something like `storage/app/myfiles/subdirectory/display.jpeg`, just specify in the url as follows:
```
<img src=“{{asset(‘myfiles/subdirectory/display.jpeg’)}}” alt=“my image” />
```
Also, remember if you did not add the storage directory to your `git ignore` and it’s pushed, you need to delete it on the server before running the storage link command.

Thanks for reading as I welcome your observations and comments.
How to Configure Opera to Use a Proxy Server on a Mac
Published: 2021-03-31 16:56:21

Opera on Mac uses the Mac system settings to configure the proxy server. This is how you open it.

Click on the Opera Menu and then select Preferences.
This will open the setting page with a bunch of sections. I find it always confusing to go through them, so the fastest way is to search using the search box at the top right corner. Type in proxy, and it should open up the System area with the "Open your computer's proxy settings" link.

Click on that

This will open Mac's system proxy preferences page. Select Web Proxy (HTTP) or Web Proxy HTTPS or Both based on the type of proxy server you have available. Enter the IP and port of the proxy. Make sure you enter the username and password for the proxy if it needs it. Once you are done, press OK


That saves the proxy settings, and you can now navigate Opera to a service like HTTPBin http://httpbin.org/ip to see if Opera is using the proxy you typed in or not.
Quick update: Building a disability simulator [WIP]
Tags: javascript, a11y, showdev, webdev
Published: 2021-03-31 16:56:17

Super quick post as this is a work in progress, but here are a couple of fiddles for a disability simulator I am building.

Loads of redundant code to refactor (as is the case with a lot of my posts at the moment! I am very much in a "prototyping" phase at the moment!) but some of the techniques used my be useful such as replacing a mouse cursor and simulating click events in the Parkinson's disease simulator, or applying colour filters in the colour blindness / vision impairment simulator.

Loads left to do but with two 4 day work weeks here in the UK (as we close for Good Friday and have a bank holiday on Monday) I realised I probably wasn't going to get any posts out if I didn't release what I have been working on, as I have several posts "in progress" and none finished! (yeah, still not got my writing schedule quite right yet 🤣🤣)

Anyway enough rambling - have a play with the following, see what you think (only tested in chrome so results may vary in other browsers!)

## Simulating Parkinson's Disease / tremors
For some reason this doesn't perform well in a fiddle, so if it is a bit laggy for you my apologies!

See how frustrating small tap targets can be? This is why WCAG recommends a minimum 48 x 48 size tap target.

Oh at the moment this one is easy to cheat too so if you do try it and want to **share your Attempts / Successes ratio** in the comments then we will do the honour system!

P.s. this only works with a mouse in case you are on mobile 😜😂

(top tip - if you move the cursor out of the fiddle to the left it won't be visible and distracting!)

{% jsfiddle https://jsfiddle.net/apwryL32/6/ result js css html %}

## Simulating Vision Impairments
Simple stuff at this stage, tunnel vision, blurry vision, sunlight as the main 3 and then all the variations of colour blindness.

The sunlight one is particularly interesting as it really hits home why minimum contrast ratios are required in WCAG!

{% jsfiddle https://jsfiddle.net/g5xhdryt/4/ result js css html %}

## Conclusion
As you can see, a looooooong way to go but some of the more interesting challenges already tackled. 

I am hoping to include a lot more in the final product including:
 - multiple vision impairments such as Glaucoma , macular degeneration etc.
 - Cortical/cerebral visual impairment - makes things appear all swirly and abstract - leading child blindness cause
 - light sensitivity (one I have never seen before) to highlight bright spots on a screen that may be unsettling for people with light sensitivity
 - small vocabulary - jumbling words that people with learning disabilities may not understand to leave only simple words readable.
 - dyslexia - jumbling letters etc.
 - variations on the "tremors" simulator for people with muscle spasm impairments etc.
 - movement sensitivity such as ADHD, vestibular disorders, paranoia etc.

I will do a full write up when it is more complete and cleaned up as to how I achieved each effect and the "gotchyas" I came across!
Welcome Thread - v118
Tags: welcome
Published: 2021-03-31 16:42:58

---
title: Welcome Thread - v118
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Hand waving hello in many languages](https://media.giphy.com/media/26xBwdIuRJiAIqHwA/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Running TypeScript without Compiling
Tags: typescript, bash
Published: 2021-04-01 19:12:23

---
title: Running TypeScript without Compiling
published: true
date: 2021-03-31 16:23:33 UTC
tags: TypeScript,Bash
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee1ihgt2p8wotm0kb45e.png
canonical_url: https://justwriteapps.com/running-typescript-without-compiling/
---

If you're like me you create scripts to automate things all the time. While you can do quite a bit with `bash`, it's just a lot easier to use your primary language--in this case TypeScript. With just a few tricks you can start writing your scripts in TypeScript.

## Setup your Environment

First you need to get your environment setup. I'm going to assume you already have node and npm installed and your globally installed packages are in your path. Once you have that setup, globally install `ts-node`.

```
npm i -g ts-node
```
<figcaption>Globally installing ts-node</figcaption>
## Create the Script

If you've made it this far then it's time to create your script. The only magic that's required is the first line needs to be a shebang statement.

```
#!/usr/bin/env ts-node
```

This tells bash that it should use `ts-node` to execute the contents of the file. Here's my sample script.

```
#!/usr/bin/env ts-node

function test(message: string) {
	console.info(message);
}

test("Hello TypeScript!");

```

Now mark the script as executable.

```
chmod +x ./test.ts
```

And now you can directly execute your typescript file!

![Running TypeScript without Compiling](https://justwriteapps.com/content/images/2021/03/Peek-2021-03-31-11-10-edited.gif)
What is core web vitals
Tags: webdev, webvitals, javascript
Published: 2021-03-31 16:23:05

> Originally posted on [my personal blog](https://devugur.com/blog/what-is-web-vitals)

Web vitals is a guidance for developers to provide their users great web experience. What I mean by guidance is that the core rules for creating a better website or web application.

We all want our users to engage with our website. In order to achieve that we have to follow some rules. Let's check out what these rules are.

### Largest Contentful Paint (LCP)
Largest contentful paint is the largest image or text block visible in the viewport. LCP is the measure of the render time of this content. According to the Google Core Web Vitals guidance, **2.5 seconds or less** is a good time. Be sure that **75% of your users** hit under this time when they load your site for the first time.

### First Input Delay (FID)
This measure is about the time of interactivity. Whenever your website is loaded, your users should be able to click on a button or type something into input fields after less then **100ms.** As we all know that, interactivity is one of the main bits of the modern web. So remember, your users want to click!

### Cumulative Layout Shift (CLS)
I bet you have clicked on an advertisement unintentionally because the page layout has changed after a few seconds of the initial load. This is called cumulative layout shift. You want your website's layout is stable. The acceptable measure of CLS is less then **0.1** so be sure that your images have explicit width and height attributes.

![EXect01U8AA3p1M](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dpvp2w32t9lafmfd33f.jpeg)

#### Conclusion

These three measurements are crucial for user experience. And user experience matters when it comes to SEO and user engagement with your website. In coming articles, I will try to explain how to improve UX of your website with following core web vitals.

If you find this article helpful, please consider following me on [twitter](https://twitter.com/uguremirmustafa) where I share daily content about web development. Have a nice day!
Fundamentals of Testing in TypeScript #1
Tags: typescript, testing
Published: 2021-03-31 16:18:56

First, we need to get a fundamental understanding of what an automated test is in TypeScript.

> A test is a code that throws an error when the actual result of something does not match the expected result.

The tests can be more complicated when dealing with code that is dependent on the state (component needs to be in the document before you can fire a browser event, or data needs to be fetched before interacting with the component). Nevertheless, it is relatively easy to test pure functions.

> Pure function will always return the same output for a given input and not change the state around it.

We have a bug inside a `sum` function. Instead of adding, it subtracts. We can quickly fix that, but we want to write an automated test to make sure that we will not reencounter this bug.

```ts
export const add = (a: number, b: number): number => {
  return a - b
}
```

We are expecting that the `result` constant will be 24, so create a new variable `expectedResult` with that value for better readability.

```ts
let result = add(8, 16)
let expectedResult = 24
```

We can say if the `result` is not equal to the `expectedResult` throw an error that says `result` does not match an `expectedResult` with some hints:

```tsx
if (result !== expectedResult) {
  throw new Error(`${result} is not equal to ${expectedResult}`)
}
```

The thrown error will be: `-8 is not equal to 24`

If we replace the minus symbol with a plus inside the `add` function, our test passes without throwing any error. This is the most fundamental part of a test.

```ts
export const add = (a: number, b: number): number => {
  return a + b // Test will pass now 🔥
}
```

To get more familiarity with this, we can add another function `subtract`.

```ts
export const subtract = (a: number, b: number): number => {
  return a - b
}
```

For simplicity, we will copy-paste our conditional assertion.

```ts
// ...

result = subtract(32, 16)
expectedResult = 16

if (result !== expectedResult) {
  throw new Error(`${result} is not equal to ${expectedResult}`)
}
```

This time, our tests are passing without an error.

Errors should be as helpful as possible to quickly identify where the problem is and fix it.

---

**CodeSandbox playground:**
{% codesandbox 83z83 %}
Uncovering Motivation In Engineering Interviews
Tags: management, hiring
Published: 2021-03-31 16:11:00

Hey y'all! It's been a while. I've been doing an ongoing series called Technically Human where engineering leaders and I talk about the most human elements of managing technical people. I have a few episodes to share, but I thought this episode with Eric Gong, former VP of Engineering and currently a technical recruiter was a great place to start. 

Eric and I talk about why understanding candidate motivation is absolutely key to successful hiring. Here are the 4 top takeaways, but links to the full episode are below: 

📍 Define the culture: Understand, write down, & codify the culture of the company and the team. Know what you want‍, so you know what to look for.

🎩 Use the "Magic Wand" question: "If you had a magic wand, describe for me how you'd create your next role". Quickly uncover motivations behind the search & what's on the top of their list of requirements.‍

🧅 Peel back the onion: Dig into their answers. Ask for specific examples or situations they were in that illustrate their answers and contextualize them. You're looking for pieces of the puzzle, & the only way to find them is to ask.‍

🚩 Know your red flags: Whether it be talking poorly about previous companies or coming off as arrogant & ego-centric - be on the lookout for potential red flags & determine in advance your team's non-negotiables.

https://hubs.li/H0Kc_WL0
CS Dissertation - Designing for Users with Autism - Looking for feedback on my proposed guidelines
Tags: webdev, ux, a11y, autism
Published: 2021-03-31 16:09:39

Hi Everyone,

I am currently in the middle of my dissertation of my Computer Science degree, and am looking for the help of the community! My project is focusing on accessibility and usability issues for users with Autism Spectrum Disorder (ASD), and the lack of guidance for developers to address these issues.

I have proposed a set of design guidelines for UX/UI designers and web/software developers which aim to improve the accessibility and usability of websites and applications for users with ASD by considering these guidelines during the design phase of the software development lifecycle. 

To try and make this successful, I need the opinions of IT professionals (this community!) to find out how likely my proposed guidelines are to be adopted in the field or any changes that might make the guidelines more usable and adoptable.

I am extremely appreciative of anyone who has a spare 10 minutes to complete the short questionnaire. It can be found at the link below. 

https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAN__tjNGKFUQlU3TE5BNDVEMlFHSlIySDNXRDJVTVVHSi4u

Hopefully it will lead to an improvement in web experience of users with ASD in the future!

Thanks for your time,

Dan
Day 92 Of 100DaysOfCode: Charting Practice
Tags: womenintech, codenewbie, wecoded, 100daysofcode
Published: 2021-03-31 15:59:41

Today is my 92th day of #100daysofcode and #python learning journey. Today also keep learning from DataCamp completed some assignments here. Studied some articles from dev. Following code for charting using matplotlib and tokenization.
#Code
```python
# Split the script into lines: lines
lines = holy_grail.split('\n')

# Replace all script lines for speaker
pattern = "[A-Z]{2,}(\s)?(#\d)?([A-Z]{2,})?:"
lines = [re.sub(pattern, '', l) for l in lines]

# Tokenize each line: tokenized_lines
tokenized_lines = [regexp_tokenize(s, "\w+") for s in lines]

# Make a frequency list of lengths: line_num_words
line_num_words = [len(t_line) for t_line in tokenized_lines]

# Plot a histogram of the line lengths
plt.hist(line_num_words)

# Show the plot
plt.show()
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 92 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Natural Language Processing(Charting practice) From DataCamp.<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/IuPJ5SzGhp">pic.twitter.com/IuPJ5SzGhp</a></p>&mdash; Durga Pokharel (@durgacodes) <a href="https://twitter.com/durgacodes/status/1377287416206090244?ref_src=twsrc%5Etfw">March 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>