DEV Community: ender minyard

✨♻️ Rust Visualized: Pointers as References

ender minyard — Sun, 29 Aug 2021 15:35:06 +0000

How do we visualize pointers?

A pointer points ➡️ to a location in memory. This location in memory contains information that is of interest to us.

📕 References

You can think of the table of contents in a book containing pointers to the chapters in that book.

The table of contents in a book points you to where the chapters in the book are. The pointers don't actually contain the data they are pointing to.

In Rust, this type of pointer is a reference to some other data.

A book that has six chapters gets edited and the sixth chapter is removed. Now, if the table of contents points to Chapter 6 but the book only has 5 chapters, the table of contents is wrong.

A reference to a location in memory that has been cleaned up is an invalid reference.

Rust has mutable and immutable references. Mutable references allow you to change the value they point to, but immutable references just let you see the value they point to.

Using & or &mut points to memory owned by some other value.

If you try to make immutable and mutable references to the same value at the same time, your code will not compile.

At any given time, you can have one mutable reference to a value or an infinite amount of immutable references to a value.

Where does the idea of borrowing come from? You can reference values and make use of those references, but your use of these references is temporary.

When you have a reference to another value as the parameter of a function in Rust, you do not own that value, you're just borrowing it. When you borrow something, you have to give it back.

If you're borrowing a value at the start of a function, you have to give it back at the end of the function.

In calculate_length(s: &String), the function's parameter s is a reference to a string. At the end of calculate_length(s: &String), the memory allocated to s gets cleaned up. Because s is just a reference to String, nothing happens.

🍕 Slices

What if you need to reference part of something instead of the entire thing? This is where the slice type becomes useful. In Rust, you create string slices by writing &word[starting_index...last_index_plus_one].

✨🥞 Rust Visualized: The Stack, the Heap, and Pointers

ender minyard — Mon, 26 Jul 2021 02:14:12 +0000

The part of your operating system that allocates memory for a program as well as loading its code and data into memory is called a loader.

The loader defines four different areas of memory for a program: code, static, stack, and heap.

The static segment contains global variables, the code segment contains machine code, and the stack segment contains local variables that are defined inside functions.

When the function foo goes on the call stack, its stack frame must store foo's arguments, local variables, and return address.

The memory layout of a stack frame is fixed, so the size of variables needs to be known at compile time. The size of variables on the stack cannot grow or shrink.

Stacks are a simple but common data structure. Like a pile of pancakes, the last pancakes that go on a stack are the first pancakes to leave the stack. When you add to a stack, you always add to the top.

The call stack consists of stack frames, which contain arguments, local variables, and return addresses. Let's look inside the stack frame on the call stack when main is called.

If we look inside the stack frames on the call stack when foo(y) is called, we notice that the arguments, local variables, and variable addresses of foo have been added to the top of the stack.

The heap is dedicated to variables whose size is not known at compile time. You have a lot more freedom with variables stored on the heap, but you lose speed. You can control the lifetime of variables on the heap as well as assign them an arbitrary size.

In Rust, you can allocate memory on the heap using types like Box or Vec.

A Box<T> stores a pointer to heap data on the stack. The type of this Box is type T.

Pointers are an important concept, because we often reference variables in Rust using & syntax. When you reference a variable, you are pointing to that variable's location in memory.

7 Useful Github Repos For Developing Your Frontend Projects Faster ⚡️

ender minyard — Fri, 04 Jun 2021 16:59:13 +0000

✨ Instantly fetch Stack Overflow results when an exception is thrown.

shobrook / rebound

Get Stack Overflow results in your terminal whenever an error is thrown

rebound

Rebound is a command-line tool that instantly fetches Stack Overflow results when an exception is thrown. Just use the rebound command to execute your file.

Featured in: 50 Most Popular Python Projects in 2018, the top of r/Python, awesome-cli-apps, awesome-shell, terminals-are-sexy, and awesome-mac.

Installation

Requires Python 3.0 or higher.

Rebound works on MacOS, Linux, and Windows (if you use Cygwin). You can install it with pip:

$ pip install rebound-cli

or apt-get if you're using Linux:

$ sudo apt-get install rebound-cli

Usage

Running a file with rebound is just as easy as running it normally:

$ rebound [file_path]

This will execute the file, pull the error message, and let you browse related Stack Overflow questions and answers without leaving the terminal.

Supported file types: Python, Node.js, Ruby, Golang, and Java.

Contributing

To make a contribution, fork the repo, make your changes and then…

View on GitHub

💡 Look up programming languages from your command line.

chubin / cheat.sh

the only cheat sheet you need

Unified access to the best community driven cheat sheets repositories of the world.

Let's imagine for a moment that there is such a thing as an ideal cheat sheet What should it look like What features should it have?

Concise — It should only contain the things you need, and nothing else.
Fast — It should be possible to use it instantly.
Comprehensive — It should contain answers for every possible question.
Universal — It should be available everywhere, anytime, without any preparations.
Unobtrusive — It should not distract you from your main task.
Tutoring — It should help you to learn the subject.
Inconspicuous — It should be possible to use it completely unnoticed.

Such a thing exists! It's easy to install and there's even auto-complete.

Features

cheat.sh

Has a simple curl/browser/editor interface.
Covers 56 programming languages, several DBMSes, and more than 1000 most important UNIX/Linux commands.
Provides…

View on GitHub

🔎 Search Stack Overflow from the command line.

samtay / so

A terminal interface for Stack Overflow

A terminal interface for StackOverflow written in Rust

example usage

While I like the acronym so, this tool would actually be better described as se: an interface to the StackExchange network. In particular one thing that differentiates it from similar tools is that you can simultaneously search any number of sites in the StackExchange network:

# search using your default configuration
$ so how do i reverse a list in python

# search for a latex solution
$ so --site tex how to put tilde over character

# use google to search stackoverflow.com, askubuntu.com, and unix.stackexchange.com
$ so -e google -s askubuntu -s stackoverflow -s unix how do i install linux

installation

Arch Linux

You can install the AUR package so (tracks latest release) or so-git (tracks master), e.g.

yay -S so-git

FreeBSD

You can install the package so via

pkg install so

NetBSD

You can install the…

View on GitHub

✅ Check that your project is performant and SEO friendly.

thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

🗂 Front-End Checklist

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Other Checklists:

Tip

⭐️ I've just launched a new curated list for indie developers, feel free to check it out! ⭐️

📚 Table of Contents

How to use?

Important

Disclaimer: This checklist is based on Front-End developers' years of experience, with additions from other open-source checklists.

All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:

indicates that the item is recommended but can be…

View on GitHub

🧪 Run accessibility tests on your project.

pa11y / pa11y

Pa11y is your automated accessibility testing pal

Pa11y

Pa11y is your automated accessibility testing pal. It runs accessibility tests on your pages via the command line or Node.js, so you can automate your testing process.

On the command line:

pa11y https://example.com

In JavaScript:

const pa11y = require('pa11y');
pa11y('https://example.com').then((results) => {
    // Use the results
});

Requirements

Pa11y 8 requires Node.js 18 or 20. An older version of Node.js can be used with Pa11y 6 or below.

Linux and macOS

To install Node.js you can use nvm. For example, to install with nvm with Homebrew, and then install the latest version of Node:

brew install nvm
nvm install node
nvm install-latest-npm

Alternatively, download a pre-built package from the Node.js website for your operating system.

Windows

On Windows 10, download a pre-built package from the Node.js website. Pa11y will be usable…

View on GitHub

📝 Generate a README for your Github repo.

kefranabg / readme-md-generator

📄 CLI that generates beautiful README.md files

Welcome to readme-md-generator 👋

CLI that generates beautiful README.md files.
readme-md-generator will suggest you default answers by reading your package.json and git configuration.

✨ Demo

readme-md-generator is able to read your environment (package.json, git config...) to suggest you default answers during the README.md creation process:

Generated README.md:

Example of package.json with good meta data:

// The package.json is not required to run README-MD-GENERATOR
{
  "name": "readme-md-generator",
  "version": "0.1.3",
  "description": "CLI that generates beautiful README.md files.",
  "author": "Franck Abgrall",
  "license": "MIT",
  "homepage": "https://github.com/kefranabg/readme-md-generator#readme",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kefranabg/readme-md-generator.git"
  },
  "bugs": {
    "url": "https://github.com/kefranabg/readme-md-generator/issues"
  },
  "engines": {
    "npm": ">=5.5.0",
    "node": ">=9.3.0"
  }
}

🚀 Usage

Make…

View on GitHub

🔐 Protect your master branch in Git from accidental deletion or rogue code.

dwyl / protect-main-branch

🔐 Protect your main branch from accidental deletion or rogue code (force) push

Protect Master Branch

Why?

If you have an company/org with lots of collaborators who all have write access to your repositories it's a really good idea to protect you main branch from accidental overwrite or deletion.

What?

If anyone in your organisation can git push main --force and destroy all history of the repository, someone could either accidentally or maliciously burn down your house!

Note: we didn't create this meme, force-pushing to main / master is widely known to be destructive and potentially catastrophic.

Who?

This is relevant to people/orgs that have a few GitHub repositories and want to protect them from accidental (or malicious) destruction.

How?

Requirements

Elixir v1.5 (or higher)
Github API Token
5 Minutes

Github API Token

You will need a personal access token with admin rights to all of the repos you want to protect To generate a token, follow this…

View on GitHub

Rust no_std template

ender minyard — Wed, 07 Apr 2021 01:48:41 +0000

There are many in-depth tutorials that explain how to write a #![no_std] binary. This is just a simple, reusable bare-bones template that works for me.

In your src/main.rs:

#![no_std]
#![no_main]

use core::panic::PanicInfo;

#[panic_handler]
fn panic(_info: &PanicInfo) -> ! {
    loop {}
}

#[no_mangle]
pub extern "C" fn _start() -> ! {
    loop {}
}

In your Cargo.toml:

[profile.dev]
panic = "abort"

[profile.release]
panic = "abort"

Instead of simply running cargo build to generate a binary like usual, you need to jump through some hoops to generate a binary.

If you are compiling this binary for Linux, you can run:

cargo rustc -- -C link-arg=-nostartfiles

For Windows:

cargo rustc -- -C link-args="/ENTRY:_start /SUBSYSTEM:console"

For macOS:

cargo rustc -- -C link-args="-e __start -static -nostartfiles"

All of this is useful if you plan on running the resulting binary on bare metal. If you're compiling Rust to WebAssembly, none of this is necessary - simply not using the std library is enough for that use case.

If you're targeting the WebAssembly System Interface, it's more simple and you can even use Rust's std library for that use case.

Full Stack Developer's Roadmap 🗺

ender minyard — Tue, 29 Sep 2020 15:27:46 +0000

It's easy to focus on the front end of web development, but what about the back end? Learning about the back end improves your front end skills.

Here are some resources for full stack development that you can save for later.

💻 How The Internet Works
🔚 Advanced Front End
🖥 Operating Systems
📕 Languages
🖲 Version Control
📓 Database Concepts
📔 Relational Databases
📗 NoSQL Databases
📨 APIs
♻️ Caching
🔒 Security
🧪 CI/CD
📙 Development Concepts
🏯 Software Architecture
🧊 Containers
📬 Servers
⚖️ Scalablity

How The Internet Works 💻

✨ What happens when you go to google.com?
🎉 Introduction to Networks
💫 Browser Networking
🎊 IP Addressing
⭐️ HTTP/2

Advanced Front End 🔚

✨ HTML & CSS
💫 JavaScript

Operating Systems 🖥

✨ Using the command line
🎉 What is an operating system?
💫 Memory
🎊 Unix Programming
⭐️ Bash-Scripting Guide

Languages 📕

✨ Know PHP
🎉 Learn Ruby
💫 Learn Rust
🎊 Learn Go
⭐️ Know Server-Side JavaScript

Version Control 🖲

✨ A Visual Git Reference
🎉 Visualizing Git Concepts with D3
💫 Github Cheat Sheet
🎊 SVN

Database Concepts 📓

🌟 Object-Relational Mapping
🎉 ACID
💫 N+1 Problem
☄️ Sharding
✨ CAP Theorem
💥 Normalization
🌟 Indexes

Relational Databases 📔

✨ Theory of Relational Databases
🎉 Learn MySQL
💫 Learn PostgreSQL
🎊 Learn MariaDB
🌟 Learn MS SQL

NoSQL Databases 📗

✨ Learning MongoDB
🎉 Learn CouchDB
💫 NoSQL Databases
🎊 Graph Databases

APIs 📨

⭐️ Working with APIs
💥 REST
💡 GraphQL
☄️ JSON-RPC
🎉 HATEOAS

Caching ♻️

✨ HTTP caching
☄️ Redis
⭐️ Memcached
🚀 Service workers

Security 🔒

✨ HTTPS + TLS
🎉 CORS
💫 MD5
🎊 SHA-2
💡 SCrypt
💥 BCrypt
☄️ OWASP

CI/CD 🧪

✨ Testing your code
🎉 Jenkins
💫 TravisCI

Development Concepts 📙

☄️ SOLID
⭐️ KISS
💥 YAGNI
✨ DRY
🎉 Domain-Driven Design
🌟 Test Driven Development

Software Architecture 🏯

💫 Microservices and Service Oriented Architecture
🎊 CQRS
⭐️ Serverless

Containers 🧊

✨ Docker Fundamentals
🎉 Docker Cookbook
💫 Kubernetes Cookbook

Servers 📬

☄️ Nginx Handbook
💡 Apache
💥 Caddy

Scalability ⚖️

💫 Distributed Systems
☄️ System Design Primer
✨ Real-World Maintainable Software
🎉 The 12 Factor App
🌟 Architecting Frontend Projects To Scale

This was inspired by a different post. In the other post, I wanted the author to provide resources for the topics they mentioned, so I made my own post. ✨

If you think I missed any resources in this post, comment them below!

The Ultimate Guide to Web Performance 🚀

ender minyard — Tue, 22 Sep 2020 14:52:14 +0000

There's so many ways to speed up your site. Don't you wish every web performance tip was in one place? That's what I thought too, so I put them all in one place: this post.

Use this guide as a reference.

Table Of Contents

HTML
CSS
Images
Fonts
JavaScript
Server
Testing Tools
Frameworks

HTML

✨ Minify HTML
☄️ Order your styles and scripts for pagespeed
⚡️ Eliminate render-blocking resources
🌟 Minimize layout thrashing
🎉 Prioritize resources
✨ Preload critical assets to improve loading speed
💥 Establish network connections early
⚡️ Prefetch resources
🌟 Implement adaptive serving

CSS

⭐️ Minify CSS
✨ Remove unused CSS
💥 Defer non-critical CSS
⚡️ Minimize CSS requests by combining external CSS
🚀 Optimize CSS background images with media queries
⭐️ Avoid CSS inside the body tag
☄️ Inline critical CSS
✨ Avoid expensive styles
💫 Optimize CSS length

Images

✨ Choose the right image format
💫 Choose the correct level of compression
⭐️ Use Imagemin to compress images
💥 Defer offscreen images
⚡️ Properly size images
✨ Replace animated gifs with video
🎉 Serve responsive images
⚡️ Serve images with correct dimensions
🌟 Use WebP images
⚡️ Use AVIF images
🎊 Use image CDNs to optimize images
✨ Use lazy-loading
🚀 Lazy-loading video
⚡️ Use lazysizes to lazy-load images
⭐️ Compress JPEG images
🔥 Optimize PNG images
✨ Optimize SVG vector files

Fonts

💫 Avoid invisible text during font loading
💥 Use preconnect to load fonts faster
⚡️ Optimize Webfont loading and rendering
☄️ Reduce Webfont Size
✨ Keep Webfont size under 300kb

JavaScript

💫 Apply the PRPL pattern
⭐️ Limit the size of NPM dependencies
⚡️ Use code splitting
🌟 Combine external JavaScript
💥 Remove unused code
🎉 Use tree-shaking in Webpack
✨ Minify JavaScript
💫 Serve modern code to modern browsers
🌟 See how CommonJS makes your bundles larger
⚡️ Defer loading JavaScript
⭐️ Prefer Vanilla JavaScript🎊
💡 Use service workers to cache data
🎊 Use web workers
💥 Write optimized code for V8
🎉 Compile your JavaScript to faster JavaScript with Prepack
✨ Compile your JavaScript to faster JavaScript with Closure Compiler

Server

☀️ Use HTTPS
☄️ Keep the size of cookies low as possible
🔥 Avoid bad requests
💫 Set HTTP cache headers
⭐️ Enable gzip and brotli compression
⚡️ Self-host your static asssets
🌟 Enable OCSP stapling
💥 Adopt IPv6
💡 Serve assets over HTTP/2
🎉 Implement HPACK compression
✨ Set proper security headers

Testing Tools

💫 Measure site speed with Pingdom
🌟 Measure site speed with WebPageTest
🎊 Measure performance with the RAIL model
⚡️ Configure Webpack performance hints
⭐️ Use bundlesize
💥 Measure JavaScript execution time
🎉 Use lighthouse-ci
☄️ Use Lighthouse Bot to set a performance budget
☀️ Test on remote real devices
🔥 Use Sitespeed
✨ Use Calibre
💫 Use SpeedCurve
🎊 Use k6
⚡️ Use SpeedTracker

Frameworks

⭐️ Use an ahead of time compiler
💥 Improve Angular performance
☀️ Debug React perfomance
🔥 Eliminate common React issues
✨ Make components connection aware
💫 Implement adaptive serving
🎉 Serve Adaptive Components Using the Network Information API

Did I miss something? Comment any potential additions to the list!

🎉32 Code Tutorials for Visual Learners 🖼

ender minyard — Mon, 31 Aug 2020 16:16:56 +0000

Sometimes it's easier to understand code through pictures than by looking at the code itself. I compiled a list of (free!) code tutorials that help you learn through nice pictures.

JavaScript Tutorials

🏋🏽‍♀️ JavaScript Service Workers, Visualized

🔘 Big O Notation Visualized with Flowcharts

🎬 Node Package Manager (NPM) Explained By Directing A Movie

🥙 Understanding the basics of Express.js by Going Out To Eat

👸🏽 How JavaScript variable scoping is just like multiple levels of government

👨🏽‍🎓 Javascript's Filter Function Explained By Applying To College

🥗 JavaScript’s Reduce Method Explained By Going On a Diet

🎲 JavaScript Promises Explained By Gambling At A Casino

📖 Merge Sort Explained by Reading A Book

🍚 State (in JavaScript) Explained by Cooking A Simple Meal

🛷 JavaScript Arrow Functions Explained By Going Down A Slide

🛁 Bubble Sort Algorithm Explained

🎶 JavaScript’s “this” Explained By Starting A High School Band

💡 JavaScript’s apply, call, and bind explained

🖥 JavaScript Visualized: The JavaScript Engine

📱 Javascript Visualized: Generators and Iterators

💻 Javascript Visualized: Prototypal Inheritance

➰ Javascript Visualized: Event Loop

⬆️ Javascript Visualized: Scope

⤴️ Javascript Visualized: Hoisting

🗺 What is Map/Filter/Reduce in Javascript?

🗾 Javascript Map() Explained By Going on a Hike🧗🏽‍♀️

➰ What is the Event Loop?

CSS Tutorials

🔘 What are CSS Shapes?

🎨 CSS Combinators Explained

🔲 CSS Positioning

Web Performance Tutorials

▶️ What is Adaptive Loading?

⏯ Adaptive Serving

🐅 Loading web pages fast on a $20 phone

DevOps

💡 Docker Fundamentals

✨ CS Visualized: Useful Git Commands

🥜 Kubernetes and Virtual Kubelet in a nutshell

I remember when JavaScript tutorials using emojis to explain concepts were always on the front page of dev.to. Did I miss something? Comment so I can add to the list!

Big O Notation: Understanding Time Complexity using Flowcharts

ender minyard — Sun, 30 Aug 2020 21:46:42 +0000

I highly recommend Edison's post on Big-O complexity in JavaScript. It's the friendliest article I've seen on the topic.

Article No Longer Available

I'll be taking points from Edison here as I visualize Big-O time complexity with flowcharts.

O log(n)

Logarithmic Time

The way I visually understand time complexity is by looking at the iterator, i*2 for example , and looking at how many loops the function has.

O(n)

Linear Time

Linear time and logarithmic time look similar but the output is different because of the conditions of the loop. exampleLogarithmic(100) will return 1, 2, 4, 8, 16, 32, 64, whereas exampleLinear(100) simply loops through all positive integers under 100.

O(n^2)

Quadratic Time

The number of loops coincides with the exponent which n is raised to. You can literally see the function grow bigger as time complexity increases.

O(n^3)

Cubic Time

This isn't the only way to understand time complexity, but it is really helpful to literally see the function grow longer as time complexity increases. Sometimes code written in black and white <pre> blocks doesn't get the point across to visual learners.

Now let's have a quiz. What is the time complexity of this function?

Make your guess...

It's linear! I can tell because there's one loop and the iterator doesn't cause the loop to skip over any integers.

What is the time complexity of this function?

Don't doubt yourself. Although this is a bit different from the first examples, it has linear time complexity.

What is the time complexity of this function?

You may see a pattern here. It's linear!

Now, if you've been following my train of logic, this may be a trick question:

I said that the number of loops denoted the exponent n is raised to. So why is does this have linear time complexity and not quadratic?

This would have quadratic time complexity if it showed a for loop inside of another for loop. However, one for loop that runs after another for loop does not have quadratic but rather linear time complexity.

Okay, so what is the time complexity of this function?

There's nothing tricky here. This has quadratic time complexity.

Now, for your last question - a question that questions all the other questions - what is this function's time complexity?

I hope you're looking at the conditions of the for loop as well as the sheer number of loops. This has quadratic time complexity because of the loop condition i<n*n.

I generated the images in this post with my app, whose development process I described in another post:

How to get 100 on Lighthouse

ender minyard ・ Aug 30 '20

#webperf #speed #javascript #webdev

How to get 100 on Lighthouse

ender minyard — Sun, 30 Aug 2020 11:47:04 +0000

I love fast, accessible websites. I love seeing beautiful images that explain code. Why not combine the two?

As a rule, everything I code is fast. So when I decided to make an app that would take code and generate a visual representation of its internal logic, I was thinking about speed from the very beginning.

Self Host CSS + JS

First step: save all required assets in my filesystem. Not only is this faster than hotlinking from somewhere else, but it is also more secure because third party scripts can be tampered with.

Inline JS + CSS

The less time the browser spends making HTTP requests, the faster your site can finish loading.

Remove Unused CSS

I am ruthless about removing CSS classes and finding alternatives to large code libraries. I used this script to find unused CSS in my project:

Remove Unused JS

The original project loaded all of lodash in order to use a single function from the whole library. Instead of making the browser parse and download lodash just to debounce, I found a tiny debounce script in vanilla JS.

Help The Browser Help You

After following the steps above, I was stuck at a 99 on Lighthouse. I changed the nature of the website to remove more Javascript, even deleting the "export" button, and I was still stuck at 99.

Finally, I remembered my old friend <link rel="preload" src ="code.js" as="script">. This tells the browser to begin loading the script early in the page's lifecycle.

I added <link rel="preload" src ="code.js" as="script"> to the head of my HTML and checked Lighthouse for the thousandth time.

I did it. I have a perfect 100.