20 Jan

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

   

What fuels your work? What fuels your mind? What do you do on a non-productive day or when you’re sad? Nowadays, I try to embrace these times. I try to relax and not be angry at myself for not being productive.

And the fun fact about it? Well, most of the times when I could convince my mind that not being productive is nothing to feel bad about, things take a sudden turn: I get my ideas back, my productivity rises and, in effect, I even achieve more work than on an average day. It’s important to try to be human.

The post Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object appeared first on Smashing Magazine.

20 Jan

VueJS: First Impressions

With all the new libraries and frameworks it is pretty hard to keep up with all of them, and that is if you can even decide which ones are worth spending time one, over the last year or so I was exposed to many a new tech stack, with React for work and just personally playing around with React-Native, Aurelia and Angular2. Each of them attached to a new project, partly justified by wanting to try it out or form my own opinion.

Previously I had written about Aurelia, which I was very impressed with after than Angular 2 disaster, if you like, you can read more about it here:

Aurelia: First impressions

This time round I decided to dive into Vue.JS, a lot of good things are being said about it on the web, with it apparently being faster than react, with it’s implementation of Snabbdom, a simple and powerful Virtual DOM focused on performance. On top of that is is notably smaller than React sitting around 14kb.

Of all the frameworks and libraries I have worked with over the years, one thing that stood out to me about Vue.JS was the documentation, very detailed and easy to follow, covering multiple use cases and all the various options, where applicable, for each of it’s built in methods.

Now for a look at the code, the following example is for a very simple component, written in absolute bare-bones, just for you to get an idea of how things are structured..

https://medium.com/media/beff81343c8901397809efa413b5ccb9/href

Vue.JS uses a template file containing both you template body and a script section, and these files are saved with a .vue extension.

Vue.JS itself is completely template agnostic, you can use handlebar/directive template as above, you can also use JSX, or even build it up very manually using es5 or es6 string interpolation if you prefer.

This file pretty much handles it all, you will define the HTML structure as well as relevant scripting logic, and either define a <style> block or import a style sheet like in the example.

The scrip tag is where all the real work begins, we start by importing Vue and whatever components we intend on using within the component.

name: 'Events', components: { 'header-bar': Header, 'search-bar': Search, 'list-data': List, 'footer-bar': Footer, },

Above we have a snippet from the default export object, we start with the components name, followed by a components object. This object defines a key which is the tag name for the HTML element within our template with its value being the component we imported a little further up.

Next we have some of our methods to control initial logic and define usable functions.

data() {  return { data: [], searchTerm: {},  }},

The data() function is used to setup default data for initial rendering of the component, here the data key is setting itself as an empty array as later when we fetch the data it will become and array of objects, and we do not want to break the render by defaulting with invalid data types.

created() {  // API/Service calls would go here  return { data: [ {}, {} ],  };},

created() is similar to reacts componentDidMount life cycle method, this is the best place within the life of the component to go fetch any data that is not available on initiation of the component, in this case to go fetch the actual list items.

methods: {  search() { // Search method written here  },}

methods() is where you define functions that will be used within the component itself, or passed down to a child component as props, as is the case with search(), the child Search component will receive this method via the props, and this will then be fired off when a user interacts with the search component.

One thing that was not specifically included in the example but was was referenced was props, like react and probably many other libraries at this stage, Vue.JS also supports props, and like react they can be anything that a child component needs, be it static text, a function, and array of data needing to be looped over, or an object with key value pairs for simple dynamic display.

Props are quite simple to define, within the default export you would add another key, called ‘props’ with an array of all the props it is expecting to receive.

https://medium.com/media/a2ea9a8bddf8cd791185f447c20b0695/href

Above would then be an example of the search component, as you can see it is taking in 2 props, the submit method and term, which is a model for handling the search value that will be passed into the function.

This was just a taste of what is possible with Vue.JS, you will see many more examples by visiting their documentation at Vue.JS docs.If you wish to quickly spin up an application and start playing around with Vue.JS, I can suggest taking a look at the Yeoman generator created by FountainJS.

Working with Vue.JS was a great pleasure, I found the learning curve very shallow, however that could purely be based on my experience, as mentioned before I have worked with a few in the past.

The default template structure feels very similar to how it was working with Angular, so developers coming from that background may pick it up a bit faster than they would react. I cannot really go un-learn react to see if it influences how easy it was to pick up Vue.JS.

19 Jan

Internationalizing React Apps

    First of all, let's define some vocabulary. "Internationalization" is a long word, and there are at least three widely used abbreviations: "intl," "i18n"...
19 Jan

Internationalizing React Apps

    First of all, let's define some vocabulary. "Internationalization" is a long word, and there are at least three widely used abbreviations: "intl," "i18n"...
05 Jan

Designing A Responsive Music Player In Sketch (Part 1)

   

Sketch is known for its tricky, advanced facets, but it's not rocket science. We've got you covered with The Sketch Handbook which is filled with practical examples and tutorials that will help you get the most out of this mighty tool. In today's article, Christian Krammer gives us a little taste of all the impressive designs Sketch is capable of bringing to life. — Ed.

Music plays a big role in my life. For the most part, I listen to music when I'm commuting, but also when I'm exercising or doing some housework. It makes the time fly, and I couldn't imagine living without it.

However, one thing that has always bothered me is that the controls of music apps can be quite small and hard to catch. This can be a major issue, especially in the car, where every distraction matters. Another issue, in particular with the recent redesign of iOS' Music app, is that you can't directly like tracks anymore and instead need to open a separate dialog. And I do that a lot — which means one needless tap for me.

The post Designing A Responsive Music Player In Sketch (Part 1) appeared first on Smashing Magazine.

05 Jan

Designing A Responsive Music Player In Sketch (Part 1)

   

Sketch is known for its tricky, advanced facets, but it's not rocket science. We've got you covered with The Sketch Handbook which is filled with practical examples and tutorials that will help you get the most out of this mighty tool. In today's article, Christian Krammer gives us a little taste of all the impressive designs Sketch is capable of bringing to life. — Ed.

Music plays a big role in my life. For the most part, I listen to music when I'm commuting, but also when I'm exercising or doing some housework. It makes the time fly, and I couldn't imagine living without it.

However, one thing that has always bothered me is that the controls of music apps can be quite small and hard to catch. This can be a major issue, especially in the car, where every distraction matters. Another issue, in particular with the recent redesign of iOS' Music app, is that you can't directly like tracks anymore and instead need to open a separate dialog. And I do that a lot — which means one needless tap for me.

The post Designing A Responsive Music Player In Sketch (Part 1) appeared first on Smashing Magazine.

28 Dec

☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year?

   

With a couple of days left until New Year's Eve, it's just about time to set aside 60 minutes to clean up, sort out and back up your digital footprint, to ensure a good smooth start to 2017. So many little details tend to get forgotten or overlooked every single time, only to get fixed hastily later — but doesn't it just feel right when everything is in the right place, neatly organized, even if you aren't a compulsory cleaner or an obsessed perfectionist?

This is not a generic article about unspectacular things like getting to inbox zero or changing the copyright year in your footer (although that's a good idea!) — we published a detailed checklist of all of those details a couple of years ago. Instead, you'll find below an overview of all of those obscure little things that I forget about every year; so, I decided to gather them all in one place once and for all.

The post ☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year? appeared first on Smashing Magazine.