DEV Community: Trev

Jitsi Rocks

Trev — Sat, 28 Mar 2020 18:53:00 +0000

Video conferencing is a hot topic right now. Several proprietary solutions have grown in popularity with the unfortunate help of COVID-19. Since the "iron is hot", I'd like to write a bit about Jitsi, but more specifically Jitsi-Meet.

Why Jitsi?

There are many reasons why you may want to consider using Jitsi, outside of the fact that it's Free/Open Source Software:

Anyone who can run a Chromium based browser can use it.
Meetings are dead simple to set up.
There are no login requirements.
No data is stored on the host server.
Everything sent back and fourth is encrypted.
There are Android/Apple applications for mobile devices.
There is an Electron-based desktop application with remote-desktop support.
The server technology relies mostly on bandwidth and is very scalable.

How to use Jitsi

If you're the sort of person who doesn't want/care to run your own instance of Jitsi, you're in luck! There's a public server that is free for all to use. The easiest way to get your friends/family on-board is to have everyone use Google Chrome.

Here are your easy on-boarding steps:

Open Google Chrome (or your Chromium based browser of choice) and head to meet.jit.si
Pick a unique name for your meeting room.
Click the "Go" button.
Make sure your microphone/camera permissions are allowed.
Set an optional password.
Share the web address to your meeting room with your friends/co-workers/family to open in Chrome/Chromium.

Deploy your own Jitsi

Jitsi-Videobridge is the technology used to deploy a video server for conferencing. There are a few other moving parts that you can add/customize for your deployment, such as a SIP server that allows you to call in by phone. You can follow these deployment instructions to set up your own server.

If you're like me and you want a simpler/easier way to tear down and re-deploy, their maintained docker-compose repository is really nice. You can easily clone it, set up your own custom .env file from their env.example file, commit your local changes, and pull in their updates whenever you want.

All I had to do from here is set up one of Digital Oceans floating IP addresses, point a subdomain at it and then fire up a Digital Ocean droplet with docker pre-installed. Within seconds I could ssh into the droplet, clone my custom version of docker-jitsi-meet onto the server and run docker-compose up -d. Within 10 minutes I had my own video conferencing service.

I didn't dig too deep into it, but docker-jitsi-meet also has documentation/config options for running Jitsi on your LAN, so if you don't want to pay for a droplet, or fuss with re-provisioning at all, you can just self-host at home.

How well does it work?

I've used just about every video conferencing app out there. I'm happy to say that it performs just as well as some of the major players like Google Hangouts and Zoom. When using it in the browser your mileage may vary: sometimes participants have a hard time figuring out/understanding how to troubleshoot webapps, sometimes they use the "wrong" browser, or perhaps have one too many plugins. These aren't problems that are unique to Jitsi and there are desktop/mobile apps to help make up for them.

You also have the benefit of using a service that you can control and isn't out to make a product out of you, or perhaps fail to be accountable on their own.

Give Jitsi a try! Free software gets better the more people use it :)

A Very Nice CSS Parallax Video

Trev — Mon, 25 Nov 2019 16:52:30 +0000

This is not my video

I just thought it was really helpful so I thought I would share it here.

The props go to Red Stapler

The code involved

This CSS wrapper is dead simple and the video explains it well so I won't go into too much detail here - but if you just want to see the code involved, here it is:

HTML

    <body>
            <div class="navbar"><span>CSS Parallax Scrolling Tutorial</span></div>  
            <div class="parallax-wrapper">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       ....
                       .... 
                       Donec in justo eu ligula semper consequat sed a risus.</p>
                </div>
            </div>
            <div class="regular-wrapper">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       ....
                       .... 
                       Donec in justo eu ligula semper consequat sed a risus.</p>
                </div>
            </div>
    </body>

CSS

    html {
        overflow: hidden;
    }
    body {
        margin: 0;
        font-size: 26px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: #ffffff;
        height: 100vh;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .parallax-wrapper {
        width: 100vw;
        height:100vh;
        padding-top:20vh;
        box-sizing: border-box;
        transform-style: preserve-3d;
    }
    .parallax-wrapper::before {
        content:"";
        width: 100vw;
        height: 100vh;
        top:0;
        left:0;
        background-image: url("/trianglify.png");
        position: absolute;
        z-index: -1;
        transform:translateZ(-1px) scale(2);
    }
    .regular-wrapper {
        width: 100vw;
        height:100vh;
        padding-top:20vh;
        background-image: url("/trianglify2.png");
        z-index: 2;
        position: relative;
    }
    .content {
        margin: 0 auto;
        padding: 50px;
        width: 50%;
        background: #aaa;
    }

What I like about this method is that it's pure CSS and it's easy to replicate. I'm currently building a Vue component that will use this method nicely.

Why I decided to go with Pelican

Trev — Mon, 17 Jun 2019 16:05:00 +0000

I tend to get excited when I explore something new and I've gotten into the habit of making this website the focus of a new obsession.

When I first wrote this website, it was with the brand new HTML/CSS/JavaScript skills that I had learned. Then I learned Python and re-wrote this website to be more dynamic with the use of Flask. Months later I started learning reactive JavaScript front-ends and ended up re-working my porfolio into a single-page React application. I was mostly happy with it at that point, but I felt like I was still missing a couple of things.

I wanted a blog and didn't want to write one in JSX or do some sort of hacky markup rendering. The SEO wasn't quite up to snuff and I wanted something that would render really well in older/less accessible browsers. I also wanted something low maintenance and felt like React may have been overkill for a portfolio or a blog. Needless to say, it's easy to get carried away with new things.

Static site generators are fast, simple and secure

I had heard about static site generators while reading about them on Twitter and Mastodon. It ocurred to me that that static sites in general are wonderful and there are many reasons to use a static site generator:

They provide content management (like WordPress), but without any of the bloat.
They make it easy to write pages and posts in simple document formats (like Markdown).
They generate very secure websites. It's just static content. There are no databases or backends to exploit outside of the web server itself.

After reading a few articles about the various static site generators out there, I decided to go with Pelican for a few reasons. Pelican is very mature, written in Python , highly customizable/configurable and has many features included. For example, it generates pages based on category, date, author and tag. You can also leverage custom post/page metadata and pass it to jinja powered templates that are very clear and easy to reason with. To deploy them, all you need is FTP or shell access to a shared host provider. You could also easily deploy a static website for free using something like Netlify or Github Pages.

To boot, there are dozens of plugins for Pelican. Since I enjoy Python, it wasn't all that challenging for me to write my own plugin for a niche situation like my VueJS powered comment system.

Pelican is also really well documented. This came in super handy while figuring out how to properly write a new theme and create special page templates like my home page and my portfolio category page.

The only drawback that I can think of is that Python is slower than some of the newer static site generators like Hugo. That being said, I'm still able to render this website in under half a second, and that's fast enough for me.

I'm super happy with what I've created with Pelican and am excited to share some of the tips & tricks I learned along the way. I don't think I'll be switching my website up any time soon.