Posts tagged with javascript

Our vue-table-component got some nice improvements original

by Freek Van der Herten – 3 minute read

At beginning of the summer we released a new Vue component called vue-table-component. Our aim was to create a very easy to use Vue component to render a table with data. You can toy a little bit with the component on the demo page. Recently Seb and I worked on two cool new features which I want to…

Read more

Unit testing Vue.js components with the official Vue testing tools and Jest

An official toolset for testing Vue components will be released soon. In a new series Jover Morales tells you all about it.

vue-test-utils, the official VueJS testing library and based on avoriaz, is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.

Jest, on the other side, is the testing framework developed at Facebook, which makes testing a breeze, with awesome features such as:

  • Almost no config by default
  • Very cool interactive mode
  • Run tests in parallel
  • Spies, stubs and mocks out of the box
  • Built in code coverage
  • Snapshot testing
  • Module mocking utilities

https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

Read more

Join 9,500+ smart developers

Every month I share 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.

Use your Laravel named routes in JavaScript

Daniel Coulbourne, an engineer at Tighten Co and co-host of the amazing Twenty Percent Time podcast, recently released Ziggy, a tool to share your Laravel named routes with JavaScript.

Ziggy creates a Blade directive which you can include in your views. This will export a JavaScript object of your application's named routes, keyed by their names (aliases), as well as a global route() helper function which you can use to access your routes in your JavaScript.

https://github.com/tightenco/ziggy

Read more

Using global mixins in Vue.js original

by Freek Van der Herten – 2 minute read

Recently I needed to add some global functionality to nearly all Vue components in an app. My colleague Seb told me a good way to achieve this: global mixins. In this post I'd like share that knowledge. In Vue a mixin is some functionality bundled in a file that can be added to one or more Vue…

Read more

The disadvantages of single page applications

Adam Silver lists a bunch of problems you need to solve if you opt to build a single page application.

Ironically, SPAs are harder to design and harder to build. And yet, they typically produce slow, disagreeable experiences for users. ... Javascript is never going to beat the browser at what it does best—browsing. We can still give users rich and enhanced experiences without cramming an entire site into one document.

We should let the browser manage the browsing experience, and spend our time solving real user problems.

https://adamsilver.io/articles/the-disadvantages-of-single-page-applications/

Read more

How to write JavaScript-style test watchers in PHP

Christoper Pitt published another excellent piece over at Sitepoint. This time he describes how he built a watcher to automatically recompile his preprocessed code and rerun the tests.

In order to reduce the burden of invoking the transformation scripts, boilerplate projects have started to include scripts to automatically watch for file changes; and thereafter invoke these scripts.

These projects I’ve worked on have used a similar approach to re-run unit tests. When I change the JavaScript files, these files are transformed and the unit tests are re-run. This way, I can immediately see if I’ve broken anything.

https://www.sitepoint.com/write-javascript-style-test-watchers-php/

Read more

Webpack Academy

Sean Larkin, core team member of Webpack, will be leaving his current job at Mutual of Omaha for a new position at Microsoft. Because on his team he was the one most familiar with the webpack setup of the project, he looked for a way to transfer his knowledge. He landed on creating a video course on webpack that's free for everyone.

I decided to create Webpack Academy, a training and educational platform for those wanting to learn more about webpack. This was a perfect way to not only allow me to give back to my team — by giving them free access to all of the content — but to also benefit the community by sharing it with everyone.

https://webpack.academy/

Read more

Exposing Multiple Vue Components as a Plugin

In a new post on his blog Sebastian De Deyne, JavaScript (and all-round) wizard at Spatie, describes a technique to expose Vue components as a plugin.

We recently published a tabs package. Initially, users needed to register two components in order to create a tabular interface: Tabs, which acts as a container, and Tab, which defines a single tab and its contents in the interface.

Since developers are most likely going to use both components together, and there's a fair chance that they'd want to register them globally like in the example, it made sense to provide some sort of auto-install option.

https://sebastiandedeyne.com/posts/2017/exposing-multiple-vue-components-as-a-plugin

Read more

What is snapshot testing, and is it viable in PHP?

In a new blogpost at Sitepoint Christopher Pitt talks about snapshot testing. He first explains how snapshot testing can help test React components. Then he demonstrates how you can use our home grown package to use snapshot testing in PHP. Finally he shows pretty cool use cases for snapshot tests.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it.

For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

https://www.sitepoint.com/snapshot-testing-viable-php/

If you want know more about snapshot testing, check out this blogpost by my colleague Sebastian, or watch this video where I refactor some tests to use snapshots.

Read more

What to expect from JavaScript ES2017

In a new blogpost André Neves, a React Native engineer at Big Human, introduces the new features that are coming with ES2017.

I think it is a fair assessment to say that a large portion of JavaScript developers seem to appreciate the new, the shiny, the bleeding-edge tools. Whether it is to completely embrace a new technology, or simply to test out a tool's functionality, we like to know what is out there to at least 'dip our toes in the water'.

If you're like me, keen on knowing about all of the new technology this incredible community has to offer, here is a breakdown of what ES2017 has in store.

https://medium.com/komenco/what-to-expect-from-javascript-es2017-the-async-edition-618e28819711

Read more

A straightforward Vue component to filter and sort tables original

by Freek Van der Herten – 3 minute read

Today we released our newest Vue component called vue-table-component. It aims to be a very easy to use component to make tables filterable and sortable. In this post I'd like to tell you all about it. Why creating yet another table component? Let's first touch upon why we created it. To make lists…

Read more

Classes, complexity, and functional programming

In this article Kent C. Dodds clearly explains what the downsides are of using Class in JavaScript.

Classes (and prototypes) have their place in JavaScript. But they’re an optimization. They don’t make your code simpler, they make it more complex. It’s better to narrow your focus on things that are not only simple to learn but simple to understand: functions and objects.

https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747

Read more

Using destructuring assignment in for VueJS loops

Ivan Sieder offers a nice tip on how to write better v-for loops in VueJS component templates.

There is really nothing wrong with the above code, but there is a small aspect, which really bugs me. As you can see, we are repeating the product identifier inside the output twice ({{ product.name }} and {{ product.price }}).

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality. The feature we are going to use is called destructuring assignment. Basically, what the destructuring assignment allows us to do, is to pull a specific property off of an object and store it in a variable.

https://simedia.tech/blog/vue-js-destructuring-assignment-for-loops/

Read more

Testing a Vue component part 4: more testing and faking time original

by Freek Van der Herten – 6 minute read

Welcome to part 4 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 Creating an instance of a component More tests and faking time (you're here) Jest awesomeness and a skeleton to get started More tests…

Read more

Testing a Vue component part 3: Creating an instance original

by Freek Van der Herten – 4 minute read

Welcome to part 3 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 Creating an instance of a component (you're here) More tests and faking time Jest awesomeness and a skeleton to get started Creating…

Read more

Testing a Vue component part 2: the first test and snapshots original

by Freek Van der Herten – 4 minute read

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…

Read more