Danywalls

Life , Coding , Father

Sometimes We need to add externals libraries like Bootstrap or Bulmacss into our Angular 2/6 Applications. The easiest way to handle this is passing the responsibility to Webpack.

Angular CLI allows configuring easily the angular.json files to handle externals libraries, for example into our next case we will install Bootstrap.

npm i bootstrap --save

To notify Webpack to handle the Bootstrap library, we edit the angular.json and includes the paths.

"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

DONE! Now you move all responsibility to Angular-CLI and Webpack to handle all libraries registered in the angular.json.

#Angular

If you are Typescript guy you don't care about .js and .map and only keep your focus into .ts files this configuration is for you.

Some task runner moves this kind of files to some directory but if you only want to keep your focus into .ts files, you can exclude these extensions from visual studio settings.

"files.exclude": { "**/.git": true, "**/.DS_Store": true, "**/*.js": true, "**/*.js.map":true } #typescript

If you are a Mac user and love Spotlight or Alfred, If for you is normal type cmd + space to find or launch some app, maybe you missed keep doing the same thing on #Windows, then Wox is your answer

Wox is a launcher for windows like Alfred, with skin support, plugins and more, so if you want to continue to use one launcher on windows give the opportunity to wox.one

Today I started a new process to move my blog from #WordPress and #Medium to Write.as

Write.as is working to allow publish into custom domains from iOS, but my current workaround is to add to home screen shortcut on my iPhone and it allows to publish easy and works like a charm!

#write

Yesterday, I found a good reason to use arrow functions, sometimes I said the arrow functions is a fancy or shorter way to write functions but this is not the only benefit, the Arrow functions can keep the scope of his object without going to global window, I will explain with code.

let paymentmanager = { invoiceId: 1, CloseInvoice: function(){ console.log("close invoice" + this.invoiceId); } }

The code works fine, but we add extra requirement wait 1 second until the invoice is created like an ajax response.

Read more...

These days I was working in a place where “the proxy” was not my best friend, trying to install my packages using npm or install the VSCode extensions was impossible so I need to configure the proxy in both.

From the terminal:

npm config set proxy http: // yourproxyiporaddress: port npm config set https-proxy http: // yourproxyiporaddress: port`

For VSCode extensions the “proxy” is also required:

Preferences> User Settings "http.proxy": "http: // yourproxyiporaddress: port" ` #proxy

MomentJS is a library that I love to manage the dates and you can put to work with #Vue using the filters, I will explain how to combine them.

The first thing is to add the references to #MomentJS and Vue in our page, besides creating a file named filters.js to store all filters functions.

<script src="https://momentjs.com/downloads/moment-with-locales.js"></ script> <script src = "https://vuejs.org/js/vue.js"> </ script> <script src = "filters.js"> </ script>

Creating Filter

Using the function Vue.filter() and passing the name of the filter as the first parameter and the function as a second. My example the function receives the date as parameter and inside I write the definition of our function that is using the MomentJS library, using as parameters the date and a format “YYYYMMDD”, this creates an instance of MomentJS that contains the method fromNow () that returns us the time from the date we have passed until today.

Read more...

VeeValidate is a plugin for #Vue that allows you to validate the HTML elements and show errors in an easy way, only adding the v-validate directive in the input and the validations that we need to be divided by a pipe.

VeeValidate has more than 20 validations by default, it also creates an errors objects where the references to all the validations that we have in our instance of Vue are stored.

Read more...

Many times we want to create an API Rest quickly and work beyond our localhost, then JSON-Server and Now come to the rescue.

Now allows us to publish static portals, but also applications with Node, so we will publish our API rest using JSON-server.

mkdir myfakeapp npm init -y npm install json-server --save-dev

API

To create the API using json-server, first creates a file db.json with the definition of the API so that json-server generates the verbs get, post, put and delete of the different entities that we define into the file.

{ "Games": [ { "id": 1, "vsteam": "Raptors", "date": "12/12/2017", "result": 0 } ] }

Read more...

Today I sold my Magic Mouse 2, the truth is a few months ago when I bought the main aspects beautiful mouse and could be charged with the same cable of the iPhone, it was the best solution to say goodbye to the batteries, In summary perfect.

The months passed and aside from the beauty, the functionality on the Mac was “fine”, the gestures, but ... from there .. nothing special, in my day to day I work with a Logitech Mouse of 9 euros

I have become accustomed to the behavior of Mouse Logitech, besides that when I start the virtual machine with Windows, the Magic Mouse does not have the fluency I expected or the smoothness when moving the mouse.

If you are a person who only uses Mac because you always use Magic Mouse it will be a trustworthy purchase, but if you spend 8 hours with a “normal” mouse and you only use the Magic Mouse a few hours when you are at home then I do not think it is a great purchase

For less than € 20 you have better options that work perfectly well on both Windows and Mac.

Logitech M185 GHB Optical Mouse Vertical Ergonomic Mouse

#Mac