Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
30

Create a Markdown Portfolio with Next.js

from noahbuscher.com [alt+shift+b] in technology

So you've set out to create a new portfolio for yourself. You start gathering inspiration from platforms like Godly and Minimal Gallery, draw some rectangles in Figma, and open your text editor. You pause. There's thousands of ways to build your website, how do you decide which to go with? You want your website to be beautiful for the users, but you also want to be able to quickly add new posts and case studies. You decide you want to have a dynamic website (good choice!), but the dozens of CMS options weigh on you. Do you pick headless or full-stack? What if you just make a theme? So many choices. I was faced with the same dilemma a few months ago. I finally had the motivation to create a new personal website, but wasn't sure where to start. I decided to keep things simple, I'd write it with a library I knew very well: React. That only solved half of the equation, however. When it came time to decide how to power the dynamic content on the site, I knew I wanted it to be free, easy to use, and open source. A static site powered by Next.js and markdown was the obvious choice. View the source on GitHub. To get started on creating your portfolio, run the following commands. I'm using pnpm, but feel free to use yarn or npm! pnpm dlx create-next-app@latest --typescript cd into your new project and run the following commands to install the necessary packages and bootstrap Tailwind: pnpm install dayjs pnpm install gray-matter react-markdown tailwindcss postcss autoprefixer -D pnpm dlx tailwindcss init -p That's a lot of packages. Let's break them down... gray-matter will be used to parse "front-matter" from our markdown files (we'll read more about this later!) react-markdown is a React component to render markdown content tailwindcss postcss autoprefixer are requirements for installing Tailwind for Next.js Phew! Let's continue our setup by finishing the Tailwind install... Add the following to the module.exports in the generated tailwind.config.js file: content:...
7th Mar 2023

Stay updated

Get a weekly newsletter with the top 5 articles worth reading every week.

More from noahbuscher.com

Radio Install in a Porsche Boxster

The 987.2 Porsche Boxster is one of the best values in the used sports car market today. There is so much to love about the vehicle, but the OEM headunit is not one of them. It's very dated, clunky, and doesn't support CarPlay (!), so one of the first things I did after picking up my car was purchase and install a new headunit. I selected the Sony XAV-AX1000 headunit because: It's one of the only aftermarket headunits with a physical volume knob The matte black plastic finish very closely matches my Porsche's interior I didn't need wireless CarPlay It's relatively cheap I also picked up this dash kit from Crutchfield as well to have the install look as factory as possible. I will say that the fit is very tight (it's a friction fit) so triple check wiring before sliding this into the dash. If you do happen to get the kit stuck with the headunit in it, I've had luck freeing it with the help of a metal putty knife. My 987.2 has the Sound Package Plus (SPP), which is the middle tier between the basic speakers and the Bose speakers (which are much more difficult to connect). The connector I needed as a result was the Metra 70-9003 harness. The connector may come with a fuse tap, but I opted to just use a separately purcahsed unit that fit well in the fuse box without needing to drill any holes. Note that the Metra 70-9003 harness may not work with the base package. Other supplies needed: Electrical tape Assorted t-taps Assorted spade connectors Low-profile fuse tap Metra 70-1787 harness (seperate from the Metra 70-9003 harness, this is just a donor for the RCA cables) Stranded red wire (used to connect power from fuse tap to headunit) Banana plug adapter for connecing SiriusXM Tools needed: Heat gun/heat shrink Screwdriver set Soldering iron/solder Wire strippers Scissors Also of note that my Porsche did not come equipped with steering wheel controls. If you vehicle does have steering wheel controls, you may need to purchase extra materials in order to get those to work, if so desired. The first thing I did was assemble the headunit inside of the dash kit and set it aside on my desk. The screws that come with the dash kit don't work great but seem to be able to self-tap into the headunit. Just sure you screw them in flush, otherwise the unit won't fit in the vehicle. Next, it's time to wire the Metra harness. You can view Crutchfield's wiring diagram here. Next, you can splice the donor RCA cables from the 70-1787 harness with the speaker wires in the 70-9003 harness. Using your wire strippers, remove the outer layer of shielding from the RCA cables, exposing the positive wire and the stranded negative wire. Twist the stranded wire together and put the heat shrink tube over the cable. Solder the positive wire to the 70-9003 harness positive wire and solder the negative wire to the 70-9003 negative wire for the same speaker. Wrap each connection tightly with electrical tape, slide the heat shrink over the connections, and use your heat gun to set. Repeat this for the three other pairs of speakers. Moving on to the install, removal of the headunit in the 987.2 is straightfoward, only requiring the removal of a few screws. This YouTube video explains it well. I reccommend disconnecting your battery first if possible, as you should do whenever working with your car's electrical system. Be delicate as the OEM headunit is still valuable and you may want to swap it back before selling your vehicle. You can now remove the trim around the fuse compartment and tap the fuse; I used C6 as it turns on and off with the ignition. Crimp a length of the stranded red wire to the tapped fuse connector and snake it through to the headunit area. I had the wire rest on the trim below the steering wheel and it hasn't caused any issues. Re-attach the fusebox surrounding trim and use a spade connector to attach the fuse tap wire to the power input for the headunit. I wrapped the connection with electrical tape to prevent shorts. At this point you may want to tap the parking lights in order to control automatic dimming of the headunit. I did not do that during my install, so you'll need to look at a diagram to see what color to look out for. I will note, however, that you are able to easily manually dim the display in the settings. Now, plug the RCA connectors into the respective pre-amp outputs on the headunit to connect the speakers. When you disconnected the original factory headunit, there was a twelve-pin blue connector. The pink wire with the red stripe powers the vehicle's amplifier (under passenger seat in SPP-equipped vehicles). I used the "Remote Out" wire in the new headunit to power both the amp as well as the powered AM/FM radio antenna. Use t-taps to connect both the red and white striped wire and the powered antenna wire (thicker, solid blue wire in the main harness). At this point you can also connect the SiriusXM adapter if your vehicle is equipped. Finally, after you've checked all of your connections you can (carefully!) slide your headunit into place, reconnect the battery, and test it out! If you are noticing a fair amount of feedback, you can optionally add an inline ground loop isolator between the pre-amp output and your harness to reduce some of the interference. Enjoy your new radio and feel free to email me and I can try and answer any questions you may have. Please note I am not an expert at this and am not responsible for the safety of yourself or and damage to your vehicle, the headunit, etc.

28th Jun 2023 • 31 votes

More in technology

What will you build next? Arduino Black Friday deals are here

You have an idea. Maybe it’s a smart home device that solves an everyday annoyance, a robot you’ve been sketching for months, or an experiment that becomes something bigger. Now comes your first major decision: what hardware will you use to bring it to life? With so many development boards available, choosing the right one […] The post What will you build next? Arduino Black Friday deals are here appeared first on Arduino Blog.

5 hours ago • 1 votes
AI Coworkers Could Be Great, But Only If They Get Serious

On Sunday morning, a lot of us woke up to Grok Bot, the always-on AI assistant, decidedly off. “100% used” read my quota meter. It’d been 45% late the night before. It was an error, but of the Freudian slip sort, and that’s a problem if tools like this are to be taken seriously.

19 hours ago • 1 votes
TIL: Detaching Action Text Images

A Pika author was editing the same post in two browsers. They added six images in Browser A, then later they referenced an old tab editing the post in Browser B. That copy of the editor did not include those images. Browser B saved and removed all six images from Active Storage. A short time later, Browser A saved its newer copy of the post and put the image references back, but at that point the originally uploaded files were gone due to Browser B saving the post without the images. This exposed two separate problems: Missing images produced uncached 404 responses that the editor requested repeatedly. Action Text purged an image as soon as one save removed it from the body. Here’s how we fixed those problems. Why Action Text deleted the images Action Text keeps a rich text record’s embeds synchronized with the attachments in its body. When a submitted body no longer contains an image, Action Text removes its ActiveStorage::Attachment. Active Storage then purges the dependent blob, deleting both its database record and its file. That behavior makes sense when there is only one current copy of a document. It is unsafe when the same post can be open in multiple tabs, browsers, or devices. One stale save can delete an image that another editor is still using. Why the missing images flooded the server Browser A still had the six images in its editor, each pointing at an Active Storage redirect URL: /rails/active_storage/blobs/redirect/:signed_id/:filename Pika uses the ProseMirror-based Rhino editor. Rhino rebuilt an image’s DOM node when its caption or selection changed. Each new <img> element requested its URL again. Healthy images did not cause trouble since Active Storage makes its redirect cacheable. For a purged blob, Rails returned a 404 without Cache-Control, so the browser kept sending the request to Rails instead of reusing the failure. In a gallery, typing could re-request several missing images per keystroke. In these scenarios, this issue led to hundreds of requests hitting our servers. Fix 1: Cache permanent Active Storage 404s A purged blob’s redirect URL can never start working again. Blob IDs are not reused, and uploading the image again creates a new blob with a new signed URL. Sinc there is no concern of a 404 becoming stale, we made a specific 404 cacheable for the same period as a successful redirect: # app/controllers/concerns/active_storage_missing_blob_cache.rb module ActiveStorageMissingBlobCache extend ActiveSupport::Concern included do rescue_from ActiveRecord::RecordNotFound, with: :render_cacheable_not_found end private def render_cacheable_not_found expires_in ActiveStorage.service_urls_expire_in render file: Rails.public_path.join("404.html"), layout: false, status: :not_found end end We included the concern only in the controller serving these blob redirects: # config/initializers/active_storage_missing_blob_cache.rb Rails.application.config.to_prepare do ActiveStorage::Blobs::RedirectController.include(ActiveStorageMissingBlobCache) end (We also offered an update to Rhino that avoids it being so aggressive re-requesting images.) Fix 2: Detach dropped images instead of purging them When a save removes an image from an Action Text body, we now remove the attachment while temporarily keeping its blob. Another browser can save the image again and reattach that same blob. If nothing brings it back, a cleanup job purges it later. First, we added a timestamp for when the image was dropped: class AddDetachedAtToActiveStorageBlobs < ActiveRecord::Migration[8.1] def change add_column :active_storage_blobs, :detached_at, :datetime end end We then intercepted the private callback Active Storage uses to purge a dependent blob: # config/initializers/detach_dropped_embeds.rb module DetachDroppedEmbeds private def purge_dependent_blob if dropped_from_rich_text? blob&.update_columns(detached_at: Time.now) else super end end def dropped_from_rich_text? record.is_a?(ActionText::RichText) && !destroyed_by_association end end ActiveSupport.on_load(:active_storage_attachment) do prepend DetachDroppedEmbeds end The destroyed_by_association check preserves intentional deletion. Removing an image from a saved body detaches it, but deleting the post and its rich text still purges its images normally. Purge detached blobs after a grace period The cleanup query considers both when the blob was created and when it was detached: ActiveSupport.on_load(:active_storage_blob) do scope :unattached_since, ->(time) { unattached.where( created_at: ..time, detached_at: [nil, ..time] ) } end That scope handles both kinds of unattached blobs: A new upload that has never been attached becomes eligible based on created_at. An image removed from an old post becomes eligible based on detached_at. Pika gives both a 30-day grace period: class PurgeUnattachedUploadsJob < ApplicationJob GRACE_PERIOD = 30.days def perform ActiveStorage::Blob.unattached_since(GRACE_PERIOD.ago).find_each do |blob| blob.purge_later end end end If another browser saves the image during that period, it is attached again and the unattached scope excludes it from cleanup. The result Replaying the original two-browser edit now works safely: Browser B saves a body without the six images. The attachments are removed, but their blobs are only marked as detached. Browser A saves its newer body and reattaches the existing blobs. The images remain available and do not need to be uploaded again. If no editor brings a detached image back, the cleanup job eventually purges it. Much better! Reply by email

2 days ago • 1 votes
Machines building machines

Yesterday, a group of MIT researchers released an article titled “Sparks of Weight-Space Programming: LLMs can natively read & write neural network weights”. The piece describes a set of experiments which convincingly show OpenAI’s latest Astra model is able to understand and successfully alter raw weight data. Wowzers! It’s a rough analogy, but an LLM’s weights are sort of like its brain. A set of weights is a large pile of numbers generated during training, and an LLM’s output is derived by running input through the weights using some matrix multiplication and a bit of randomization. While the steps to generate weights are well understood, the weights themselves are extremely opaque. There’s ongoing work to try and explain how weights work, but researchers currently have a limited understanding of what these numbers do. Based on this, I was quite surprised to learn that LLMs are able to act on raw weight data — even if it’s still just in limited cases. It’s unclear if OpenAI’s model was trained on weight data. Even if it was, I still find these results surprising. The article shows the model accurately predicting what a never-before-seen set of weights was built to do, fixing another model by updating its weights, and creating new sets of weights that performed simple tasks. I would not have guessed any of that would be possible a couple of days ago. This whole thing is slightly unnerving. The whole “weights as a black box” thing has always felt a bit sketchy to me, even when I was working with much simpler machine learning models. Now these experiments hint at a future where LLMs could be self-improving in ways that aren’t human-verifiable. Machines building machines, and we can only hope that they’re not doing anything weird. I don’t know if this strategy is scalable, but I’d guess that it’s something more people will be exploring very soon. More and more often these days, I wish we were living in less interesting times.

2 days ago • 1 votes
Traction Heroes Ep. 48: Visions

Harry threw me off course in episode 48 of Traction Heroes. At first, I thought was reading from a book about mind mapping. Soon, it became clear it was about something else: how to define a clear vision for a team or organization. Visions are notoriously hard to articulate. Drawing a picture — especially a picture of the whole forest, plus the trees — can help. The passage Harry read from Cameron Herold’s Vivid Vision explores this idea: So to visualize something a little more tangible, think about a tree trunk in the earth, inner core with its branches stretching out into the sky. Each of those branches contains twigs extend further out. The mind map works in a similar way, a core that branches out into smaller components. Now, apply this to the world of business. As the leader of an organization, you’re firmly planted at the center, and the various areas that contribute to the business branch out: marketing, sales, engineering, and so forth. With that in place, build off that by describing those branches in about three or four bullet points each. In other words, describe what your marketing looks like and sales and so on until you’ve captured every idea. Remember too that among the branches of your business, you want to consider every aspect of the organization: the vibe, informal codes of conduct, the fiscal environment, the scenery, all of that. Deliberately leave out numbers and data. Get a feel for the place. When you step out of your time machine three years from now and walk around the office, what’s happening? What can you say that is typical of the business three years from now? The mind map is an initial foray into the vivid vision and will act as an outline for the rough draft that you, the leader, will then write. I’ve sketched diagrams before when outlining articles, workshops, and presentations, never in service of aligning around a company’s vision. Harry’s done it several times and found it easier than trying to write it out. Seems useful — check out our conversation for more: Traction Heroes episode 48: Visions

2 days ago • 1 votes
📚 BoredReading

You seem to be enjoying this.

Join free to unlock everything.

Create free account

Already have an account? Sign in