Build log: Making a frame-less news desktop app

What was built

This is not what I planned at all, just ran into problems, state issues primarily, but the base part works eg. a frameless/transparent app. The slides are supposed to well slide…

Useful tips

  • do not develop against a live API especially one that costs money — copy a response and store that as a mock value. NewsAPI is free for developers but capped to 500 req/day.
  • plan your states eg. Alabama, Washington, etc…

End result

Partial failure, dumb state problems.

Initial thoughts

I have this super neat image/idea in my head. You have this news app that is transparent, so you see an image, then the content under it(basic title/paragraph) and a next slider with settings(gear icon). Maybe it will be more “glass like” for the case of backgrounds being hard to read. But it’s possible! I just looked it up, Electron can do frameless windows.

Note: it’s not tied to the task bar, I just envision using it right above the taskbar as a small window

The build

This should be straight forward, the only thing is I just have to “turn it on” eg. set Electron to be frame-less and I saw that it is possible.

  • get API for NewsAPI
  • build interface with sliding transition/fade(opacity)
  • add webworker to self update in the mornings
  • deploy in Electron
First API call

The interface

So… one thing I’m aware of by this point is the separation of state so that a little re-render in a child does not affect the parent’s state. The parent will call the API once(or a very few number of times) and the UI will change without calling the API multiple times(that would be bad, counts against the 500 limit). You should only call when the worker calls it(next morning) or you hit refresh on the interface.

Just thinking stuff through
Haha guess who. Guess I can’t specify the size of the image. I saw some lag loading it. Yeah it’s over 1MB hmm.
Prototyping in background… my background wallpaper changes on my desktop so I don’t know how well this will look. The text has text-shadow in case. This layout is not attractive I realize that.
ehh… gotta grind that Leet Code “accidentally” solve an injected problem from a FAANG company ha jk
This brings back memories of my front end job. The ones on the left/right won’t be visible, I just kept them on for the screenshot.
The ol’ Ctrl + Y and Z
heh

The Electron part

Since I’m out of time, I’m going to just do the install of Electron, then steal the main.js file from my cross-platform-app and it should work. It just maps to a build folder from React, I’ll probably have to change the path a little. This is what you get for not planning.

I took that blurry shot Sony Nex-5n mmm
Moveable by a CSS class but have to apply it to body so hover on image works I think
Usable… needs design tweaks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacob David C. Cunningham

Jacob David C. Cunningham

Software developer and general technology tinkerer