DEV Community: R☭

TIL: Setting up new computer (macOS)

R☭ — Tue, 27 Feb 2024 16:40:00 +0000

Sometimes you run into some useful snippets and to not forget about them...

When setting up and installing a new Macbook (after finally upgrading it).

On old computer:

 Brew bundle dump

Edit where needed

On new computer:

Brew bundle install

Saves probably a few minutes!

If you have useful commands that could save minutes... share them in the comments.

Website update

R☭ — Wed, 17 Mar 2021 09:21:41 +0000

Ssh-ing into my webserver and using vim in the index.html document is still my all time favorite way of updating a website. Sometimes it is good to not having to deal with complex compilation, packaging, deployment pipelines and to embrace just the basics of the web.

A quick Vue (Nuxt) component example.

R☭ — Fri, 12 Mar 2021 10:41:00 +0000

A short introduction to create a reusable alert component.

Prequisites and setup

This is not a formal setup guide, but just the way i have it set up so it can be replicated. It is expected to have a Nuxt application running, if you want to know how to easily do that Nuxt installation.

Nuxt 2.14*
Node 14 (but Node > 10 should suffice)

The component

`components/general/alert.vue` (file name for the component)

<template>
  <div class="alert" :class="type">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'alert',
  props: ['message', 'type']
}
</script>

It is a single div component, which contains a message that is passed down as a props value. It also has a type props that is being used to set a class. the shorthand :class is being used (which does the same as v-bind:class).

Using the component

To use this component with dynamic values, you need to import it in a different component. Register it in the components object and then it is usable as a custom HTML element.

`pages/index.vue` (file name for the page file)

<template>
  <div class="page">
    <h1>Page title</h1>

    <alert :message="'Error Error!'" :type="'error'" />
  </div>
</template>

<script>
import Alert from '@/path/to/alert';

export default {
  name: 'basic-page',
  components: { Alert }
}

In this example, we import Alert from '@/path/to/alert'; then we register it in components: { Alert }. Finally we use it as a custom HTML element. We use :message= to pass a String value.

(notice that we are using single quotes within the double quotes to specifically pass a String, if you want to pass down an object or a variable, do it like: :message="customMessage").

Finally in the same way we are passing the String error. which is then added as a class to the element.

The final HTML output will then be something like:

<div class="alert error">
  Error Error!
</div>

By adding methods, computed values and fancier styling you can create components that are very flexible, small and are usable wherever you want in your application.

Laptop stickers 2020

R☭ — Tue, 08 Dec 2020 09:31:21 +0000

Less coding stickers, more activism stickers. Show yours.

Looking for some backend node help here

R☭ — Thu, 23 Apr 2020 07:45:56 +0000

So i am working on this application (side project) and i am mainly a frontend developer. And now i am really stuck on getting the authentication in place.

I have written user registration and simple email + password login, but now getting the authentication and sessions in place is just something i keep getting stuck on.

I am running a MEVN (Mongo, Express, VueJS 2, Node) stack so i tried some of the options (auth0, express-connect, json webtokens), but i just can't find a combination that works and that i feel is secure.

So if someone wants to offer a hand / help with implementation or just knows the right up to date tutorial.

(or if you are a backend focused person and are very into music / a musician, i am looking for partners as well).

What if drivers were hired like software developers?

R☭ — Thu, 31 Oct 2019 14:39:18 +0000

Job title: car driver

Job requirements: professional skills in driving normal- and heavy-freight cars, buses and trucks, trolley buses, trams, subways, tractors, shovel diggers, contemporary light and heavy tanks currently in use by NATO countries.

Skills in rally and extreme driving are obligatory!
Formula-1 driving experience is a plus.

Knowledge and experience in repairing of piston and rotor/Wankel engines, automatic and manual transmissions, ignition systems, board computer, ABS, ABD, GPS and car-audio systems by world-known manufacturers - obligatory!

Experience with car-painting and tinsmith tasks is a plus.

The applicants must have certificates by BMW, General Motors and Bosch, but not older than two years.

Compensation: $15-$20/hour, depends on the interview result.

Education requirements: Bachelor's Degree of Engineering.

original: https://www.jitbit.com/alexblog/203-what-if-drivers-were-hired-like-programmers

FIXED: Upload to DigitalOcean Spaces with AWS S3 getSignedUrl with correct permissions and Content Type

R☭ — Thu, 31 Oct 2019 10:09:57 +0000

Solution:

What i actually had to do, was allow for custom headers to be set in the put request. This was done through the DigitalOcean interface in the CORS settings for your spaces.

I am trying to upload assets through the getSignedUrl method that the aws-sdk provides, a NodeJS backend with Axios where the upload happens from a VueJS 2 frontend. Now whatever combination i try, or the file is able to upload but always sets it to private and the wrong Content-Type, or i get 403 permission errors.

If i leave out all the ACL and ContentType stuff, the file is displayed on the Spaces interface as being private.

This is how it should be shown, and what i get when i upload manually through the interface:

What i want to do is that the upload has an ACL that is public-read and the correct Content-Type.

The following is the code that i use:

To get a signed Url



const s3 = new AWS.S3({
    accessKeyId: keys.spacesAccessKeyId,
    secretAccessKey: keys.spacesSecretAccessKey,
    signatureVersion: 'v4',
    endpoint: 'https://REGIO.digitaloceanspaces.com',
    region: 'REGIO'
});

app.get('/api/upload/image', (req, res) => {
        const type = req.query.type;

        s3.getSignedUrl('putObject', {
            Bucket: 'BUCKET',
            ContentType: type,
            ACL: 'public-read',
            Key: 'random-key'
        }, (error, url) => {
            if (error) {
                console.log(error);
            }
            console.log('KEY:', key);
            console.log('URL:', url);
            res.send({ key, url });
        });
    });

This provides a signed url that looks like:



https://BUCKET.REGION.digitaloceanspaces.com/images/e173ca50-fafe-11e9-b18c-d3cfd4814069.png?Content-Type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=NSX3EZOFXE57BAFSKDIL%2F20191030%2Ffra1%2Fs3%2Faws4_request&X-Amz-Date=20191030T102022Z&X-Amz-Expires=900&X-Amz-Signature=f6bcdcd35da5dc237f881a714ec9ca09cb7aa3f3ffbd2389648a7c30808ab56e&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read

Then for actually uploading the file i use the following:



await UploadService.uploadImage(uploadConfig.data.url, file, {
          'x-amz-acl': 'public-read',
          'Content-Type': file.type
      });

With the service looking like:



  async uploadImage (url, file, headers) {
    await axios.put(url, file, headers.headers);
  }

disclaimer: this works with S3 itself as you can set the permissions on a per bucket level so you don't have to worry about it. But Spaces providers a CDN as well and is just generally cheaper. :)

Become a technical mentor at Gaza Sky Geeks third annual women’s inclusivity hackathon

R☭ — Thu, 17 Oct 2019 09:39:41 +0000

Gaza Sky Geeks is organizing their third annual women’s inclusivity hackathon in Gaza on December 5-8. They want to recruit a team of mentors to come to Gaza and support the teams during the hackathon.

Are you a developer or designer -- or do you know any amazing developers and designers -- who would be interested and able to make the trip out to Gaza and participate in the hackathon as a technical mentor?

https://gazaskygeeks.com is part of the Mercy Corps https://www.mercycorps.org

To apply:

https://airtable.com/shr6qSeiwlL1Gw4Wm

A few notes:

You have to pay for the flight to Tel Aviv yourself, also you have to take care of a visa for Israel. Your stay there will be paid for (sleeping arrangement, food etc). Basically this is voluntary position.

To find more information about what it takes to be a mentor: https://gazaskygeeks.com/become-a-mentor/

This page also has information about the safety of Gaza.

Terminal of choice?

R☭ — Thu, 17 Oct 2019 07:58:42 +0000

What is your terminal of choice?

I used to dabble with Hyper for some time because of the customization i could do with it, but eventually dropped it because of the poor performance compared to the default (mac) terminal and Iterm.

After i became bored with Iterm (and found it sluggish as well) i moved to the default terminal which gave me more than enough customization and most important of all, the performance i want.

But yesterday i opened Iterm again, and saw that it now includes things through its preferences (git status, upload / download speed, memory usage of the computer etc).

So for now i am moving back to Iterm 2. What is your Terminal of choice?

Javascript events, going back to the basics

R☭ — Tue, 26 Feb 2019 12:28:20 +0000

In my previous post i wanted to discuss a way of a single event handler on document level that would listen to click events on certain elements or its children. By traversing the event.path i would check if in the path there was a class and then call a function if that was true.

Javascript events

R☭ ・ Feb 21 '19

#javascript #discuss #question #optimization

While this works in Chrome, event.path is not widely supported, so i had to go back and implement a different solution, this time, by using event.parentElement.

    document.addEventListener('click', function(event) {
        let element = findAncestor(event.target, '.message');

        if (element) {
                  runFunction();
        }
    });

    function findAncestor(element, sel) {
      while ((element = element.parentElement) && !((element.matches || element.matchesSelector).call(element,sel)));
      return element;
    };

It is possible to use a polyfill apprently, and there is something like event.composedPath, more about that on Stack Overflow - event.path undefined with Firefox.

Javascript events

R☭ — Thu, 21 Feb 2019 09:47:52 +0000

Working on a message system, i want to catch all the events that happen on the message element, or its children. Would this be the most optimal way of doing this?

I can also add a pointer-events: none through CSS on all the child elements. But that doesn't feel like a good scalable way to go.

document.addEventListener('click', function(event) {
    for (var i = 0; i < event.path.length; i++) {
        if (event.path[i].classList && event.path[i].classList.contains('message'))         
        {
            doThings();
            break;
        }
   }
});

DEV Community: R☭

TIL: Setting up new computer (macOS)

Website update

A quick Vue (Nuxt) component example.

Prequisites and setup

The component

components/general/alert.vue (file name for the component)

Using the component

pages/index.vue (file name for the page file)

Laptop stickers 2020

Looking for some backend node help here

What if drivers were hired like software developers?

FIXED: Upload to DigitalOcean Spaces with AWS S3 getSignedUrl with correct permissions and Content Type

Become a technical mentor at Gaza Sky Geeks third annual women’s inclusivity hackathon

Terminal of choice?

Javascript events, going back to the basics

Javascript events

R☭ ・ Feb 21 '19

Javascript events

`components/general/alert.vue` (file name for the component)

`pages/index.vue` (file name for the page file)