https://brunoscopelliti.com/blog/ Recent content in Blog on Bruno Scopelliti Hugo -- gohugo.io en-us Sat, 25 Feb 2023 07:00:00 +0100 https://brunoscopelliti.com/blog/notes-docker-for-node/ Sat, 25 Feb 2023 07:00:00 +0100 https://brunoscopelliti.com/blog/notes-docker-for-node/ Reference to the course: Docker for Node.js Projects from a Docker Captain I will update this post while continuing advance through the course. Last updated: 25 February 2023. Docker Compose basics Docker Compose is made of two things: the Compose CLI, and Compose file. Docker Compose CLI is mostly a substitute for Docker CLI. It is most useful in development environment. Docker Compose file is usually named docker-compose.yml: services: web: image: sample-01 build: . https://brunoscopelliti.com/blog/notes-docker-mastery/ Sat, 25 Feb 2023 07:00:00 +0100 https://brunoscopelliti.com/blog/notes-docker-mastery/ Reference to the course: Docker Mastery: with Kubernetes +Swarm from a Docker Captain I will update this post while continuing advance through the course. Last updated: 25 February 2023. Image vs Container An Image is the application we want to run. A Container is an instance of that image running as a process. We can have many containers running off the same image. Containers Run a container docker container run --publish 80:80 --name my_server nginx --publish (short -p): Publish port 80 on local machines, and sends all traffic from it, to program running in container on port 80. https://brunoscopelliti.com/blog/git-cherry-pick-branch/ Sun, 24 Oct 2021 07:31:35 +0100 https://brunoscopelliti.com/blog/git-cherry-pick-branch/ Git has a command called cherry-pick, it permits to copy an existing commit to a different branch - it’s very useful. Lately, I needed to cherry-pick all the commits existing on a certain branch - merging or rebasing the branch was not an option. Surprisingly, this use case is not supported. It is possible to cherry-pick a range of commits, though. git cherry-pick start..end So we can split the problem into smaller pieces. https://brunoscopelliti.com/blog/how-to-delete-last-commit-in-git/ Sat, 26 Jun 2021 15:12:42 +0100 https://brunoscopelliti.com/blog/how-to-delete-last-commit-in-git/ I always struggle to remember how to delete last commit in git - not that I’ve to do it often btw 😝 The git reset command permits to reset current HEAD to the specified state. We can use the syntax HEAD~1 to specify the desired state; it means one commit back from current HEAD. Putting everything together: git reset --soft HEAD~1 The --soft flag assures the changes are preserved in the working copy. https://brunoscopelliti.com/blog/default-vs-named-export/ Mon, 14 Jun 2021 21:08:24 +0100 https://brunoscopelliti.com/blog/default-vs-named-export/ I’m always been on default export team. I cannot find the link now - but I remember this being what TC39 recommended at some point. I kept using almost exclusively default export even after Nicholas Zakas - a person in the tech space I really admire, and respect - wrote his motivation for not using default export anymore. Lately I’ve been working more with named exports (not my choice, btw) and came to realize that to me it’s really not important the export format - both have their own specific pros - as long as the file is not a mess. https://brunoscopelliti.com/blog/array-reduce/ Mon, 24 May 2021 20:45:15 +0100 https://brunoscopelliti.com/blog/array-reduce/ This week tech drama is courtesy of @maxfmckay. Simplify your .reduce calls by doing as much work as possible in .filter and .map instead. Compare these two snippets. Which is more readable? Notice that when map arranges data exactly how we want, our .reduce can be just Object.assign.#typescript #javascript pic.twitter.com/3TW57kaCar — Rupert Foggo McKay (@maxfmckay) May 22, 2021 Let’s for a moment forget the original snippet, and its flaws pointed out in the thread on Twitter, and focus on the topic. https://brunoscopelliti.com/blog/what-is-javascript/ Sun, 23 May 2021 21:50:00 +0100 https://brunoscopelliti.com/blog/what-is-javascript/ I am really impressed here with Kyle’s ability to summarize a topic. What is JavaScript? JavaScript is an implementation of the ECMAScript standard (version ES2019 as of this writing), which is guided by the TC39 committee and hosted by ECMA. It runs in browsers and other JS environments such as Node.js. JavaScript is a multi-paradigm language, meaning the syntax and capabilities allow a developer to mix and match (and bend and reshape! https://brunoscopelliti.com/blog/whats-the-difference-between-undefined-and-void-in-typescript/ Mon, 17 May 2021 21:42:46 +0100 https://brunoscopelliti.com/blog/whats-the-difference-between-undefined-and-void-in-typescript/ If I have to describe my relationship with TypeScript in one word, I’ll say it is complicated. To put it shortly, I think most of the time it’s not worth the additional work, and headaches it causes - especially considering that in my usual setup I’ve unit test with high coverage, and meaningful JSDoc annotations. If you disagree - don’t worry, it’s fine 🙂 Anyway, in recent years TypeScript has grown in popularity, and always more often I find it in my way. https://brunoscopelliti.com/blog/function-deprecation-in-javascript/ Sat, 01 May 2021 20:52:17 +0100 https://brunoscopelliti.com/blog/function-deprecation-in-javascript/ When a codebase grows, and gets old is inevitable that functions, or whole areas become obsolete, and their usage is discouraged in favour of better alternatives. If the codebase is big enough, it might be not possible, or not easy to replace the usages of legacy components with their alternative in a single step … in such cases it’s important to have a way to signal a particular component is deprecated, and shouldn’t be used anymore, so that at least it doesn’t spread further. https://brunoscopelliti.com/blog/how-to-kill-a-process-by-port-on-macos/ Sun, 25 Apr 2021 15:18:21 +0100 https://brunoscopelliti.com/blog/how-to-kill-a-process-by-port-on-macos/ Every now and then I find myself in need to kill a process, knowing only the port it’s using. Below you can read the magic spell to kill a process in Unix-like system, running on a specific port. lsof -nti:<PORT> | xargs kill -9 Copy, and replace <PORT> with the port number. Kill a process programatically There are numerous npm modules that allow to kill a process programatically; fkill is my favorite. https://brunoscopelliti.com/blog/how-to-configure-ssh-keys-for-different-github-accounts-on-the-same-pc/ Fri, 09 Apr 2021 23:26:00 +0100 https://brunoscopelliti.com/blog/how-to-configure-ssh-keys-for-different-github-accounts-on-the-same-pc/ Recently I fought - and at the end succeded - to configure two different set of SSH keys for different GitHub accounts on the same computer. I’m writing it down the procedure, so that I won’t have to repeat this fight again. Create two different SSH keys, and add both on GitHub. The documentation on GitHub explains the details. SSH config The SSH key config file is usually located at ~/. https://brunoscopelliti.com/blog/investigating-a-promise-bug/ Sat, 27 Mar 2021 08:39:10 +0100 https://brunoscopelliti.com/blog/investigating-a-promise-bug/ As most people do nowadays, I write code using modern JavaScript… then serve the transpiled version, also adding the polyfills where needed. It mostly works fine, except when it doesn’t 🙃. In fact, recently we got this bug report: When the user clicks the menu button, the menu doesn’t appear. The problem was easily reproducible on IE11 - and only on IE11. First guesses One interesting thing about this menu is that its content is fetched asyncronously only after the user clicks on a particular button. https://brunoscopelliti.com/blog/my-macos-setup-checklist/ Sun, 21 Mar 2021 21:30:00 +0100 https://brunoscopelliti.com/blog/my-macos-setup-checklist/ This week I formatted my macbook, and after many years of keeping sparse notes in too many different place, I decided it is time to put everything together in one place for future reference… and what best place than my freshly restyled blog. General preference Dock: don’t show recent applications. Mission control: set hot corners. Trackpad/Mouse: Secondary click, click in bottom right corner. Keyboard: Use F1, F2, etc. keys as standard function keys. https://brunoscopelliti.com/blog/a-simple-babel-optimization-i-recently-learned/ Tue, 08 May 2018 09:00:00 +0100 https://brunoscopelliti.com/blog/a-simple-babel-optimization-i-recently-learned/ Babel relies on a few internal functions to generate the transpiled code. These functions, when needed, are placed at the top of the generated code, so they are not inlined multiple times across a single file. For example, a class declaration class Foo {} gets transpiled as: "use strict"; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Foo = function Foo () { _classCallCheck(this, Foo); }; Since Babel performs transpilation on single file basis, there’s still the risk that these functions get duplicated across different files. https://brunoscopelliti.com/blog/lets-write-a-promise-polyfill/ Mon, 26 Feb 2018 09:00:00 +0100 https://brunoscopelliti.com/blog/lets-write-a-promise-polyfill/ TL:DR; You can watch me live coding a promise’s polyfill on YouTube. Watch Let’s build a promise polyfill playlist. We’re going to build a Promise polyfill; it’s the best way to understand how things work under the hood, after all. My goal is not to have the most performant, or feature rich, implementation, but I’ll try to optimize for ease of readability. A brief disclaimer before we start: you might have heard that Promise are going to disappear soon, cause async function permit to further improve how we handle asynchronous code. https://brunoscopelliti.com/blog/exception-handling-in-async-functions/ Wed, 08 Nov 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/exception-handling-in-async-functions/ Async functions is one of the most welcomed new feature of JavaScript in recent years. One aspect in which async functions really shine when compared to traditional approach is error handling. Error handling is based on another beloved, and more ancient construct, try... catch. However try... catch is able to catch only exeptions thrown in functions which are explicitly awaited. In retrospective, it makes perfectly sense… but I never fully realized it, until I met my first uncaught exception: https://brunoscopelliti.com/blog/a-csharp-automapper-trick/ Mon, 05 Jun 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/a-csharp-automapper-trick/ Writing blog posts is infinitely valuable in helping me memorize new tricks; even when it does not work, I can still more easily google for myself. Today’s blog post is meant to continue this glorious tradition. In C# development it’s pretty common to have to map fields between objects of different class. Automapper simplifies a lot the work. For instance, in the simplest scenario given the two classes public class ProductDto { public string name { get; set; } public string code { get; set; } public decimal price { get; set; } public string currency { get; set; } } public class Product { public string Name { get; set; } public string Code { get; set; } public decimal Price { get; set; } public string Currency { get; set; } } in order to copy values from ProductDto fields into a new Product instance, we’ve to execute Automapper’s map method https://brunoscopelliti.com/blog/new-util-promisify-in-nodejs/ Tue, 16 May 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/new-util-promisify-in-nodejs/ A quick search on npmjs reveals how this topic is at the center of JavaScript developer’s hearts. I used to have too my personal utility to convert Node.js callback-based internals methods into returning-promise ones. So I guess this is a big, great news for everyone who’s working with node: Node.js is adding a new utility that does just this at its core, util.promisify. If you have ever used one of those promisify modules, you won’t be too much surprised by util. https://brunoscopelliti.com/blog/dry-and-strawberries/ Fri, 12 May 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/dry-and-strawberries/ DRY stands for Don’t Repeat Yourself, and it is an ancient motto in programming circles. It favors code reuse, that is a good thing on its own for several reasons; however it can be done in the wrong way, or, better to say in this case, in the wrong direction. Recently, while explaining this concept to a collegue of mine, I came out with his funny metaphor, that helped mark my point. https://brunoscopelliti.com/blog/git-alias-git-unstage/ Fri, 05 May 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/git-alias-git-unstage/ Git, between the others, has a powerful feature called alias. It’s pretty straightforward… Is there a command you always fail to remember? Add a more friendly shortcut! Is there a command you use frequently, that requires too much keystrokes? Create a shorter alias for it… or perhaps, you think that a fundamental command is missing from git? Then you can create it yourself using existing commands. My favourite alias is git unstage. https://brunoscopelliti.com/blog/csharp-linq-equivalents-of-javascript-array-methods/ Tue, 25 Apr 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/csharp-linq-equivalents-of-javascript-array-methods/ At work, in the last couple of years I’ve always more, and more written C# code. It’s nice, and it has lots of similarities with JavaScript. Despite this, I am not such productive with C#, as I am with JavaScript, and I often find myself asking colleagues, or searching the Internet for equivalent of JavaScript [feature] in C#… I rarely get disappointed. In this post we explore the equivalent in C# of some of the most useful JavaScript array methods. https://brunoscopelliti.com/blog/asynchronous-font-loading/ Sat, 25 Mar 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/asynchronous-font-loading/ The characters you’re reading right now are rendered in a font called Ubuntu. It’s a pretty populare one. I’m also using the Merriweather font, in the homepage, right under my face, and in a few other places. Aren’t they nice? Hardly not! However fonts are generally heavy resources to load… and having to load more of them may negatively affect loading performance of a website. In particular, there are two different problems: https://brunoscopelliti.com/blog/squash-commits-with-git-rebase/ Mon, 23 Jan 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/squash-commits-with-git-rebase/ That’s one thing I’ve just recently learned, and I’m writing down here for future reference. Git’s rebase command permits to change the history of a git repository. Note that this is safe to do only for commits that haven’t already been shared to the team you are working with. Why is it useful? Consider the following scenario: bruno ~/git/hello-git $ git hist # git hist is a custom alias for "git log --pretty=format:'%h %ad | %s%d [%an]' --graph --date=short" * 8a3a015 2016-10-26 | The most perfect commit in the history of the Universe (HEAD -> master) [brunoscopelliti] * a48ca6d 2016-10-26 | Init repo [brunoscopelliti] I’m so proud of myself… I’ve just pushed the best commit in the whole history of the Universe! https://brunoscopelliti.com/blog/qunit-custom-assertions/ Tue, 17 Jan 2017 09:00:00 +0100 https://brunoscopelliti.com/blog/qunit-custom-assertions/ This post is meant to share my favourite QUnit feature, custom assertions. Compared to other library, QUnit has not a particularly rich assertions’ library; however that’s not a big deal, cause QUnit makes extremely simple to extend its core assertions collection. QUnit.assert.typeof = function (subject, expected) { // The current value of the expression const actual = typeof subject; // It's a boolean; // It expresses wheter the test has passed, or not. https://brunoscopelliti.com/blog/webpack-101/ Mon, 12 Dec 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/webpack-101/ I’ve published on GitHub a series to help make sense of WebPack. I’m not going to approach this like That’s the configuration file, copy and paste it into your root folder, and everything will just be fine! Instead we’re going to build a WebPack configuration step by step together. We need to understand what we want to achieve with every single setting. I won’t talk about WebPack in the abstract, or about a WebPack feature as a stand alone piece; instead we’re actually going to build a simple single page application, and everytime we’ll change something into WebPack configuration, immediately we’ll see how this change affects our bundle, and our application. https://brunoscopelliti.com/blog/git-productivity-trick/ Sat, 03 Dec 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/git-productivity-trick/ … Yes, I know switching context is not so much productive, but sometimes we have to; so let’s better limit the issues! Here’s the tip 🥁 Clone, and maintain in sync, your main working repository in at least two different folders on the same machine. Key benefit: easy to switch context when you’re on a long running feature branch. Simple, and yet effective! https://brunoscopelliti.com/blog/history-of-a-support-ticket-for-apple/ Sun, 23 Oct 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/history-of-a-support-ticket-for-apple/ Some months ago, I changed my home working setup. I changed my middle 2011 iMac with a macbook pro + Apple monitor combo. My old iMac was in great shape, however the new setup is an enhancement because now I’ve a bigger monitor, and the freedom to use my mac from everywhere. I’ve also bought the BookArc stand. When at home, I wanted to use the monitor, and keep the macbook with the lid closed. https://brunoscopelliti.com/blog/first-1000-days-of-chiara/ Wed, 28 Sep 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/first-1000-days-of-chiara/ I usually wake up early in the morning, before anyone else at my house. I use this time to maintain this blog, run some side projects, stay updated about latest hot trends in our industry. In general I like to have some time to spend just with myself; then in the evening, when I come from work, I’m even more happy to stay with my family, and every device is off by default. https://brunoscopelliti.com/blog/how-to-disable-eslint-rule-via-javascript-comment/ Fri, 16 Sep 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/how-to-disable-eslint-rule-via-javascript-comment/ Having recently switched to ESLint, I often find myself googling for how to disable a rule on a particular occurrence via JavaScript comment. Hope writing this will help me to memorize the syntax, I’ll bookmark this page otherwise 😅. // eslint-disable-next-line no-alert alert("foo"); alert("foo"); // eslint-disable-line no-alert It’s also possible to omit the name of the rule, and in this case lint is turned off for the entire line. https://brunoscopelliti.com/blog/how-i-ported-my-blog-to-https/ Wed, 07 Sep 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/how-i-ported-my-blog-to-https/ In the last couple of years several elements are pushing for a widespread adoption of the HTTPS protocol. Security. Of course security, what else would you expect from HTTPS. HTTPS is all about security! It guarantees that the server you’re connecting is really the one you believe it is, and that the contents of the communications is private, so that it can’t be read, or modified by a anyone else. https://brunoscopelliti.com/blog/the-art-of-controlling-complexity/ Thu, 01 Sep 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/the-art-of-controlling-complexity/ From Eloquent Javascript, by Marijn Haverbeke. Keeping programs under control is the main problem of programming. When a program works, it is beautiful. The art of programming is the skill of controlling complexity. Just a reminder, primarily for myself. As developers we not only have to solve problems, but do it in a way we do not harm our future-self. https://brunoscopelliti.com/blog/status-update/ Wed, 31 Aug 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/status-update/ As someone of you might have noted, recently my blog has changed skin - second time in 2016. I’ve also started serving its content over SSL, and migrated the hosting on Digital Ocean… I think that’s a lot that has changed. I’m going to restart writing here on regular basis, and I’ve already a list of things I would like to talk about. Thanks for reading! See you around 🙂 https://brunoscopelliti.com/blog/my-personal-bugfixing-workflow/ Wed, 01 Jun 2016 09:00:00 +0100 https://brunoscopelliti.com/blog/my-personal-bugfixing-workflow/ I am a conservative person. Recently, I’ve started thinking this is a great quality, especially for a developer. Of course, I like improvements; the kind of changes I am more prone to make, are those which affect code readability, or bring coherence to the codebase; who have worked with me can confirm how pedantic I am on these kind of things. I change my own code (and blog posts) several times before I push on the repository. https://brunoscopelliti.com/blog/es6-modules-with-jspm/ Wed, 19 Aug 2015 09:00:00 +0100 https://brunoscopelliti.com/blog/es6-modules-with-jspm/ Recently I’ve been playing with the new ES2015 stuff. One of the things I am more excited about it, is the new module format. What probably not everyone knows is that it is possible to start using the new module syntax today, with tools like jspm to polyfill the missing loader functionality of the browser. I published a repo on Github with basic usage examples; it’s here: ES2015 module playground. https://brunoscopelliti.com/blog/fake-today-in-unit-tests/ Wed, 25 Mar 2015 09:00:00 +0100 https://brunoscopelliti.com/blog/fake-today-in-unit-tests/ If the app which you are working on is strongly influenced by the date, you definitely need a simple and consistent way to create a fake today, to have significant unit tests. I do not want to make you wait… this is the way I mock the Date constructor. function fakeDate (fakeToday) { var BuiltinDate = Date; spyOn(window, "Date").and.callFake(function () { var args = Array.prototype.slice.call(arguments); if (args.length === 0) { return new BuiltinDate(fakeToday); } var _factoryFn = Function. https://brunoscopelliti.com/blog/first-look-at-app-development-in-angularjs-2/ Thu, 26 Feb 2015 09:00:00 +0100 https://brunoscopelliti.com/blog/first-look-at-app-development-in-angularjs-2/ A couple of weeks ago David East (@_davideast) gave a talk about app development with AngularJS 2. The presentation was followed by a really interesting QAs session, with the participation of Miško Hevery, and Igor Minar. This is what seemed most interesting to me: AngularJS 2 is built on top of web standards; so no more AngularJS module, but ECMAScript 2015 module, web components and so on… There won’t be anymore the configuration phase https://brunoscopelliti.com/blog/goodbye-wordpress/ Sat, 21 Feb 2015 09:00:00 +0100 https://brunoscopelliti.com/blog/goodbye-wordpress/ During last year blogging has fallen down in my list of priorities. One of my resolutions for this new year is to try to start blogging again on a regular schedule. Even if I am a huge fan of WordPress, I have to admit that it carries with it a lot of overhead, probably not justified for a blog like my own. So I decided to give a try to jekyll, and damn, it was love at first sight 🤩 https://brunoscopelliti.com/blog/test-angularjs-app-with-karma-jasmine-and-protractor/ Sat, 12 Apr 2014 09:00:00 +0100 https://brunoscopelliti.com/blog/test-angularjs-app-with-karma-jasmine-and-protractor/ It’s passed more time than I expected since my last post. These months have been really busy - and even more happy - for me and my family… we moved to a new house, and most important our daughter Chiara came to light. A couple of months ago, I started writing a simple AngularJS todo app with the goal of learning how to write better unit tests (Karma + JasmineJS) and E2E tests (Selenium + protractor). https://brunoscopelliti.com/blog/bye-2013-welcome-2014/ Mon, 30 Dec 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/bye-2013-welcome-2014/ Fireworks in Bologna The year is near its end. After I postponed it for a long time, in 2013 I finally started blogging, and would like to continue in the future. There are lots of technologies I would like to try, eg. nodejs. My free time in the next months will suffer a significant cut, and I could not be happier. In February, I will become father. Me and my wife decided to call our first daughter Chiara. https://brunoscopelliti.com/blog/xhr-interceptor-in-an-angularjs-web-app/ Tue, 19 Nov 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/xhr-interceptor-in-an-angularjs-web-app/ I already wrote about intercepting XHR responses in an AngularJS web app. In the meanwhile, the method I described has been deprecated, and AngularJS 1.2 timely-delivery was delivered - I really admire the guy who choose names for AngularJS releases - and we now have a stable and better way to intercept XHR requests and responses in our web app. We’ll start by looking at how to define a new interceptor, using this new best practice. https://brunoscopelliti.com/blog/show-route-only-after-all-promises-are-resolved/ Tue, 17 Sep 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/show-route-only-after-all-promises-are-resolved/ When a new route is requested in an AngularJS application, it is often necessary to retrieve data from the server to fill the template. If the server request takes too long to complete, it is possible that an incomplete view is presented to the user. Digging into the code Let’s start taking a look at the most important pieces of code (however you can find the complete source of the demo on Github). https://brunoscopelliti.com/blog/authentication-to-a-restful-web-service-in-an-angularjs-web-app/ Mon, 09 Sep 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/authentication-to-a-restful-web-service-in-an-angularjs-web-app/ Last week I wrote about how to contact a RESTful web service in an AngularJS web application using the $resource service. This post is about how to deal with web services which require authentication. Why to use http headers Since RESTful paradigm is stateless we cannot manage authentication through sessions, and in general we won’t save on the web server any data about the state of the client. So, each requests have to carry with them the state of the client. https://brunoscopelliti.com/blog/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource/ Thu, 05 Sep 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource/ This is a two parts post about how to make RESTful requests through an AngularJS web application. The index of this brief series of posts is quite simple. Backend setup is the first post in the series. As the subtitle, its main focus is (at least this time) on the backend domain. It will tackle how to setup a RESTful web service. I used PHP for all the examples; however at least the basic concepts beyond a RESTful service are language agnostic. https://brunoscopelliti.com/blog/building-a-restful-service-with-angularjs-and-php-backend-setup/ Tue, 03 Sep 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/building-a-restful-service-with-angularjs-and-php-backend-setup/ This is a two parts post about how to make RESTful requests through an AngularJS web application. The index of this brief series of posts is quite simple. Backend setup is the first post in the series. As the subtitle, its main focus is (at least this time) on the backend domain. It will tackle how to setup a RESTful web service. I used PHP for all the examples; however at least the basic concepts beyond a RESTful service are language agnostic. https://brunoscopelliti.com/blog/http-response-interceptors/ Wed, 10 Jul 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/http-response-interceptors/ I’ve already wrote in the past about asynchronous requests in AngularJS, showing how to assign a variable a value, synchronously, even when the value is retrieved asynchronously from the server. One thing that I didn’t wrote in that post, is that AngularJS allows to intercept the response coming from the server, before that the control of the execution is returned to the code that initiated the request. Have this possibility is useful for different reasons, but in general a response interceptor is needed every time the application needs to preprocess the response that it gets from the server. https://brunoscopelliti.com/blog/a-directive-to-manage-file-upload-in-an-angularjs-application/ Tue, 25 Jun 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/a-directive-to-manage-file-upload-in-an-angularjs-application/ This week I needed to add the functionality of file upload to an AngularJS web application. Since the project already uses jQuery, I found that the best solution to build an asynchronous file uploader was to rely on the well known (and wonderful) jQuery plugin jquery.form, created by M. Alsup. At the end I wrote an AngularJS directive to have a component, that I can reuse in my next projects. I will share it in this post. https://brunoscopelliti.com/blog/facebook-authentication-in-your-angularjs-web-app/ Thu, 13 Jun 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/facebook-authentication-in-your-angularjs-web-app/ A couple of weeks ago, I wrote an article about user authentication in a web application built with AngularJS. Now, let’s move a step further, and use Facebook’s authentication api. Authentication with Facebook When I started to work on this little experiment I was not a big expert in the matter of Facebook’s api (and even now I’m really far from that); in this case I think that the smarter thing you can do is start reading the Facebook’s document about Facebook’s authentication system. https://brunoscopelliti.com/blog/how-to-defer-route-definition-in-an-angularjs-web-app/ Tue, 04 Jun 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/how-to-defer-route-definition-in-an-angularjs-web-app/ Recently, for a project built on AngularJS, I found myself in front of an unusual requirement: I needed to define dynamically the routes of the web application, on the basis of a response from the server. Server response For the sake of simplicity, I assume to have the following backend service, that when called, sends a JSON containing the data about the routes. $result = array( "routes" => array( array("name" => "/home", "templateUrl" => "partials/home. https://brunoscopelliti.com/blog/blog-re-style-bonus-three-wordpress-tricks/ Thu, 30 May 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/blog-re-style-bonus-three-wordpress-tricks/ Some weekends ago, I saved few of my free time to work on my blog. The most evident change is that now for my blog, I’m using the Ryu theme, by the guys of Automattic. It had been a long time since the last time I had worked with WordPress, and I really appreciated it. So today I want to share three useful tricks to customize your WordPress implementation. One of the characteristics of this blog even before the restyle, was that, even if you are logged in WordPress, the top toolbar is not displayed. https://brunoscopelliti.com/blog/start-using-gruntjs/ Tue, 28 May 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/start-using-gruntjs/ Last weekend I finally found few time to give a try to Grunt. I am surprised by how easy is to get started, and I am curious to experiment the benefits which its usage can bring in a real world app. After some really trivial tests, my first serious attempt to create something useful with Grunt has been to create an automatic process to minify and then concatenate different JavaScript files; this post will collect a few notes about what I learned while I was trying to set up this process. https://brunoscopelliti.com/blog/deal-with-users-authentication-in-an-angularjs-web-app/ Tue, 21 May 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/deal-with-users-authentication-in-an-angularjs-web-app/ In this post I’m going to share few thoughts on the main issues related to users authentication in an AngularJS application. I will talk about how to recognize, and maintain, the status of authentication of an user (that is, if they’re logged in, or not) between the different routes of an AngularJS web application. Moreover I will also explain how to handle the case of a not authenticated user, who is trying to access a page, that requires the user to be logged in. https://brunoscopelliti.com/blog/the-ngform-directive-of-angularjs/ Thu, 09 May 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/the-ngform-directive-of-angularjs/ I’m back writing about client side validation in an AngularJS application. Lately, I had to work with a form created dynamically on the basis of a JSON response, that I received from the server. In this case the approach is a bit different from the one I discussed in my first post about form validation with AngularJS. Consider this markup: <form name="sf" ng-controller="FormController" novalidate> <div ng-repeat="f in fields"> <input name="{{ "{{ f. https://brunoscopelliti.com/blog/internazionalization-i18n-with-angularjs/ Tue, 07 May 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/internazionalization-i18n-with-angularjs/ These days I am trying the internationalization (and pluralization) capabilities of AngularJS. I just defined my personal approach to the internationalization of a web app based on AngularJS, and I would like to share it, to have some feedback about it. My approach is based on two main points: The use of technologies of backend (such as PHP) to detect the most probably preferred language of the user. AngularJS filters, to format the data that has to be shown to the users. https://brunoscopelliti.com/blog/css3-box-sizing-property/ Tue, 30 Apr 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/css3-box-sizing-property/ Recently I had to use the box-sizing property… and every time I needed to search on Internet for the correct usages. So, last time this happened I’ve decided to write a post about it, with the hope this help me memorize it - or at least next time I can google for myself 🙂 box-sizing, why? Until a few years ago, when you assigned an element a ruleset like the following, you got a square with size 120 pixel. https://brunoscopelliti.com/blog/angularjs-directive-to-test-the-strength-of-a-password/ Wed, 24 Apr 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/angularjs-directive-to-test-the-strength-of-a-password/ Recently I’m working a lot with AngularJS and validation of forms, and maybe you have noticed this (see: form validation in AngularJS, and validate password in AngularJS). The topic of today is not strictly related to form validation, but, like also the form validation, it could be useful to improve the form usability, and even the user’s data security. Always more frequently during the registration on a new website, I happen to see that the password that I chose is judged, and I’m informed about its strength value. https://brunoscopelliti.com/blog/angularjs-directive-to-check-that-passwords-match/ Tue, 16 Apr 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/angularjs-directive-to-check-that-passwords-match/ I already wrote about form validation some time ago. In that occasion I had the opportunity to show you how much powerful is the native form validation system of AngularJS. But no matter how powerful, of course, it can not cover all possible scenarios. For example we all are used to fill two times the password fields during the registration on a new website. Currently AngularJS has not a native method to check, during the form validation, if the user entered two different passwords; but if you’ve read the previous article, you also know that validation system of AngularJS could even be extended with custom directives. https://brunoscopelliti.com/blog/jquery-custom-build/ Tue, 09 Apr 2013 12:27:05 +0100 https://brunoscopelliti.com/blog/jquery-custom-build/ Ok, jQuery doesn’t need any presentation. I really like it; it has simplified a lot my work… BUT sometimes its almost 100Kb of sweetness are a price we can not pay. If this is the case a good trade-off between light weight pages and all the goodness of jQuery, is to use a custom build of jQuery. Custom builds allow to choose what features of jQuery are to be included in the minified file, and which not; perhaps you are working on a project and you are sure you’ll never have to do an asynchronous request? https://brunoscopelliti.com/blog/angularjs-promise-or-dealing-with-asynchronous-requests-in-angularjs/ Tue, 02 Apr 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/angularjs-promise-or-dealing-with-asynchronous-requests-in-angularjs/ Promise’s support is one of my favorite features of AngularJS. Promises help a lot by handling asynchronous return of data, and allow to assign properties synchronously even when the return is asynchronous. This post will show you a typical use case for the promise in an AngularJS app. It could be simplified as follows: function stageController(scope, p) { scope.revenues = []; scope.$watch("revenues", function () { p.drawPlot(scope.revenues); }, true); p.getData(); } stageController. https://brunoscopelliti.com/blog/sass-cheatsheet/ Wed, 20 Mar 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/sass-cheatsheet/ Few months ago, I started working with SASS - I use SCSS syntax cause I care about my mental health. It’s not particularly difficult, and if you learnt CSS, well, you could learn SASS. One of the first thing I wanted was some kind of SASS cheatsheet - so I summarized the main features of SASS in a SASS file. Variables Sass allows you to declare variables that can be used through the stylesheet. https://brunoscopelliti.com/blog/form-validation-the-angularjs-way/ Tue, 12 Mar 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/form-validation-the-angularjs-way/ Recently I started to develop my first real AngularJS web app; it shouldn’t be anything complicated… I’m planning to replace my old excel for family budget with a brand new AngularJS app. This gave me the opportunity to learn a lot of things about AngularJS, and in particular how AngularJS handles client side form validation (one of the topic generally less appreciated). In this post I will show how to perform client side data validation with AngularJS. https://brunoscopelliti.com/blog/run-a-directive-after-the-dom-has-finished-rendering/ Mon, 04 Mar 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/run-a-directive-after-the-dom-has-finished-rendering/ You have a custom directive, repeatHelloWorld; it has the important task to log the message “Hello, world!” in the console, the number of times specified by the parameter accepted by the directive, and defined in the controller. <body ng-controller="stageController"> <div repeat-hello-world="{{ "{{ repeat " }}}}"></div> </body> Controller and directive are defined as: // Controller function stageController($scope) { $scope.repeat = 5; } angular.module("myApp", ["myApp.directives"]); // Directive angular.module("myApp.directives", []) .directive("repeatHelloWorld", function () { return { link: function (scope, elem, attrs, ctrl) { var hello = function () { for (var i = 0; i < attrs. https://brunoscopelliti.com/blog/use-cases-of-angularjs-directives/ Tue, 26 Feb 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/use-cases-of-angularjs-directives/ A directive is essentially a function executed when the AngularJS compiler finds its declaration into the DOM. The function can do almost anything, but as common task we can consider defining a behavior or executing a DOM transformation. A directive can be presented as an attribute, an element name, a class name, or a name in a comment. AngularJS comes with a rich built-in set of directives, that can be even extended. https://brunoscopelliti.com/blog/hello-world/ Fri, 15 Feb 2013 09:00:00 +0100 https://brunoscopelliti.com/blog/hello-world/ I am enthusiast to start this blog. The first post is always the most difficult… so this is going to be a short one; just to say that here I’m going to write about software development. Recently I started learning AngularJS, and I am really impressed. I finished reading the docs - which are great - and I am going to start my own experiments soon. A final note Currently this blog is using the Twenty Eleven WordPress theme.