Vue, and PDFs, With Silvan Mühlemann - VUE 198
In this episode, Steve sits down with Silvan Mühlemann and talks about his history with Vue. They cover a couple blog posts of Silvan's where he uses Vue to generate various PDF types, and then talk about his development history and how he and his company got into Vue. They with Silvan's picks of some great AI tools, and of course, Steve's fantastic dad jokes.
Hosted by:
Steve Edwards
Special Guests:
Silvan Mühlemann
Show Notes
In this episode, Steve sits down with Silvan Mühlemann and talks about his history with Vue. They cover a couple blog posts of Silvan's where he uses Vue to generate various PDF types, and then talk about his development history and how he and his company got into Vue. They with Silvan's picks of some great AI tools, and of course, Steve's fantastic dad jokes.
Sponsors
Links
- Silvan Mühlemann
- Mühlemann&Popp - digital business models
- Events - tilllate.al
- How VueJS can replace Photoshop (sort of)
- How to generate beautiful-looking PDFs in Single Page Applications
Picks
- Silvan- GitHub - CompVis/stable-diffusion: A latent text-to-image diffusion model
- Silvan- Introducing Whisper
- Steve - Dad Jokes
Transcript
Steve_Edwards:
Hello everybody and welcome to yet another exciting episode of Views on View. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host. Today we have with me our very special guest coming all the way from Switzerland. Did I get that
Silvan_Mühlemann:
That's
Steve_Edwards:
right?
Silvan_Mühlemann:
correct, Zurich.
Steve_Edwards:
Okay, Sylvan Muleman. Muleman, how you doing Sylvan?
Silvan_Mühlemann:
I'm doing fine, thanks. Thanks for having me, Steve.
Steve_Edwards:
My pleasure, my pleasure. We are an international podcast interviewing people from all over the world. I always like to talk about that. So to start out before we get into our topics regarding Vue, Sylvan, why don't you just tell, give us a little background on yourself, who you are, development background, why you're famous, what you do, so on.
Silvan_Mühlemann:
All right. Okay. So, I'm the CTO of a company based here in Zurich with 50 employees. Our company is, we call that company builder. So, what we do is that people with business idea, they come up to us, they share their idea with us. We provide them the background. the knowledge about entrepreneurship, but also about software development. And when I talk about software development, it is about web technologies. for example, Vue, that is, and this experience on how to, to build companies or build up new web-based business models. We have that from our first company that I founded right after I graduated. It was a very early social network. So it was year 2000. And so it was really the... We founded that in the middle of the dot com... crisis, but that platform we built there got quite successful. So 2006, it was the second biggest website or application in Switzerland. And yeah, there we did this for 10 years. We learned a lot about running big websites. We had something like 60 physical web servers there to keep that running. And yeah, so after we sold that company, because we had to sell it because that time Facebook got big and there wasn't the need anymore for like a small Swiss social network, everyone wanted to be on. Facebook and yeah, so we sold that company and then we started with this new company that I was talking about first. And now with my current project, I started for, we started very small. So I was, we were like two people. I was the one doing the programming and over the years we Continued growing. We're now, as I said, 50, 55 employees, 40 engineers. And so my job evolved a bit. And so I'm doing a lot of topics like software architecture, security topics. And But still, I still love the programming. And although I don't do so much programming for like our customers, I rather do the proof of concepts, exploring new technologies, like the ones you have seen on the Medium post, for example. Or also during the... I use the weekends to do the programming there. I love exploring new technologies like things like machine learning. I built this application in JavaScript, which where you have an animation of bugs where you have in a, in a, in a kind of a maze and that these bugs, they are learning. how to go through that maze. That's something you can look at when you visit my webpage. So I've know many different technologies but my main passion is front-end development. So that's why also most of my projects are built with Vue or usually type. with TypeScript nowadays. Yeah. So besides that, I'm married. I have two kids and they're already teenagers. So, so I have more time now for, uh, for programming. Yeah.
Steve_Edwards:
Yes, I understand how that goes very well. So out of curiosity, what are the names of the two companies you talked about? So your current one is, actually I'll give it to you because I found it, is it Moodlemen and Pop? Is that?
Silvan_Mühlemann:
Yeah, that's correct. Yeah. Difficult to pronounce for a non-German speaker.
Steve_Edwards:
Oh, I think I did okay. But, uh,
Silvan_Mühlemann:
Absolutely, very good, very good, yeah.
Steve_Edwards:
mooliaman-pop.ch. And then what was the name of the social network that you initially founded that Facebook wiped out?
Silvan_Mühlemann:
Yeah, it was called till late with 3L, the short form of until late.
Steve_Edwards:
Oh, gotcha,
Silvan_Mühlemann:
And
Steve_Edwards:
okay.
Silvan_Mühlemann:
it was because the business model, how we got people attracted on the site. I think that's interesting. It was because we, back in year 2000, people didn't have... cameras on the mobile phone. So they went out. So we had a team of photographers. We went out to clubs, took pictures in those clubs, distributed business cards with the, uh, with the address of our website and put those pictures on the website and then people came to visit our site and, um, and look at those pictures. And it's something nowadays not necessary anymore because people have. their camera on the mobile phone. But back then it was very successful and generated a lot of page views.
Steve_Edwards:
So I see it looks like tillate.com is still out there and there's a Tillate community on Facebook. Is that the same thing or is that something different? It looks like it's geared towards nightlife social networking.
Silvan_Mühlemann:
Yeah, exactly, that's still it. And I wasn't aware that it's still alive, but nice surprise.
Steve_Edwards:
Well, maybe not. The tillate.com site does. And I just found the group on Facebook
Silvan_Mühlemann:
Yeah.
Steve_Edwards:
interesting.
Silvan_Mühlemann:
Maybe,
Steve_Edwards:
So tillate,
Silvan_Mühlemann:
maybe
Steve_Edwards:
yeah.
Silvan_Mühlemann:
it's some nostalgist, you know, people around my age, the 40 year olds, they, they
Steve_Edwards:
Uh
Silvan_Mühlemann:
love
Steve_Edwards:
huh.
Silvan_Mühlemann:
to dwell in those times and then it's some, yeah, they formed
Steve_Edwards:
Well,
Silvan_Mühlemann:
maybe
Steve_Edwards:
it looks...
Silvan_Mühlemann:
this group.
Steve_Edwards:
So there's a... Yeah, it looks like it's old stuff because there's a UK till late Twitter account, but the page it links to is in existence. So yeah, it looks like it's maybe sort of died, finally.
Silvan_Mühlemann:
There is actually, there's still one subsidiary in Albania. I
Steve_Edwards:
Oh,
Silvan_Mühlemann:
don't
Steve_Edwards:
really?
Silvan_Mühlemann:
know the address and they even have a magazine. So, still,
Steve_Edwards:
Oh, interesting.
Silvan_Mühlemann:
it's interesting how, I'm not the owner anymore, I didn't know about that. It's interesting how a company can even live for such a long time without the original
Steve_Edwards:
Right.
Silvan_Mühlemann:
founders knowing about it.
Steve_Edwards:
Yep, tilllate.al. It's rockin' and rollin', it looks like. All about the nightlife for sure, interesting. Cool. So, there's a couple things we wanna talk about. I wanna get back into your company and your development history, and all the things you've seen over the years, just reading the bio that you gave us, it really parallels a lot of what I saw in my development history as well. The thing that had attracted you, attracted us to you, or got our attention I guess, was a couple blog posts you made. And there's one that I think is pretty cool. It shows a very simple use of Vue and how with one little component you can do something pretty cool that doesn't need a lot of work. And it's titled, the way the blog post is titled is, how Vue.js can replace Photoshop, sort of. So we'll put the link in the show notes. It's on the Mulemen and Pop site. So you wanna walk us through, I guess, the use case, what you were looking to do and how you used view to create this little Photoshop replacement.
Silvan_Mühlemann:
Yeah, sure. Sure. I have to admit replacing Photoshop is a bit of a click bait here because, but
Steve_Edwards:
Just
Silvan_Mühlemann:
in that
Steve_Edwards:
a little bit.
Silvan_Mühlemann:
particular place it really did it. So the story behind it was that my business partner Marcus, he had his wedding planned and we didn't have a gift for him. So. A colleague of mine came to the idea, he loves his company so much, let's make him a gift where we have a picture of each of our team members on it and each of these 50 team members should write a little note, a wish for the wedding. So I was thinking, how can I do that quickly? Um, so the initial thought is, okay, I'm going to ask everyone to send me their picture and then I'm going to use Photoshop and try to place those pictures within Photoshop manually. Yeah. But that sounded like really a lot of work and, um, Me being a Vue developer, I thought, okay, let's try to use the PDF generation capacities of modern browsers to generate the PDF programmatically using Vue. So the idea is I use Vue, I generate the page, I convert that to PDF, and I use that PDF and I print that as a poster. So The approach was very simple. I used an API connecting to our human resource management tool, Peopleforce that is. It pulls all pictures of our current employees. It generates one webpage and using the CSS. calculation capabilities using basic CSS elements or rules. I'm generating one big grid with all photos of our team members along with their wishes. Then on my local machine, I just opened that page, set the... or save it as large PADF. And yeah, so within, I think, two or three hours, I had a neat looking gift for my business partner. And thanks to this being done programmatically, I was easily able to tweak margins, add a new employee, remove. one employee who already left the company. So I was really able to dynamically modify the content. And yeah, so I printed that. We put that in, I framed it. And now Marcus was really happy with that. He put that on the, he still has it in the background of each of his video conferences. because he liked it so much. And besides that, I also, we use that for internal, for marketing on LinkedIn. And yeah, it was a really fun thing to do, not much work and with the great results. So it's really the kind of project I love.
Steve_Edwards:
Okay, so a couple things I want to point out in the blog post, little details. One of the things you're talking about is because this is for printed media, you really wanted to fine tune the placement of the image on the page. And so you mentioned that with CSS you can actually specify millimeters and centimeters as size units. That was something I was unaware of. I haven't needed to do that myself. But that allowed you, you talked about how that allowed you to get it exactly as you need with the framework of a specific paper size, I think A2, which is a real common one. So anything else, did I miss anything on that? Anything else
Silvan_Mühlemann:
No,
Steve_Edwards:
you want
Silvan_Mühlemann:
that's
Steve_Edwards:
to tell us
Silvan_Mühlemann:
correct.
Steve_Edwards:
about that?
Silvan_Mühlemann:
I, I think most, uh, developers are afraid of those units. They're prefer because it's many things. What, what are these units good for? But if you want to generate something, you want to print later, those are the perfect units. And particularly you can also do then calculate calculations with it. And it was. Yep. a very convenient way to achieve my goal.
Steve_Edwards:
Okay, and then a little humorous note I liked is you had a tweet, I think a Zhaowei Zhang is how you pronounce the guy's name, Chinese it looks like. Never spend six minutes doing something by hand when you can spend six hours failing to automate it. I'm raising my hand saying yes, but that's because the fun is doing the automation, not the end product. But you said you were able to do it in less than six hours, what three or four hours under six hours? So how long did it take you to whip this up?
Silvan_Mühlemann:
Yeah, I think it was something like three hours to do that. And the most important thing is I didn't fail at it. And yeah, that's one
Steve_Edwards:
That's always
Silvan_Mühlemann:
example.
Steve_Edwards:
good not to fail. That's always,
Silvan_Mühlemann:
Yeah.
Steve_Edwards:
well, not always good because sometimes you learn more from failing, but in this case.
Silvan_Mühlemann:
Yeah, absolutely. Yeah. But I agree with this, uh, with this tweet. Yeah. And you always learn something. I mean, I, I was able to use this for, I share this with our developers, all those who, who thought, who never thought that, um, um, okay, please edit this out. Um. So it was a good example for our developers and to show how important it is to think outside the box, because that's just a use case for Vue, which is very uncommon. And so it also has, for me as a CTO, it has also another purpose besides just generating that. that gift.
Steve_Edwards:
Right. So actually, yeah, we'll come back to that in a minute, but there's interesting tie in here. So there's another blog post you wrote about, and this is, I guess this is more JavaScript specific than, I mean, more generally JavaScript, excuse me, as compared to view specific, but you're talking about generating beautiful looking PDFs in SPAs and single page applications. And we've talked about the structure before, so I want you to explain that. But I'm just curious, in this one, when you saved the PDF, you said you just generated in Chrome. Did you use the procedure from this other blog post with using your back end, or did you use some other more simple method to generate the PDF in the browser?
Silvan_Mühlemann:
So in the case, you're still talking about the one, the first blog post, right? The
Steve_Edwards:
Yes.
Silvan_Mühlemann:
one with the, yeah. No, there I just use the print function of the browser.
Steve_Edwards:
Okay.
Silvan_Mühlemann:
Print and then save as PDF.
Steve_Edwards:
Right, well no need to reinvent the wheel if you don't need to, right? Well, sometimes it's fun, but. When speed is the concern, then reinventing the wheel isn't necessary. So let's move on to your other blog post, generating beautiful looking PDFs in single page applications. So you're certainly not unique in wanting to do that. I know in the past I've done some. some PDF generation of some fairly complex legal documents from AngularJS. And I think I used something like PDF Make or some other JavaScript library that just built it and then sent it to the browser and print it from there. So tell us about this process that you came up with.
Silvan_Mühlemann:
Mm-hmm. Yeah, so. Here, it's not the first time that we have created PDFs out of web application. That's a task I had already did a dozen times, but in the past, usually the approach was that some server-side application, some Python or PHP application was generating an HTML page. And then we sent this through. Back then we had WK HTML to PDF to convert that page to a PDF. Now in this case we developed the PDF I wanted to print was generated using an application which is used View and Noxed in the frontend. On the backend we had a Django application. And there the actual page, the report, was generated in the frontend. So how do I get this page, the content of my browser, into a PDF? The first approach we tried was, let's just trigger the print functionality of the browser by using, I don't know, window.print, I'm not sure if it's the correct one, to make the print dialog display and have every user just print that page like this. The problem with this approach was that every user, this report looked differently in every... browser because Firefox rendered the page break CSS or processed this page break CSS rules in a different way than Chrome. I don't know why. Probably nobody uses those CSS rules for printing. But anyway, client was unhappy because it looked different in every browser type. So we thought, how can we, we need to have this run by a headless Chrome on the server. And so that every user is using the same engine to generate the PDF. Now the problem, this means we wanted, what we needed was to generate that. that web page or that content of the DOM on the server. But to be able to convert this then to a PDF. But this is quite complicated because to get to that report, the user clicked a lot of different buttons and chose filters. In order to do that on the server, we would have had to replicate these clicks of buttons or somehow store the state from the client and pass it to the server. So instead of trying to do this, what we did is we just took the content of the DOM and sent that content to the server. And that server sent it. to a headless Chrome and use Puppeteer to populate an empty webpage with that DOM content. And then we use that, the headless Chrome's PDF, Save as PDF functionality to convert that to a PDF. It is quite difficult to explain, but on the blog post I have a diagram which explains it. But the
Steve_Edwards:
So
Silvan_Mühlemann:
result?
Steve_Edwards:
yeah, when I think of headless chrome, I mean, the way I'm usually interacting with it is browser testing. So with the Laravel and Vue app where we're using Dusk, it fires up a headless chrome, so all the engine without the user interface and does its thing and then tells you how it works. So it sounds like you're doing something similar here and just using that to render your PDF.
Silvan_Mühlemann:
Yes, exactly. That's correct. Yeah. Yeah. With the users, with the users, user agent used that content is used as source for, for generating the PDF. So it's sent back to the server into the headless Chrome. So it's a bit unconventional. But it was the only way to solve the problem. At the end of the day, now every PDF looks good and the customer was happy with the result.
Steve_Edwards:
Okay, so looking at the diagram here in your blog post, and we'll have the link to the blog post in the notes so you can look at it yourself. But so the HTML markup, the DOM, gets set to Dijengo, which is a Python framework, right? So in there you use puppeteer to call Chromium, pass it the document, and then, so there's some Python code that actually does the PDF generation. I would assume there's some sort of custom code in there to to tell it, okay, this is what we want the PDF to look like, correct?
Silvan_Mühlemann:
Yeah, so we're using the Python port of Puppeteer. It's called Piperteer and that code is then generating the PDF.
Steve_Edwards:
Okay, so that sends it back to Django, and so then you send that back to your view front end, is that right, or JavaScript front
Silvan_Mühlemann:
Yep.
Steve_Edwards:
end, which then in turn takes the rendered object and sends it to the browser.
Silvan_Mühlemann:
Yeah, so the generated PDF is stored in Google Cloud Platform storage. And yeah,
Steve_Edwards:
Okay, that's the object store in your diagram. Okay,
Silvan_Mühlemann:
exactly.
Steve_Edwards:
okay. So then you're just sending a link to that object store, to the PDF in the store.
Silvan_Mühlemann:
Correct.
Steve_Edwards:
Okay, so it's not just rendering it in the browser, you're generating it on a backend and then saying, okay, here's a link to your document.
Silvan_Mühlemann:
Mm-hmm.
Steve_Edwards:
Right, yeah, we do that, in my app, we do that with, we use Amazon S3 buckets to generate exports and say, here's the link to your export. So very simple. So. So in other words, we're using the server back end, just to wrap this part of it up, to generate a consistent looking document because of differing renderings based on your browser. So you have a consistent document every time.
Silvan_Mühlemann:
Exactly.
Steve_Edwards:
Excellent. Yeah. Okay. Cool. Yeah. That's now that I look at it, I see it's, it's, I haven't seen it with puppeteer, uh, using headless chromium, but that's, that's a very great use of the chromium, uh, engine since you have a dom, you're starting out with the dom, right? With all your information. And you can just pass it and use that. Excellent. All right, so let's move on to one of the more fun things to talk about, at least for me, and your journey through web development. So you started in 1999, so a little, right about the same time I did actually, before most anybody started in web, it really wasn't, what, maybe early 90s, I can remember the first dial-up web pages in mid-90s, I guess. So how'd you get started? And in particular, we can talk about the different JavaScript frameworks, going from vanilla JavaScript to some of the, when people started to make tools to make it easier to use JavaScript and do stuff for you.
Silvan_Mühlemann:
Mm-hmm. Yes. So the interesting thing when I was starting with web development, it was my personal homepage and something like 98 and there I used, I use front page. That was my first Microsoft front page.
Steve_Edwards:
You and me both. Microsoft front page. That was where I started out too, drag and drop.
Silvan_Mühlemann:
Yeah, exactly. I don't know if it still exists, but yeah. And there, I think there was, there was already JavaScript back then, but for things like, I remember for, I wanted to have a, create a button where I can hover and it changes the color. They didn't use JavaScript for the hover effect. What they used? They used, a Java applet to achieve this.
Steve_Edwards:
Oh boy, I can remember those. Okay, yeah.
Silvan_Mühlemann:
Took
Steve_Edwards:
That's what
Silvan_Mühlemann:
forever
Steve_Edwards:
front page
Silvan_Mühlemann:
to
Steve_Edwards:
use?
Silvan_Mühlemann:
load.
Steve_Edwards:
Oh yeah, of course. That's what front page use you're saying?
Silvan_Mühlemann:
That was in front page. Yep. But, um, then I think the first contact, yeah, then the next step of big milestone for me was the first approach on how to use, um, Ajax, but the, the first version of Ajax or wasn't was done in a very weird way. I don't know if you remember that or if you also did it like this. It was a one pixel wide iframe and used some and used this to do connections to the to the server So a very weird hack. So just we manipulated the source attribute of the iframe with passing the URL there. And then it loaded some data from the server into this hidden iframe. So this was really a nasty way. But we used it to build our first chat room on our social network.
Steve_Edwards:
I'm sure there are no security issues either, right?
Silvan_Mühlemann:
No, it was like 2003 or so. No And then I think the first actual framework that I'm I remember was a prototype 2006 yeah and
Steve_Edwards:
Yeah, I remember that and Mood Tools, if I remember correctly. Mood Tools, I was at a pretty large company then, and one of our developers was using Mood Tools right around in 2006, about the same time. But yes, I remember Prototype. I think Scriptaculous is another one that comes to mind.
Silvan_Mühlemann:
Yes, exactly. Exactly. Yep. Yep. Scriptical prototype. I looked at it, what it did. It looks very close to this, to jQuery later with this dollar sign and using a CSS selectors to find the elements on the page and that is this dollar, dollar F, uh, and then parentheses to locate the forms and How is cryptoculus what? I
Steve_Edwards:
I
Silvan_Mühlemann:
cannot
Steve_Edwards:
don't remember, I didn't really use it myself. I was a, at the time I was in a sort of a systems analyst role, but I remember watching our developer who was using that at the time just to do some, add some animations and open and closing accordion type effects and other things. Not so much Ajax requests, but just page interaction type of things.
Silvan_Mühlemann:
Yeah, right, right, I missed that one. Yeah, but we also used it in our company. But, you know... The big... Um, next step, uh, big framework I'm aware of is then jQuery. And I looked up when I started, we started using that one. 2009. Uh, and for me, it was just a revolution. Suddenly it was so easy, not only to locate the elements on the page, but also to, to hide them, then to fade out, fade in, change color. It was. I couldn't believe that it's so easy.
Steve_Edwards:
I remember, now did you use Backbone? You mentioned Backbone, and I remember
Silvan_Mühlemann:
Yeah?
Steve_Edwards:
when I was in the Drupal world, Backbone had been incorporated into, I think version five, maybe version four, I don't remember. And then jQuery was added as well. But did you use Backbone?
Silvan_Mühlemann:
Yeah, a bit. I think Backbone was really very low level, a lot of utility functions, right?
Steve_Edwards:
I believe so, I never really interacted with it, so I'm not
Silvan_Mühlemann:
Yeah.
Steve_Edwards:
sure.
Silvan_Mühlemann:
It was, it's still alive or it's, it has been then replaced by. I think underscore. I don't, I'm not sure. It's, I think those two are somehow related.
Steve_Edwards:
Well, there's underscore and then underscore became low dash, I believe.
Silvan_Mühlemann:
Oh no, then I mixed that up. So it, yeah, backbone was something else. Yeah. But I remember those times with jQuery there, we, we didn't have any state management in the,
Steve_Edwards:
Right.
Silvan_Mühlemann:
in the browser. I, I remember I stored, I think I stored all the state always in, in data attributes, if I remember correctly.
Steve_Edwards:
Oh, on the HTML elements, right.
Silvan_Mühlemann:
Yeah, exactly. I don't know if it was good practice or not, but that's how we did it.
Steve_Edwards:
Well, sometimes the best practice is what works.
Silvan_Mühlemann:
Yeah, exactly. Yeah,
Steve_Edwards:
Exactly.
Silvan_Mühlemann:
and then...
Steve_Edwards:
So were you using any CMSs to generate your HTML? Because all of these, a lot of these were, especially jQuery, you had to have your HTML and then it would attach to your HTML element and then load up and then you could do your things. So what were you using for generating your HTML code initially?
Silvan_Mühlemann:
Yeah. So we came from the PHP world. This means, well, the first framework was the, was, I'm, I, I wrote it myself as every developer has to first write his own framework.
Steve_Edwards:
Right.
Silvan_Mühlemann:
Of course, it wasn't, it was completely insecure. We, we had SQL injection attacks there, but even
Steve_Edwards:
Ha
Silvan_Mühlemann:
then
Steve_Edwards:
ha
Silvan_Mühlemann:
we
Steve_Edwards:
ha.
Silvan_Mühlemann:
moved. Then we thought better to move to something proven. We used Zen framework, PHP
Steve_Edwards:
Mm-hmm. Right.
Silvan_Mühlemann:
and Symphony also
Steve_Edwards:
Right?
Silvan_Mühlemann:
in PHP. So
Steve_Edwards:
Yeah, I'm remembering
Silvan_Mühlemann:
that's
Steve_Edwards:
there was phpNuke, which.NET Nuke, I can remember having somebody build a site for an organization I belonged to, and.NET Nuke. PHP Nuke, there's CakePHP, I'm not sure when that one came along. So yeah, you started to see some PHP frameworks for sure.
Silvan_Mühlemann:
Yeah, but then, yeah, but yeah, back then everything, the whole, we didn't have the separation between front end application, back end application. This is something that started in our case 2016 maybe, but back then we just had back end developers and they did a bit of front end and that completely changed now since then.
Steve_Edwards:
in terms of separating front end versus back end?
Silvan_Mühlemann:
Yeah, yeah,
Steve_Edwards:
Well,
Silvan_Mühlemann:
so.
Steve_Edwards:
now you also have the full stack term. You look for job descriptions out there and always looking for a full stack developer that can do both back end and front end and so on. But yeah, I can remember, I always sort of categorized myself as a back end person just because of my familiarity with PHP and all the server side. And... not so much the JavaScript or CSS, HTML side of things.
Silvan_Mühlemann:
Mm-hmm. Yeah. Yeah. No, the full stack developers are still my, um, but most is my preferred profile because, um, yeah, but yeah, you, you have let you, they can do a whole application by themselves. You don't have this split with communication issues and, but it's hard to find nowadays developers who know both who have, because everything got so complex nowadays.
Steve_Edwards:
So then the JavaScript frameworks started coming along. I think Angular was, to my recollection, was the first sort of really well-known front end framework, the first for Angular, what's now referred to as AngularJS.
Silvan_Mühlemann:
Mm-hmm. Yeah.
Steve_Edwards:
Did you ever work with Angular, React, or any of the other various JavaScript frameworks?
Silvan_Mühlemann:
We worked with Angular, we did one project, but quite quickly we switched over to Vue. One of our developer was really passionate about it and showed me how easy it is compared to Angular where you had to write a lot of boilerplate code in the beginning with Vue. you were able to just add the script tag load view and then you were, you could start. uh, start with components and, um, it was really very easy to get started. And that was like 2016, I think. And it sits since then our whole company is just using view. And, um, yeah, we also, we hire react developers, but, um, yeah, we, we switched them to view. because, yeah, we just. Yeah, it's mainly for historical reasons, I think, and we never saw a reason to switch, to move away from it.
Steve_Edwards:
So did you start with, I've never heard too many people talk about view one, view two's always seem to be the dominant version, at least since I came in, that doesn't mean a lot of people didn't use it, it just means I wasn't around. Did you come in with view two?
Silvan_Mühlemann:
I... we started in 2016 so I'm not sure if we already had to view 2 back then but I can't remember and I think the difference between 1 and 2 weren't as big as the ones between 2 or 3 but I'm not in... I'm not sure.
Steve_Edwards:
Yeah, I don't think that the change was quite as big. So yeah, it looks like according to Wikipedia, View 2 was released on September 30th of 2016.
Silvan_Mühlemann:
Oh, probably then we, we used view two from the start because I cannot remember any tasks in the backlog saying we need to migrate this project to view two.
Steve_Edwards:
So you've mentioned, when we were talking about the PDF generation, you mentioned that you were using Nuxt. So in your either personal or business applications, do you primarily use Vue as a single page application? Are you using Nuxt with server side or static generation? Or what tools does your company tend to use on a regular basis?
Silvan_Mühlemann:
Yeah, so the standard is Vue with Nuxt. And the reason is that the first application we made without Nuxt, every application looked differently because Vue isn't opinionated. It doesn't tell you how to structure your application. And So one of our developer suggested, showed me Nuxt and how it, it provides proven approaches to different solutions like routing and state management and authentication. And that's why all our recent application that we built are using Nuxt. And If we talk about tools or standards that we have, we also use TypeScript by default. We did have some discussion in the team. What is better TypeScript or playing JavaScript? Here the outcome was like 90% of the developers in our team. preferred TypeScript, so that's why we said TypeScript is our standard.
Steve_Edwards:
Yeah, that's pretty common. I know we're using it more and more in our application. I still haven't gone completely down the TypeScript rabbit hole yet, just because of time constraints more than anything. But yeah, it's dominating JavaScript develop, at least from stats I've seen from surveys and other types of things. I know I've seen some discussions from the W3C or from the. the JavaScript working groups, I can't remember about adding, possibly adding type implementations into the browser, into JavaScript itself. Not sure where that'll go, what status
Silvan_Mühlemann:
Oh wow.
Steve_Edwards:
that's at at the moment. But, you know, it's like anything else. I mean, you go back to jQuery, what was its purpose? Its purpose was to make things easier that you couldn't do in the browser, you know, to handle all the cross-browser implementations and the variations between... Internet Explorer and Firefox and Chrome and so on. And now JavaScript is finally starting to fade because all the things that it did have been implemented in the JavaScript itself. And so we may or may not see the same thing with types. You don't have to keep an eye on that for sure. But...
Silvan_Mühlemann:
What's interesting, what you're saying here is I just read a thread on Twitter where someone said jQuery was the greatest framework or something like that. And there was a discussion. Why are you saying was? It still is. And one person then answered that jQuery is still alive. But it's just has been incorporated into the JavaScript API. And because most, probably, you know that that website, no, you don't need jQuery, something like this, which shows that almost every jQuery function, you have it natively in the browser. And yeah, so what's interesting is that actually these frameworks, they are development of modern JavaScript engines. And maybe we have the same with TypeScript as you just said. Yeah, it's
Steve_Edwards:
Yeah, for
Silvan_Mühlemann:
interesting.
Steve_Edwards:
sure. That's sometimes when when things are moved too slow, a little external competition will give you a kick in the pants to get things going for sure.
Silvan_Mühlemann:
Yeah, absolutely.
Steve_Edwards:
All
Silvan_Mühlemann:
Yeah.
Steve_Edwards:
right, is there anything else you wanted to cover before we wrap up and head to picks?
Silvan_Mühlemann:
No, I think we talked about everything interesting here. No.
Steve_Edwards:
Good deal. All right, well, with that, we will move to picks. Picks are the part of the show where we get to talk about any other things we want to talk about, tech related, non-tech related, food, books, movies, clothes, you name it. So we'll let the guests go first today. And what do you got for us for picks, Sylvan?
Silvan_Mühlemann:
Yeah, so I have two picks. Both picks come from the domain of AI. The first one is Whisper. I don't know if you have heard of that application. It's an extremely powerful application. application which allows to recognize speech. Well, and transform it into text, like a speech to text engine. And actually it doesn't sound really surprising until you look at the demos they have on their website. And there they have like sound samples or which are extreme for me as a non-English speaker, very difficult to understand. But that engine is able to recognize the speech and transform it into text. And so what I tried yesterday, I, to try it out, I took the video from Just a random music video. I think it was a... Who's the real Slim Shady? I think that one from Eminem.
Steve_Edwards:
Oh, from Eminem.
Silvan_Mühlemann:
Eminem, exactly.
Steve_Edwards:
Okay.
Silvan_Mühlemann:
I ran it through that engine and it generated a perfect transcript. It's really impressive for me that the machine can recognize that voice. And it doesn't only understand English, it also understands like really weird language like Mongolian and Yoruba and it transforms everything to English. So that was very, very impressive how that works.
Steve_Edwards:
Yeah, that's got to be tough because even within a given language, you've got different dialects, you know, different accents, different ways of saying things. You know, for instance, here in the US, you've got all kinds of different accents. You've got everything from your southern twang, you know, you got your Midwestern accents, you got your, you know, Boston and New York accents. Those are sorry, hope nobody's insulted. Those are my terrible impressions. But You know being able to understand all those little nuances and still get it right is a very difficult thing to do Not something I'd ever really want to take not to tackle for sure
Silvan_Mühlemann:
Yeah, yeah, yeah. Apparently it even understands my Swiss accent and writes, generates really nice English sentences out of it. So even with my kids crying in the background, it can
Steve_Edwards:
Ha ha ha.
Silvan_Mühlemann:
understand everything. Apparently they used half a million hours of speech to train that neural network. So it's quite an impressive thing. And it's open source, everyone can use it, build their businesses around it. So I'm impressed here.
Steve_Edwards:
All right, well, yeah, give us a link and we'll post that in the show notes for sure. And did you have another pic?
Silvan_Mühlemann:
Yeah, the other one is also it's in a similar area. It's, um, it's stable diffusion, diffusion. I don't know
Steve_Edwards:
I've
Silvan_Mühlemann:
if you
Steve_Edwards:
heard
Silvan_Mühlemann:
have
Steve_Edwards:
of that.
Silvan_Mühlemann:
heard of that.
Steve_Edwards:
I've heard other people talk about it. I think Shop Talk Show is talking about it this week, but I haven't really got into what it is.
Silvan_Mühlemann:
Yes, so what it does, it's also an AI application. It's an image generator. You provide a sentence about what you want to see. For example, Bart Simpson on the moon eating a doughnut. And then it generates a very realistic image out of this sentence. And you can even with correct... if it's a building, it draws correct perspective. You can say, draw it with pencil and then it's as if it was drawn with a pencil. And... There's really impressive how that engine actually can generate those images and get everything correct as if it was drawn by an artist. And I think, I think for like, for example, I would use that if I would need some, some images, for example, for my, for the header of a blog post instead of going to, to I could use that tool to generate an image which is completely new, which the world hasn't seen because it has been generated by that engine. So that's very impressive.
Steve_Edwards:
Yeah, I just, believe it or not, I just found it through a URL, huggingface.co, and I generated, I did Bart Simpson on the moon eating a donut, and it actually gave me four donuts, excuse me, four images, eating them, and then you can click on them and cycle through them. That was amazing. That was truly amazing. Reminds me of an article I saw, I think I saw it on Hacker News a couple weeks ago. And it was talking about the whole issue of, it was an art competition, where people would submit their paintings, their art to be judged and pick a winner and so on. And the winner of the competition generated a lot of controversy because it was an AI generated photo. A guy had used, I don't remember the application that he had used, but it. was AI. He put in a specific set of commands, I want this and this and this, and it drew an amazing, you know, beautiful piece of art, but he entered it in the competition and competed against the human drawn art and won. And of course people were up in arms. And if I remember correctly, from the end of the blog post, they were starting to create separate categories at competitions like this for AI drawn art versus human drawn art. But just the
Silvan_Mühlemann:
Mm-hmm.
Steve_Edwards:
stuff that can be done with a few commands and create very good-looking art, realistic-looking stuff, it's really amazing.
Silvan_Mühlemann:
Mm-hmm. Yeah. But apparently finding the right command is quite tricky. There's huge blog posts and just about how to, what word combination to use. And so there's still an art in there, but it's not the art of drawing something. It's the art of finding the right prompt, how they call it. Yeah.
Steve_Edwards:
Right.
Silvan_Mühlemann:
So still some work necessary.
Steve_Edwards:
But for someone like me, who would rather face a technical challenge than an artistic challenge because I don't have an artistic bone in my body, that certainly gives more flexibility. I could see something like this being used, like you mentioned, type in some commands and generate a header for you or something, some piece of art or graphic that you could use on a website. And graphic artists and designers aren't liking that, I'm sure. but certainly could open some possibilities for those of us who don't have artistic capabilities.
Silvan_Mühlemann:
Yeah, absolutely.
Steve_Edwards:
Alright, so yeah, we will make sure and post the links to those in the show notes for this episode. So now it's my turn and we will go on to the high point of every episode, which is my dad jokes. That's up for debate actually, but I'll share them anyway. So recently, you know, I'm left-handed. I call myself normal even though we're only 7% of the population.
Silvan_Mühlemann:
Me too.
Steve_Edwards:
And recently I lost three fingers on my left hand so I asked my doctor if I would be able to write with it and he said maybe but I wouldn't count on it. And my sound effects not working. Oh no, I'm so disappointed. Okay, you have to imagine the rim shot people. So three golf clubs walked into a bar. The putter ordered a beer and the wedge ordered some whiskey. The bartender asked the third one if he wanted anything. He replied, no thanks, I'm the driver. Right, right, and then
Silvan_Mühlemann:
Heh.
Steve_Edwards:
finally, do you know what the first rule of Passo Aggressive Club is? You know what, nevermind, forget it. Imagine the rim shots there. Dang it, hate it when that happens.
Silvan_Mühlemann:
You can still
Steve_Edwards:
All right,
Silvan_Mühlemann:
edit it.
Steve_Edwards:
oh yeah, maybe I'll have to do that. We'll see. All right, so before we wrap up, Sylvan, if people want to get a hold of you or give you money or find out about your company, what's the best way to contact you?
Silvan_Mühlemann:
I would say it's my personal website. There is links to my social network on the top right. Personal
Steve_Edwards:
Okay,
Silvan_Mühlemann:
website will be
Steve_Edwards:
so
Silvan_Mühlemann:
in
Steve_Edwards:
it's,
Silvan_Mühlemann:
the show notes, I guess.
Steve_Edwards:
yes, we will put it in there, mooleman.com. Excellent. I am wonder95 on Twitter, on GitHub, and just about anywhere else, so if you want a dad joke five out of seven days a week, check me out on Twitter at wonder95. So with that, we will wrap it up. Thank you, Sylvan, for coming on the show and talking about... your history and your company and some cool stuff with JavaScript.
Silvan_Mühlemann:
Thanks for having me, Stu.
Steve_Edwards:
Alrighty, and we will talk to you next time on Views on View.
Vue, and PDFs, With Silvan Mühlemann - VUE 198
0:00
Playback Speed: