20 ms·

How I built my own browser

50 points by skilled 7y ago

masukomi 7y ago
Another interesting related thing is Decaf https://github.com/timbaloney/decaf https://github.com/timbaloney/decaf It is a webkit fork (not electron) that allows you to run ruby in your browser. Hasn't been updated in a while but it used to work.
warpech 7y ago
A very similar product - browser for "responsive designers": https://sizzy.co/ https://sizzy.co/
- Nullabillity 7y ago
  A very similar product: iframe
- jbverschoor 7y ago
  "Stopped working"
peterkelly 7y ago
It doesn't really count unless you're writing your own rendering engine. It's like saying you built your own operating system than in reality is just another Linux distribution.
- deleted 7y ago
  [deleted]
zerr 7y ago
For those who criticize for not creating an own rendering engine: https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browser...
olliej 7y ago
Ehn, it’s making a UI around a chrome web view (well, electron). “Making a browser” like this dates back to the early days of internet explorer - windows provided an explorer view (I can’t recall the api name, and it was activex!). But it was fairly close to drag and drop browser creation. There was an old demo for WebKit where you could make a browser literally with nothing but drag and drop (cocoa bindings made this possible).
- eitland 7y ago
  Yep. You can still do something similar in Windows and sometimes it is nice. (I also believe the JDK has a browser component if you want to go cross platform.) At some point I considered joining together a web view, an embeddable vnc viewer component and some menus to create the perfect tool for the most stupid job I ever held (think manually copy-pasting data into reports that no one ever read but that still had to be completed because of contractual obligations. The only good thing was that it was unbelievably well paid.)
- smhenderson 7y ago
  While I tend to agree with your overall sentiment I'd say this is a bit more than just a thin, dragged and dropped wrapper. I did what you're talking about in the 90's with VB, I thought it would be neat to have a browser with two side by side views. I was learning to write HTML at the time and I found it useful for comparing two versions of the same page. I think the whole thing had less than 20 lines of code and most of the code had nothing to do with the browser controls accept resizing them when the window size changed. Anyway, the headline made is sound a lot more exciting but what he's done is still pretty cool. And I like the fact that the reason he did it was so similar to mine, albeit he did it a lot better!
iudqnolq 7y ago
Interesting project, but adding UI to an electron renderer isn't building a browser. It is difficult and beyond my current ability to do well.
- cerberusss 7y ago
  According to Wikipedia, a browser is an "application for accessing information on the World Wide Web (...) retrieves the necessary content from a web server and then displays the resulting web page". Why do you think he didn't build a browser?
  - thedirt0115 7y ago
    Probably because they think that most of the hard work that goes into building a browser -- like parsing sloppy html, handling CSS correctly, a JS engine, etc -- were not done by the author. To me this feels like like getting a free cheeseburger, adding a leaf of spinach to it, and then saying you built a cheeseburger. But hey, maybe you want a cheeseburger with spinach, and you don't care whether other people think they "built" the cheeseburger or not.
    - Isamu 7y ago
      >the hard work that goes into building a browser ... is a gigantic amount of work, indeed. >like getting a free cheeseburger, adding a leaf of spinach to it If that cheeseburger was the size of an office building, and your spinach leaf was particularly small.
  - deleted 7y ago
    [deleted]
  - djsumdog 7y ago
    I guess technically he built a browser. There are many browsers out there that just use Gecko, WebKit, Blink, etc. under the hood. Hell, Edge just switched from their own Titan engine to Chromium/Blink. Building a control around a render is still neat, but it's not baking the thing from scratch. I think part of the pushback in these comments is that as devs and hackers, a lot of us want to see new rendering engines. Even if they're basic or just render web data differently, it'd be a good change from the narrowing and limited web rendering landscape that's out there.
lallysingh 7y ago
A developers browser sounds like a really useful idea. The danger is in how deep you integrate into the underlying Electron, and how stable those APIs are.
ftio 7y ago
The title is clearly a bit of marketing, but this is really a great piece nonetheless. It's not actually about building a browser. What it is about is building an MVP (perhaps unwittingly), scratching your own itch, iterating based on feedback from early adopters, and discovering a niche where there's a lot of value waiting to be unlocked. If only everyone approached building products this way.
- use-net 7y ago
  it is a horrific rip-off! nobody should spend a penny on this! 20 years ago I put a browser together with 5 clicks using Delphi and gave it away for free, dude.
  - snazz 7y ago
    Please express your opinions more nicely. These comments don’t add to the discussion. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- SirSavary 7y ago
  Your comment is too true, especially about scratching the itch. Looking at the comments on HN first, I expected this to be a tutorial of sorts; I was totally surprised by the content within the post. Reading the article invoked the sense of wonderment and fun that originally drew me to programming/software development. Reading the comments on here did nothing but trigger my PTSD and flare up my anxiety. How is it people can be so pedantic and... mean? I don't know what else to call it when someone finds the the time to sit down and write comments that are hundreds of words long that do nothing but tear apart the creations of another person. Would these commenters also take joy in attending children's science fairs, pointing out that none of them truly discovered anything because they gleaned it all off of books and the internet? It's such a toxic, unproductive attitude. If even a fraction of the energy that went into writing vile comments on HN was spent writing code, maybe we would have one of these fancy new rendering engines half the people in here are raising hell about.
xacky 7y ago
The fact that it is so hard to make a full browser from scratch is why we got a Chromium monopoly. Everyone wants to be free of Chromium but no one puts up the effort as it is easy to just embed the Blink engine. Gecko is the sole major exception to the rule.
- Lammy 7y ago
  I guess it isn't a "major" exception but KHTML isn't entirely dead: https://cgit.kde.org/kdelibs.git/log/ https://cgit.kde.org/kdelibs.git/log/
ryanmcbride 7y ago
I dream of new browsers not just built on chromium.
- kodablah 7y ago
  You need to then dream of easy-to-consume foundations besides Chromium.
  - skykooler 7y ago
    I feel like this is a missed opportunity for Mozilla. Ten years ago, many new browsers were built around the Gecko rendering engine. Today, it's so tightly bound with Firefox that it's hard to separate out into its own thing.
    - BubRoss 7y ago
      Dependencies destroy modularity
use-net 7y ago
What? 10 € or 40 € EVERY month just to use a browser? Are you out of your mind?
- yjftsjthsd-h 7y ago
  I could argue either side of that. On the one hand, I can easily believe that that is the real cost of software. On the other hand, it's harder to justify spending money on something when virtually all of the competition is free, unless it's got compelling features or something else that justifies the extra expense.
- 112 7y ago
  That's up to how he markets it. If there are people who find value in it, and they buy it, then good for him/her. Congrats for building something and putting it out there! It doesn't matter that it's not great (or technically interesting). If it provides value to someone, then you did a good job.
kragen 7y ago
"How I built my own browser, starting with nothing but a browser" Next up: how I painted my own Impressionist masterpiece, starting with nothing but a high-resolution camera, access to a museum, and an inkjet printer; how I wrote my own operating system, starting with nothing but Linux (ahem, https://gitlab.com/kragen/bubbleos https://gitlab.com/kragen/bubbleos doesn't have a kernel yet); how I built my own sports car, starting with nothing but a Lamborghini. Claiming that you've written "a new web browser" because you've stuck your own URL bar and tabs on Blink is absurdity bordering on fraud, like claiming that Shiva Ayyuradai "invented email", that tempered glass ovenware is "pyrex", that physics and chemistry are "not philosophy", that submicron gold particles are "nanotechnology", or that Ayn Rand is "a philosopher". It's the kind of claim that can only survive by redefining a decades-old term to mean something much more trivial.
- hombre_fatal 7y ago
  Doesn't seem that scathing of a criticism. I'd consider Beaker Browser (https://beakerbrowser.com/ https://beakerbrowser.com/) to be its own browser even though it's "just" an Electron app. Brave is another example: it's "just" Chromium. Or Firefox and Chrome on iOS: just Webkit wrappers. You can come up with your own completely novel UI on top of a browser that is indistinguishable from "your own browser" to the end-user. Mincing words with implementation detail just seems like a tired "well actually" HN gotcha.
  - kragen 7y ago
    Both the Beaker Browser and Brave offer new functionality that go well beyond adding some buttons. > You can come up with your own completely novel UI on top of a browser Not if it's Blink or WebKit; they want to draw stuff with pixel-perfect control. > that is indistinguishable from "your own browser" to the end-user In https://news.ycombinator.com/item?id=22359642 https://news.ycombinator.com/item?id=22359642 I list 10–12 ways that even Beaker or Brave are distinguishable from "your own browser".
    - sli 7y ago
      > Both the Beaker Browser and Brave offer new functionality that go well beyond adding some buttons. In what way does the browser in the article not offer new functionality? The entire reason it exists is to offer functionality not found in typical browsers.
deleted 7y ago
[deleted]
adreamingsoul 7y ago
Title seems misleading. Maybe "How I built a custom browser with Chromium"
JohnFen 7y ago
Nice! I've been investigating doing something similar myself, as it's proving very hard to find an an acceptable modern browser. Too bad about using Electron, but I guess I understand why that choice was made.
- kodablah 7y ago
  I found it wasn't too hard to do with Chromium Embedded Framework + Qt [0], but you do have to use C++ which the Op stated fear of. I am no C++ expert and I worked through it though. I did have to reinvent stuff like ad block, auto-completion URL bar, etc but it wasn't bad. [0] https://cretz.github.io/doogie/ https://cretz.github.io/doogie/
  - JohnFen 7y ago
    Fortunately, I'm a C/C++ expert. But, to be honest, if I were OK with using Chromium Embedded Framework, I'd just use one of the Chromium-based browsers instead. The renderer is the hardest part to build, so I'm looking at using an already-established OSS one. Fortunately, I don't need anything fancy in the renderer, so there are plenty of OSS options I can use.
endlessvoid94 7y ago
Hey Killian! Awesome project. Unrelated: I was saddened to see on your website that Guitaryst was no longer around! Thank you again for your early support at Djangy ;)
LockAndLol 7y ago
And yet another browser built upon Google instead of Mozilla tech. I don't know what their game plan is, but if it's giving way to Google in the dev space, they're doing a mighty fine job.

50 points by skilled 7y ago

Another interesting related thing is Decaf https://github.com/timbaloney/decaf https://github.com/timbaloney/decaf It is a webkit fork (not electron) that allows you to run ruby in your browser. Hasn't been updated in a while but it used to work.

warpech 7y ago

A very similar product - browser for "responsive designers": https://sizzy.co/ https://sizzy.co/

Nullabillity 7y ago
A very similar product: iframe
jbverschoor 7y ago
"Stopped working"

peterkelly 7y ago

It doesn't really count unless you're writing your own rendering engine. It's like saying you built your own operating system than in reality is just another Linux distribution.

deleted 7y ago
[deleted]

zerr 7y ago

For those who criticize for not creating an own rendering engine: https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browser...

olliej 7y ago

Ehn, it’s making a UI around a chrome web view (well, electron). “Making a browser” like this dates back to the early days of internet explorer - windows provided an explorer view (I can’t recall the api name, and it was activex!). But it was fairly close to drag and drop browser creation. There was an old demo for WebKit where you could make a browser literally with nothing but drag and drop (cocoa bindings made this possible).

eitland 7y ago
Yep. You can still do something similar in Windows and sometimes it is nice. (I also believe the JDK has a browser component if you want to go cross platform.) At some point I considered joining together a web view, an embeddable vnc viewer component and some menus to create the perfect tool for the most stupid job I ever held (think manually copy-pasting data into reports that no one ever read but that still had to be completed because of contractual obligations. The only good thing was that it was unbelievably well paid.)
smhenderson 7y ago
While I tend to agree with your overall sentiment I'd say this is a bit more than just a thin, dragged and dropped wrapper. I did what you're talking about in the 90's with VB, I thought it would be neat to have a browser with two side by side views. I was learning to write HTML at the time and I found it useful for comparing two versions of the same page. I think the whole thing had less than 20 lines of code and most of the code had nothing to do with the browser controls accept resizing them when the window size changed. Anyway, the headline made is sound a lot more exciting but what he's done is still pretty cool. And I like the fact that the reason he did it was so similar to mine, albeit he did it a lot better!

iudqnolq 7y ago

Interesting project, but adding UI to an electron renderer isn't building a browser. It is difficult and beyond my current ability to do well.

cerberusss 7y ago
According to Wikipedia, a browser is an "application for accessing information on the World Wide Web (...) retrieves the necessary content from a web server and then displays the resulting web page". Why do you think he didn't build a browser?
- thedirt0115 7y ago
  Probably because they think that most of the hard work that goes into building a browser -- like parsing sloppy html, handling CSS correctly, a JS engine, etc -- were not done by the author. To me this feels like like getting a free cheeseburger, adding a leaf of spinach to it, and then saying you built a cheeseburger. But hey, maybe you want a cheeseburger with spinach, and you don't care whether other people think they "built" the cheeseburger or not.
  - Isamu 7y ago
    >the hard work that goes into building a browser ... is a gigantic amount of work, indeed. >like getting a free cheeseburger, adding a leaf of spinach to it If that cheeseburger was the size of an office building, and your spinach leaf was particularly small.
- deleted 7y ago
  [deleted]
- djsumdog 7y ago
  I guess technically he built a browser. There are many browsers out there that just use Gecko, WebKit, Blink, etc. under the hood. Hell, Edge just switched from their own Titan engine to Chromium/Blink. Building a control around a render is still neat, but it's not baking the thing from scratch. I think part of the pushback in these comments is that as devs and hackers, a lot of us want to see new rendering engines. Even if they're basic or just render web data differently, it'd be a good change from the narrowing and limited web rendering landscape that's out there.

lallysingh 7y ago

A developers browser sounds like a really useful idea. The danger is in how deep you integrate into the underlying Electron, and how stable those APIs are.

ftio 7y ago

The title is clearly a bit of marketing, but this is really a great piece nonetheless. It's not actually about building a browser. What it is about is building an MVP (perhaps unwittingly), scratching your own itch, iterating based on feedback from early adopters, and discovering a niche where there's a lot of value waiting to be unlocked. If only everyone approached building products this way.

use-net 7y ago
it is a horrific rip-off! nobody should spend a penny on this! 20 years ago I put a browser together with 5 clicks using Delphi and gave it away for free, dude.
- snazz 7y ago
  Please express your opinions more nicely. These comments don’t add to the discussion. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
SirSavary 7y ago
Your comment is too true, especially about scratching the itch. Looking at the comments on HN first, I expected this to be a tutorial of sorts; I was totally surprised by the content within the post. Reading the article invoked the sense of wonderment and fun that originally drew me to programming/software development. Reading the comments on here did nothing but trigger my PTSD and flare up my anxiety. How is it people can be so pedantic and... mean? I don't know what else to call it when someone finds the the time to sit down and write comments that are hundreds of words long that do nothing but tear apart the creations of another person. Would these commenters also take joy in attending children's science fairs, pointing out that none of them truly discovered anything because they gleaned it all off of books and the internet? It's such a toxic, unproductive attitude. If even a fraction of the energy that went into writing vile comments on HN was spent writing code, maybe we would have one of these fancy new rendering engines half the people in here are raising hell about.

xacky 7y ago

The fact that it is so hard to make a full browser from scratch is why we got a Chromium monopoly. Everyone wants to be free of Chromium but no one puts up the effort as it is easy to just embed the Blink engine. Gecko is the sole major exception to the rule.

Lammy 7y ago
I guess it isn't a "major" exception but KHTML isn't entirely dead: https://cgit.kde.org/kdelibs.git/log/ https://cgit.kde.org/kdelibs.git/log/

ryanmcbride 7y ago

I dream of new browsers not just built on chromium.

kodablah 7y ago
You need to then dream of easy-to-consume foundations besides Chromium.
- skykooler 7y ago
  I feel like this is a missed opportunity for Mozilla. Ten years ago, many new browsers were built around the Gecko rendering engine. Today, it's so tightly bound with Firefox that it's hard to separate out into its own thing.
  - BubRoss 7y ago
    Dependencies destroy modularity

use-net 7y ago

What? 10 € or 40 € EVERY month just to use a browser? Are you out of your mind?

yjftsjthsd-h 7y ago
I could argue either side of that. On the one hand, I can easily believe that that is the real cost of software. On the other hand, it's harder to justify spending money on something when virtually all of the competition is free, unless it's got compelling features or something else that justifies the extra expense.
112 7y ago
That's up to how he markets it. If there are people who find value in it, and they buy it, then good for him/her. Congrats for building something and putting it out there! It doesn't matter that it's not great (or technically interesting). If it provides value to someone, then you did a good job.

kragen 7y ago

"How I built my own browser, starting with nothing but a browser" Next up: how I painted my own Impressionist masterpiece, starting with nothing but a high-resolution camera, access to a museum, and an inkjet printer; how I wrote my own operating system, starting with nothing but Linux (ahem, https://gitlab.com/kragen/bubbleos https://gitlab.com/kragen/bubbleos doesn't have a kernel yet); how I built my own sports car, starting with nothing but a Lamborghini. Claiming that you've written "a new web browser" because you've stuck your own URL bar and tabs on Blink is absurdity bordering on fraud, like claiming that Shiva Ayyuradai "invented email", that tempered glass ovenware is "pyrex", that physics and chemistry are "not philosophy", that submicron gold particles are "nanotechnology", or that Ayn Rand is "a philosopher". It's the kind of claim that can only survive by redefining a decades-old term to mean something much more trivial.

hombre_fatal 7y ago
Doesn't seem that scathing of a criticism. I'd consider Beaker Browser (https://beakerbrowser.com/ https://beakerbrowser.com/) to be its own browser even though it's "just" an Electron app. Brave is another example: it's "just" Chromium. Or Firefox and Chrome on iOS: just Webkit wrappers. You can come up with your own completely novel UI on top of a browser that is indistinguishable from "your own browser" to the end-user. Mincing words with implementation detail just seems like a tired "well actually" HN gotcha.
- kragen 7y ago
  Both the Beaker Browser and Brave offer new functionality that go well beyond adding some buttons. > You can come up with your own completely novel UI on top of a browser Not if it's Blink or WebKit; they want to draw stuff with pixel-perfect control. > that is indistinguishable from "your own browser" to the end-user In https://news.ycombinator.com/item?id=22359642 https://news.ycombinator.com/item?id=22359642 I list 10–12 ways that even Beaker or Brave are distinguishable from "your own browser".
  - sli 7y ago
    > Both the Beaker Browser and Brave offer new functionality that go well beyond adding some buttons. In what way does the browser in the article not offer new functionality? The entire reason it exists is to offer functionality not found in typical browsers.

deleted 7y ago

[deleted]

adreamingsoul 7y ago

Title seems misleading. Maybe "How I built a custom browser with Chromium"

JohnFen 7y ago

Nice! I've been investigating doing something similar myself, as it's proving very hard to find an an acceptable modern browser. Too bad about using Electron, but I guess I understand why that choice was made.

kodablah 7y ago
I found it wasn't too hard to do with Chromium Embedded Framework + Qt [0], but you do have to use C++ which the Op stated fear of. I am no C++ expert and I worked through it though. I did have to reinvent stuff like ad block, auto-completion URL bar, etc but it wasn't bad. [0] https://cretz.github.io/doogie/ https://cretz.github.io/doogie/
- JohnFen 7y ago
  Fortunately, I'm a C/C++ expert. But, to be honest, if I were OK with using Chromium Embedded Framework, I'd just use one of the Chromium-based browsers instead. The renderer is the hardest part to build, so I'm looking at using an already-established OSS one. Fortunately, I don't need anything fancy in the renderer, so there are plenty of OSS options I can use.

endlessvoid94 7y ago

Hey Killian! Awesome project. Unrelated: I was saddened to see on your website that Guitaryst was no longer around! Thank you again for your early support at Djangy ;)

LockAndLol 7y ago

And yet another browser built upon Google instead of Mozilla tech. I don't know what their game plan is, but if it's giving way to Google in the dev space, they're doing a mighty fine job.