DEV Community: Clark Weckmann

Notion Bookmarks IOS Shortcut

Clark Weckmann — Sun, 04 Sep 2022 00:00:00 +0000

Notion is a powerful tool that is quickly taking over the life of students, developers, general note takers, project managers, and so many more lifestyles.

I’ve built out a quick and easy shortcut that relays on Notion and Nautomate. You can read more about it by clicking here.

Lets a peak at just how easy it is to get set up with a Notion Bookmark Gallery that looks like this:

The Steps

Get the shortcut from the website here.

Set up the shortcut with your database ID from Notion.

Add your Nautomate integration to Notion.

Share a website from the share menu to your Notion Bookmark Shortcut.

You’re all set!

For a more detailed tutorial please visit NotionBookmark.WKMN.app/

Add Tool Tips with just CSS

Clark Weckmann — Fri, 26 Aug 2022 16:17:14 +0000

Tool tips are an important part of the user experience. Below is the absolute simplest way to add them to your website.

Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but is otherwise not visible on the page. The tooltip is displayed automatically, after a brief delay; the user does not request it. While a tooltip can be placed on any content, they generally are tips for tools or controls, such as providing additional content for icons that have brief labels (or no labels at all, which is not accessible!).

~ Mozilla Developers

<!-- Place this in oyur documents <head> -->
<link href="https://gh.wkmn.cloud/CSSTooltip/tooltip.css" rel="stylesheet">

<!-- Demo -->

<a href="#" data-tooltip="Click Me!">Link</a>

<!-- It's that easy -->

You can find an example here.

What is ReadMeJS?

Clark Weckmann — Thu, 25 Nov 2021 00:00:00 +0000

ReadMeJS

Recently, I was working on a simple interface for markdown notes on Codepen. I wanted an easy way to show some documentation. Rather than finishing my project by just adding a paragraph or two, I built this.

Built with Bulma, Showdown, and Love

Bulma is responsible for the styling while Showdown converts your README markdown to HTML.

How to use it!

Add this <script> and <div> to your HTML.

<div id="readme"></div><script src="https://cdn.jsdelivr.net/gh/clarkhacks/readmejs/readme.min.js"></script>

Configure ReadMeJS like so:

readme("clarkhacks", "readmejs");// readme(username, repository, filename);

Demo

Reply via email

Glitch, The Underrated Tool

Clark Weckmann — Wed, 17 Nov 2021 00:00:00 +0000

Before we dive in, I'm a firm believer in learning by doing. So if you don't want to read this post just click here to get started on Glitch now!

Glitch defines itself as

Glitch: The friendly community where everyone builds the web

and I couldn't agree more!

For Free

Unless you plan on using Glitch for a small-scale operation that isn't just development, you can get away with the free plan! I only upgraded to give back to the developers. These people deserve it! For free you get:

Projects and code are public by default
- Environmental variables are always private
Full-stack apps that sleep after 5 minutes
Unlimited static sites that are always on
Github import/export and Prettier support
Custom Domains
512MB Memory
199MB Disk Space
Terminal Access

Starter Templates

Glitch In Bio

Instantly create a list of your favorite links, and customize them for free.

Remix

Website

Build a website from scratch using the basics: HTML, CSS, and JavaScript. It could be a splash page, VR web experiment, or personal page.

Remix

Node.js

Do even more with JavaScript on the server! Create a full-stack Node.js project. It could be anything — an API, a web app, or a data tool.

Remix

React

Build an interactive website with complex states using one of the web’s most widely used frameworks. Deploys as a fast, always-on static site.

Remix

Eleventy

A simple static site generator that’s perfect for building your new blog. Eleventy removes the repetition from creating a multi-page site.

Remix

SQLite

Use a persistent SQLite database with your Node.js app.

Remix

Git Support

Glitch officially supports importing and exporting to Github. If Github isn't your forte, you can use the git URL to import from anywhere!

Each project is given a git URL for remote editing too. This way you aren't confined to the web IDE.

In Conslusion

I've been using glitch since the early alpha days. Things have changed a lot over time for the better. It's the nature of development. I'm confident in what Glitch is doing and am thankful for how easy they have made my life. If you're just trying to learn, check out their Discover section or search for projects to remix and edit yourself!

Reply via email

[Matrix] - Open Source Encrypted Messaging

Clark Weckmann — Thu, 11 Nov 2021 00:00:00 +0000

Imagine a world...

...where it is as simple to message or call anyone as it is to send them an email.

...where you can communicate without being forced to install the same app.

...where you can choose who hosts your communication.

...where your conversations are secured by E2E encryption.

...where there’s a simple standard HTTP API for sharing real-time data on the web.

Matrix.org

If these things interest you as much as they interest me, follow along!

1. Navigate to a Matrix client, I recommend Element.

Element Landing Page

2. Once here, click on "Create Account."

Create Account

3. Select which server you'd like to create your account on.

You can see a list of some here. If you're unsure just use the default, matrix.org.

Select Server

4. Fill out all the standard information and verify your email if necessary.

Welcome to Element

Welcome to the Matrix and Element! From here you can message anyone on any matrix server. This is possible through federation.

Federation refers to different computing entities adhering to a certain standard of operations in a collective manner to facilitate communication. It also describes operations between two distinct formally disconnected telecommunication networks with distinct internal structures. It may also describe an attempt made by groups to delegate authority of development and prevent fragmentation.

Techopedia

Let's Send A Direct Message Now!

Sending Direct Messages

What does @clark:chat.wkmn.cloud mean?

@clark = The user you're looking to message.

chat.wkmn.cloud = The Matrix server the user exists on.

Sending Direct Messages

Profile Customization!

Element makes it incredibly easy to customize your profile. In the upper-right-hand corner select the down arrow next to your name.

Action Menu

From here select "All Settings."

Settings

You can change your display name, password, email, photo, and more! Dig through the settings and mix some things up.

Thank You!

Thank's for reading my post! If you've followed along feel free to message me!

Reply via email

Homer Dashboard

Clark Weckmann — Wed, 10 Nov 2021 00:00:00 +0000

Self-hosting is becoming more and more popular, with that comes hosting for fun not just for function. I cannot begin to count the number of projects I've spun up just to play with. This doesn't mean you have to keep them forever though. It does mean, however, that organization is a must!

I've used bookmarks, notes, and default dashboards to keep track of my day-to-day services, as well as my random projects. With the dashboard becoming more popular I've tried a lot of pre-built ones like DashMachine, Flame, Dashy, and so many more! I finally landed on one that I will be keeping for awhile - Homer.

Special thanks to WalkxCode on GitHub (u/Walker_21390 on Reddit) for their amazing Homer theme, without this I wouldn't have chosen Homer as my day-to-day dashbaord.

With that out of the way, let's get started!

To begin let's install homer with Docker.

docker run -d \
  -p 8080:8080 \
  -v </your/local/assets/>:/www/assets \
  --restart=always \
  b4bz/homer:latest

Don't forget to configure the port and set your volume.

Homer has a configuration file located at ./assets/config.yml . This is where we'll be configuring Homer. If you navigate to http://localhost:8080 you'll see your Homer Dashboard.

The dashboard game is all about how functional and how fancy your dashboard is. WalkxCode made this incredibly easy for us. They have the easy to follow instruction over on Github. Check out their write-up here.

Credit: https://github.com/WalkxCode/Homer-Theme

Reply via email

Change Default Pi Username

Clark Weckmann — Sun, 26 Apr 2020 00:00:00 +0000

If you’re using Raspbian your default username is pi. In this article, I will teach you how to change this username, the password, and remap the home directory. To do this you must first log in as the root user. By default, the root user has no password enabled. Log in as the pi user and enter this command.

$ sudo passwd root

You should choose a safe and secure password for this user. After you change the pi username to your desired username I recommend disabling the root password. Make sure password login for root is enabled by editing the sshd_config file.

$ sudo nano /etc/ssh/sshd_config

Find PermitRootLogin without-password it could say something similar. Change this value to PermitRootLogin yes.

You can now logout of the pi user by entering this command.

$ logout

If this command fails to work use the exit command.

We need to modify the name of the pi user now. Run this command. Replace newuser with your desired username.

usermod -l newuser pi

We need to modify the home directory now to match the new username. Again replace newuser with your desired username.

usermod -m -d /home/newuser newuser

You can now logout of the root user and log back in as the username you just created. The password for your username is still the default username for pi, “raspberry”. If you wish to change this enter this command.

passwd

Now enter “raspberry” as the Current Password and then your desired password for New Password and confirm.

If you wish to lock the root user password for security reasons you can enter the following.

sudo passwd -l root

You’re all set! Enjoy your new username.

Reply via email

Jekyll Nginx Server

Clark Weckmann — Tue, 17 Mar 2020 00:00:00 +0000

Here’s how to mimic the Jekyll Development Server with Nginx for a production environment.

Create a new sites-available block (make sure to remove the default file, it’s already listening on port 80).

$ cd /etc/nginx/sites-available/
$ sudo nano MYSITE

Copy and paste the following:

server {
  listen 80
  server_name mysite.example.com
  root /YOUR-JEKYLL-SITE-PATH/_site

# Cache controle
  expires 30s
  add_header Cache-Control public
  add_header ETag ""

# Error Pages
  error_page 404 /404.html
  error_page 500 /500.html

# Your static assets that won't need the cache reloaded.
  location ~ ^/assets/ {
    expires max
  }

  location ~ /. {
    return 404
    access_log off
    log_not_found off
  }

# Favicon handler
  location = /favicon.ico {
    try_files /favicon.ico =204
    access_log off
    log_not_found off
  }

# 404 handler
  location / {
    try_files $uri $uri.html $uri/ =404
  }
}

Save this file with ctrl+x then Y and enter. Now we have to link our new configuration file to the sites-enabled directory and restart Nginx.

$ sudo ln -s /etc/nginx/sites-available/MYSITE /etc/nginx/sites-enabled/
$ sudo service nginx restart

You’re all set!

Reply via email

Install NodeJs on Raspberry Pi

Clark Weckmann — Sat, 04 Jan 2020 00:00:00 +0000

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. NodeJs is an increasingly popular language for developers across the board. Let’s cover how to install NodeJs on the Raspberry Pi.

To start off we need to add the NodeJs repository to your Pi’s list. Run this command:

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -

This will enable the repository. Once it’s enabled you can install NodeJs and NPM with this command.

$ sudo apt install nodejs

This will take awhile to install, once it’s done test it with this command:

$ node -v

To check NPM run this:

$ npm -v

Reply via email

Glitch Projects

Clark Weckmann — Thu, 14 Feb 2019 00:00:00 +0000

Let’s talk about Glitch! Glitch is a place to develop your NodeJs projects with community support and abundant inspiration.

Glitch has several easy to use features:

Git
- Read & Write Support
- Import From Git Url
Export Files
Collaborative Editing
Embedding Projects
Custom Domains
Logs
Console Access
Rewind (Git Versioning)
SQLite Built In
Community Help
Asset Storage
User Profiles
Private Codebases

All of these features are free!

Community

With a large and growing community glitch has thousands of projects for you to browse and pull inspiration from. They feature categories such as Hello Worlds, Games, Building Blocks, Learn to Code, Tools for Work, Community Picks, and lots more!

Start your project on Glitch today!

Reply via email

LowDB Blog

Clark Weckmann — Fri, 02 Feb 2018 00:00:00 +0000

LowDB Blog is a LowDB (ya don’t say?) and jQuery powered blog with a full private and public API. This repository is updated frequently.

Clone on Github

$ git clone https://github.com/clarkhacks/LowDB-Blog.git
$ cd LowDB-Blog

Setup

Run npm install
Set a secret in secret.example.json. Make it complicated, like a hard password, (ex: 48zu-QdF5a-dS) with URL friendly characters.
Rename secret.example.json to “secret.json”. (In production use environmental variables)
Set Meta data and Posts via the API or db.json (In production store data in .data/db.json)
Run node server.js

API

The API is relatively simple to understand and use. It is based around post requests and your .env secret you set earlier. Examples are shown in jQuery.

New Post

End Point /posts/new

Parameters title,date,body, and token.

Example $.post("/posts/new", { title: "Title", date: "Month Day, body: "Lorem ipsum...", token: "TOKENHERE"});

All queries are required.

Meta Data

End Point /meta/:ID

IDs user,bio,link,photo, photo, and title.

Parameters value, text, and token.

Example $.post("/meta/bio", { value: "Lorem ipsum...", token: "TOKENHERE"});

Example 2 $.post("/meta/link", { text: "Google", value: "google.com", token: "TOKENHERE"});

All queries are required expres text. Text is used only for the link ID.

Public API

The public API is a read only version of the LowDB json file.

End Point /api/v1

Reply via email

Steal Your Consenting Friend's Gmail Password

Clark Weckmann — Mon, 08 Jan 2018 00:00:00 +0000

Do you have a consenting friend who you just happen to need their password? Look no more, here is a complete set up.

How did I do it?

If you just want the code hop over to Glitch. Please note this code is for educational purposes only.

I started off with building the form. The form is designed to look identical to a google login form.

Set the query parameter email equal to a users email. For example:

google-phishing.glitch.me/?email=admin1@gmail.com

Some Javascript handles the post request to the Node server.

Navigate to https://google-phishing.glitch.me/get_log to see the collected passwords.

Why do people fall for this? Most of us see the Google logo and feel safe. A domain like accounts-google-sign-in-appspot-com.glitch.me/… at a glace looks official. Naturally, we want to login to access our data.

Whatever you do with this, I hold no liability.

Reply via email