Stuff I'm Up To

Technical Ramblings

bootstrap-tagsinput — February 12, 2018

bootstrap-tagsinput

I’ve got a work project that fills in a database field with multiple comma separated values and thought using the bootstrap-tagsinput script would fit very well. Only I managed to misinterpret the instructions and made a bit of a hole to dig myself out of.

The big mistake I made was to add a data-role="tagsinput" attribute to my HTML. This was a bad mistake because I then tried to configure it using JavaScript – setting the tagClass and typeahead options. It worked, but nothing like I was expecting. I couldn’t reference it by it’s id selector using $('#selector') in the script and ended up using $('.boostrap-tagsinput > input') Which can’t be right.

Continue reading

Advertisements
Bootstrap Tags Input and Typeahead — February 8, 2018

Bootstrap Tags Input and Typeahead

Both of these add-ons I forget what they are called. So when I go looking for something that does a multiple select type option in a HTML form I struggle to know what to look for. Hopefully now they are here I’ll find them more easily.

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

https://twitter.github.io/typeahead.js/

Vue.js, Vuetify and Laravel — December 24, 2017

Vue.js, Vuetify and Laravel

I’m really new to playing with Vue.js but thought I’d use it with Laravel and Vuetify rather than bootstrap. I couldn’t even get it off the ground due to this error:

app.js:442 [Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in )

I’d tried to webpack the JS and this seems to be where the trouble lies. Something not loading quite right separating Vuetify out into the “vendor” script. Put simply the not being registered is because the vuetify.js script hasn’t loaded.

So going from this in my webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue','vuetify'])
    .sass('resources/assets/sass/app.scss', 'public/css');

To this:

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue'])
    .sass('resources/assets/sass/app.scss', 'public/css');

resolved the problem for me.

Node.js & Databases — December 26, 2016
Integrating React with Gulp — December 22, 2016
Webpack, ReactJS and SASS — December 21, 2016
Airbnb JavaScript Style Guide —
Making Sense of React & Webpack — December 20, 2016

Making Sense of React & Webpack

So I came across React and thought it looked pretty cool. But it made my head hurt trying to figure it out. Everything seems so difficult to start with. I just couldn’t understand how you’d write a JSX file and still somehow the browser would be able to execute it.

I had to eventually think back about how CoffeeScript works. The browser doesn’t execute a JSX file. It needs to be “transpiled” into JavaScript in much the same way as CoffeeScript is “transpiled” into JavaScript. It’s just the tools to do it are all freakishly new to me and that’s what I had to get my head around.

Continue reading

React JS — December 16, 2016
ES6 vs CoffeeScript — December 15, 2016

ES6 vs CoffeeScript

ECMAScript is the underlying standard that JavaScript is built to. My main exposure has been with ES5 as supported by “corporate” modern browsers. However, the more modern browsers now support ES6. ES6 brings a lot of changes to the party and many are arguing that it’s making the need for CoffeeScript diminish significantly.

Just typical. I discover something that I find useful and it starts to become redundant – or does it?

Continue reading

Mozilla JavaScript —

Mozilla JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript

JavaScript (JS) is a lightweight, interpreted, programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js and Apache CouchDB. JS is a prototype-based, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.

Iced CoffeeScript —