4/28/2023 0 Comments Codekit vs webpackI found DOMtastic and thought that was pretty good but… well… it’s still trying to be jQuery. I then looked at writing some helpers functions in plain vanilla JS to act as shortcuts. Oh, and $.ajax.īut why am I still using jQuery for these (mostly) basic operations? Especially when working with Vue too which looks after the DOM for me.įor $.ajax, yeah there is fetch, but axios gets a better wrap, so rewrote my REST wrapper using axios. Looking at all of the code I was writing, I’m only using jQuery for its (pretty awesome) selector engine plus some helpers for things like basic animations (slideUp/slideDown) plus adjusting CSS and class properties. It’s such a flexible and intimidating system, but really happy its all running nicely. I’m really happy with this config file, and how it runs with Webpack 4. Watch, to create development code and keep watchingĪnd… handy MacOS notifications using Webpack Build Notifier Plugin Preview, to create production code WITHOUT hashing (just to keep an eye on file sizes) ![]() Processing my Vue Single File Components (.vue) with vue-loaderĬompiling, auto-prefixing and minifying my SCSS with css-loader, postcss-loader, cssnano, autoprefixer and sass-loaderĬreating a vendor.js file for any of my node_modules Outputting CSS to its own file using Mini CSS Extract Plugin This time around, given I wanted to keep using Vue, I had a tinker with Vue CLI but I felt it was masking too much of the magic, and was pushing me down a path I didn’t want to go.Īnd so I went back to Webpack, and started at the beginning, and building my own config file.Īnd with some trial and error (and a heck of a lot of reading), I’ve got a config file that does exactly what I want it to do: I’d looked at Webpack in the past, but, um, yeah, wtf? But it is MacOS only, so when working with a non-Mac developer, it made it hard. to concatenate data in to one column, other formatting, in case the REST endpoint doesn’t return it exactly how we want it).īut using Single File Components (which makes it so much simpler to manage HTML templates plus modularise code) requires they be parsed using something like Vue CLI or Webpack.įor years I have used CodeKit – such a handy tool for helping compile and minify (and auto-prefix) my LESS, SCSS and JS files. Then I built a table component that allows me to handle pagination and display of REST endpoints with optional data presentation processors (i.e. I wanted to make another section be built using Vue – I’d done something similar before, so got that working. It just felt good.īut then I started to use a bit of Vue. I built an awesome responsive and collapsible navbar, a dialog helper to create modal and non-modal dialogs, plus a notifications helper to create alerts to display to the user. And, well, because its what I know, went straight to jQuery. So I started work making things look good, including responsive tables. This system has been running nicely for a decade – so let’s hope this rebuild can do just that too.įirst of all, having built this site using Bulma, I really wanted to take advantage of its ease of use for developing, awesome responsiveness and flexible extension. But… the front end, mobile responsiveness and overall functionality needs a polish and, well, complete re-build. And yet, because I rock, still runs on PHP7. Well, actually, no, it’s the rebuild of an old project. Angular will keep it alive.I’m working on a new project. Gulp is sticking around so feel free to learn everything about it. ![]() ![]() Still using CodeKit? Spend some time learning one of the above. The syntax is a bit different (maybe more intuitive), but the package installations themselves are much faster. ![]() From the user perspective, they behave exactly the same. Yarn came out late 2016 and became a preferred package manager to NPM. But if you have time to kill every evening like I don’t, take a dive. Whenever new technologies come out, they couple together and force you learn twice the amount to ramp up. ES2016 is literally the next generation of Javascript. Webpack, React, ES2016 - the hipster stack. The scripts are written in Javascript as well. npm install to get dependencies, npm prune to remove unused packages, npm build to build your production assets, npm start to start your server. NPM scripts are coming back with a vengeance to the point where half of any package.json file might consist of configuration.Ī minor detail, but instead of having gulp taskName you have npm taskName. All the JS cool kids are using React and Webpack these days.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |