Welcome to part 2 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing (you're here) Creating an instance of a component More tests and faking time Jest awesomeness and a skeleton to get started Setting up…
Recently we released vue-tabs-component, a simple Vue component to render a tabular interface. If you want to know more about to the component itself I suggest you head to the introductory post on it. Like with the vast majority of our open source work this package comes with tests. In this series…
Join 9,500+ smart developers
Get my monthly newsletter with what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.
No spam. Unsubscribe anytime. You can also follow me on X.
"Freek publishes a super resourceful and practical newsletter. A must for anyone in the Laravel space"
Last week my company released a vue-tabs-component, a quality Vue component to easily display tabs. You can view a demo of the component here. In this post I'd like to tell you all about it. Why we created it If you're just want to know what the component does, skip to the next section. Nearly all…
Stefan Moises compares a few popular Vue datatable components.
To "get into" Vue.js, I am going to compare different "datatable" solutions I came across and which I found promising. In the past, working with jQuery and mainly AngularJS (1 and 2) and also JAVA frameworks like Grails it was always very difficult and cumbersome to find a really good datatable, which was easy to use, stable and had all the features the projects needed.
http://www.rent-a-hero.de/wp/wp-content/uploads/2017/04/vuegrid
Even though I'don't like Facebook as a user, their amazing contributions to open source are something to be very grateful for. Last week they presented their new work in progress: Prepack.
Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations.
It's still in development, so best not use it in production environments yet.
Joshua Bemenderfer gives a nice overview on the ways Vue components can communicate with each other.
There are several methods that can be used for inter-component communication in Vue.js. Normal props and events should be sufficient for most cases, but there are other methods available at your disposal as well.
I don't think that less lines of code automatically means code is more readable, but I'm a big fan of ES6' arrow functions. In this article Eric Elliott dives deep into them.
I also supect that your team would become significantly more productive if you learned to embrace and favor more of the concise syntax available in ES6. While it’s true that sometimes things are easier to understand if they’re made explicit, it’s also true that as a general rule, less code is better. If less code can accomplish the same thing and communicate more, without sacrificing any meaning, it’s objectively better.
Let's hope we'll soon have array functions in PHP too.
The future of #php (hopefully) - 2 RFCs in discussion right now: "Arrow Functions" and "Pipe Operator" pic.twitter.com/LVPiIHwGrZ
— Caleb Porzio (@calebporzio) April 19, 2017
Electron is a library that enables you to create desktop apps with JavaScript, Html and css. If you're interesting in playing around with this cool technology check out this tutorial by Kristian Poslek.
In this article, I’ll try to guide you through the process of building a simple desktop application and touch on important concepts for building desktop application with JavaScript.
https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
Together with Marcel Pociot and the help of Alex Vanderbist I'm currently building my first Electron app. It's a bit too early to share any details about it except that we'll open source it (and it'll be free).
In the JavaScript world promises are a great way to deal with stuff that needs to happen asynchronously. But there's also another new way to go about it: async/await.
In case you missed it, Node now supports async/await out of the box since version 7.6. If you haven’t tried it yet, here are a bunch of reasons with examples why you should adopt it immediately and never look back.For those who have never heard of this topic before, here’s a quick intro
- Async/await is a new way to write asynchronous code. Previous options for asynchronous code are callbacks and promises.
- Async/await is actually built on top of promises. It cannot be used with plain callbacks or node callbacks.
- Async/await is, like promises, non blocking.
- Async/await makes asynchronous code look and behave a little more like synchronous code. This is where all its power lies.
Recently I stumbled upon a page in the VueJs docs where Vue is compared against all other similar frameworks. I'm impressed with the fact that they reached out to authors of the other frameworks to get well balanced comparison.
This is definitely the most difficult page in the guide to write, but we do feel it’s important. Odds are, you’ve had problems you tried to solve and you’ve used another library to solve them. You’re here because you want to know if Vue can solve your specific problems better. That’s what we hope to answer for you.We also try very hard to avoid bias. As the core team, we obviously like Vue a lot. There are some problems we think it solves better than anything else out there. If we didn’t believe that, we wouldn’t be working on it. We do want to be fair and accurate though. Where other libraries offer significant advantages, such as React’s vast ecosystem of alternative renderers or Knockout’s browser support back to IE6, we try to list these as well.
For a client project I've been doing some vue.js lately and I just love it. So you might see a few more vue.js related stuff appear on this blog in the future. Here's a nice site I stumbled across that contains a lot of useful components.
In the JavaScript world Lodash is a pretty popular and awesome package with lots of handy array, collection and object methods. In this article Dan Prince explains that some of those methods do have a nice ES6 equivalent.
Lodash is the most depended on npm package right now, but if you’re using ES6, you might not actually need it. In this article, we’re going to look at using native collection methods with arrow functions and other new ES6 features to help us cut corners around many popular use cases.
On css-tricks David Khourshid wrote a good introduction to RxJS.
According to ReactiveX.io: "ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences."That's a lot to digest in a single sentence. In this article, we're going to take a different approach to learning about RxJS (the JavaScript implementation of ReactiveX) and Observables, by creating reactive animations.
https://css-tricks.com/animated-intro-rxjs/
If you want to toy around with the same ideas in PHP check out RxPHP
Don't know what the difference between stateful and stateless is, or what higher order functions are? On the auth0.com site Sebastián Peyrott explains these terms and other modern JavaScript concepts.
Modern JavaScript has experienced massive proliferation over recent years and shows no signs of slowing. Numerous concepts appearing in JS blogs and documentation are still unfamiliar to many front-end developers. In this post series, we'll learn intermediate and advanced concepts in the current front-end programming landscape and explore how they apply to modern JavaScript.
https://auth0.com/blog/glossary-of-modern-javascript-concepts/
David Gilbertson tells you all about polyfills.
Faced with the reality that you can’t write modern code and expect it to work for all users, you have exactly two choices:
- Only use language features available in all the browsers you support
- Write modern code, then do something to make it work in older browsers
If you have decided on option one then I respectfully suggest that you are bonkers, and insist that you state your case in the comments. I believe that developers who are able to explore all the new stuff and use it in their day-to-day jobs stay happy, and being happy is important.
https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423
Matt Stauffer wrote down his experiences with creating a simple app on Gomix, a platform to easily create node powered sites right in your browser.
Gomix is a platform that makes it absurdly easy to spin up a new app (static HTML or Node) and see it online instantly. You can also invite your friends to collaborate, and the moment you make a change in the editor, your site updates. So, at this point I'm using Gomix and Node, and Express is an easy pick.I strongly considered using Firebase for data storage, but the Gomix team linked me to this Gomix site using Google Spreadsheets as the backing data source and I really wanted to try it out.
So we've now settled: I'll take my old HTML and JavaScript, but instead of the JavaScript loading its data from JSON files, I'll run an Express app on Gomix pulling the data from Google Spreadsheets and output its data in a JSON format. No big deal.
https://mattstauffer.co/blog/moving-tech-forward-with-gomix-express-and-google-spreadsheets
Sebastian De Deyne, my colleague at Spatie, wrote a very nice overview of all different methods in Vue to define a template.
This article isn't about Vue's template syntax, but about where and how to define your templates. I wrote this because at the time of writing there aren't really resources that consolidate all the different manners to manage your templates.I've divided the different ways to define templates in three different categories, each with their own drawbacks:
- Writing templates that compile at runtime (lesser performance)
- Using single file .vue components (requires a build step)
- Manually writing render functions (pure JavaScript, no html-like template syntax)
https://sebastiandedeyne.com/posts/2016/dealing-with-templates-in-vue-20
Sam Bellen, an engineer at madewithlove, explains how to draw an audio form in real time using the sound from your computer's microphone.
I've recently started creating an online audio editor. One of the features I wanted to implement was to create a waveform for each track in the editor. This gives a nice overview of the content of each track.While recording a new track, it would be cool to visually see the the waveform you're recording so I decided to generate a waveform in realtime while recording a new audio track.
Below I will go through the basics of how you can create such a waveform from your audio input device.
https://blog.sambego.be/creating-an-audio-waveform-from-your-microphone-input/
On Egghead.io there's a free course available on functional programming. Your teacher is Professor Frisby, who is in fact a hedgehog. Yup, you've read that right. The tempo of the course is quite fast, so you might have to, like me, pause or rewatch the videos to get the most out of it.
This course teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these algebraic constructs across the board as a way to compose applications in a principled way.We can do the same in JavaScript. While the subject matter will move beyond the functional programming basics, no previous knowledge of functional programming is required. You'll start composing functionality before you know it.
https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript
