Joan's Blog

After about 8 years using Android phones and having become somewhat disappointed by how much a pervasive system it can be even if being somewhat open-source-based, and also having been close to the UI/UX design world for some time, I decided to give a try to the iPhone and experience the superior UI/UX design which, in my mind, it was supposed to have. Read more

Last year I started a sort of basic Dango-based sort of simple blog just to jot down small software-related learnings in Markdown. Read more

Example: function f() { return 1 } function f() { return 2 } f() // Result: 2 Declaring functions by declaring const instead prevents this by raising an error: Read more

This: [1, 2, 3, 10].sort() outputs this: [1, 10, 2, 3] because apparently, elements are converted to strings before comparing them. Read more

According to the section What is a Pattern? of the book Learning JavaScript Design Patterns by Addi Osmani: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#whatisapattern So, if selecting by class, this Read more

When I wanted to return a promise which is already resolved, I used to do this: return new Promise(resolve => resolve(value)) But it can be done in a simpler way like this: Read more

When it comes to name files and directories, kebab-case should have the following advantages over camelCase: Easier to type: no need to hold one key while typing another More readable: words are more clearly separated No problems for non case-sensitive file systems or configurations However, camelCase seems to have become the standard for naming files in frontend. Read more

React is the most used library for frontend development these days, and I would like to better understand why that is. Read more

CSS-only Earth Globe experiment on CodePen: https://codepen.io/jperals/full/ExYqwyJ (Visit with caution: it’s a bit resource hungry) Features: CSS 3D transforms CSS animations CSS gradient backgrounds CSS pseudo-selectors (:before, :after, :nth-child) SCSS with trigonometric functions The hardest part was to stretch the tiles according to the spherical surface (note that they are trapeziums, not rectangles, otherwise they would cross and overlap each other). Read more

If you try to do just git push a Git branch that is new and not in the remote yet, you get this message, which suggests that you need some extra arguments: Read more

For example: git add -p my-file.js will start an interactive prompt that will show every hunk (block of changed lines) in the file and ask if you want to stage it or not (among other options). Read more

In CSS one is tempted to group all possible declarations of one selector together, so as to not repeat the selector. Read more

For example: Math.max(1, 3, 2); // Output: 3 Also this will work: const array = [1,3,2]; Math.max(...array); // Output: 3 See the Mozilla docs: Read more

https://www.w3.org/wiki Read more

For example, +"1" returns 1. If the value can’t be converted to number type, it will return NaN. For example , +"a" or +{} return NaN. Read more

By adding c% at the beginning of the string, and a second string argument with CSS rules. Example: console.log('%cmessage', 'color: green;line-height:40px') https://coderwall. Read more

For example, instead of just: node . You can do: time node . to get some basic extra execution time numbers without the need of extra performance calculations from your app’s side. Read more

JavaScript: DOMElement.style.setProperty('--primary-color', 'yellow') CSS: .my-element { background-color: var(--primary-color); } An article with more information: https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0 Read more

Its value will also become the color for border and box-shadow, for example, unless those are explicitly set to some other value. Read more

To make an initial punctuation mark appear hanging (not within the main text block). p { hanging-punctuation: first; } From this nice article: https://betterwebtype. Read more

For example, this: (3500).toLocaleString() will return 3,500 if using the US English locale. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString Read more

Simple example: .two-columns { column-count: 2; } MDN docs about the CSS Multi-column layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns MDN docs about the CSS multi-column property in particular: https://developer. Read more

Documentation: https://coffeescript.org/#operators Discussion (where removing these aliases was proposed and rejected): https://github.com/jashkenas/coffeescript/issues/813 Read more

(At least on Chrome) As seen for example on LottieLayer: https://github.com/72/lottie-framer/blob/master/LottieLayer.coffee#L12 console.log "%c#{name}Successfully Included Locally", "background: #DDFFE3; color: #007814" Read more

Official documentation: https://nodejs.org/docs/latest/api/modules.html#modules_dirname Notes: This is a different thing than process.cwd(), as the current file directory and the current working directory may not be necessarily the same. Read more

This can be useful when styling for print. Read more

Apparently all major browsers support using regular PNG files as favicon, so it is possible to happily ditch the .ico file extension and format in favor of “pretty normal” PNG files. Read more

Another case for inline-block… Read more

console.dir outputs an object’s properties in a way that might be actually more useful than console.log: https://developer.mozilla.org/en-US/docs/Web/API/Console/dir Read more

You can pass any number of elements to console.log, not just one or two. For example (within the app I’m writing in CoffeeScript): Read more

You can import other (S)CSS files from the node_modules directory by using ~. For example: @import "~my-module/my-file.scss"; Where my-module would be a module installed e. Read more

Using Gulp with browserSync 2.24.5, coffeeify 3.0.1 and coffescript 2.3.1. Documentation about the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax Read more

NaN and undefined don’t seem to be allowed in pure JSON, but null is. Read more

By changing an ai file extension to pdf, it is possible to import its content into a Sketch document by dragging the file into it. Read more

Apparently Heroku is not meant to host static content, but it is possible. One way is to use the PHP buildpack (and probably other buildpacks that include servers like Apache or nginx). Read more

https://redux.js.org/recipes/using-object-spread-operator Read more

For some reason I thought Gatsby was a sort of static site generator more or less like Jekyll, but it turned out to be something different, more about reading external data sources than static content files —something that, even assuming it could somehow fit my specific needs, it would probably be much more complex to do so. Read more

Hugo is yet another static site generator, pretty much like Jekyll. I wouldn’t say that build speed is the most important feature, but I have to admit that Hugo’s is quite impressive. Read more

Just that the other repository needs to be set as a remote. See https://stackoverflow.com/questions/5120038/is-it-possible-to-cherry-pick-a-commit-from-another-git-repository Read more

Read more

So apparently there are (at least) two ways to add a code block in Markdown: either by indentation (which I find less convenient), or by using the triple-backtick (```) method that I am already used to (Gitlab, Github, Slack, Trello…),. Read more

I found it useful for adding custom created_date and modified_date fields to a model without overriding its save method. I’d find a method-based syntax nicer, but it’s OK. Read more

The feature has to be added as an extra feature in the template tag: {{ some_text | markdown:"fenced-code-blocks" }} Read more

They need to be added explicitly in the models. See for example: https://stackoverflow.com/questions/3429878/automatic-creation-date-for-django-model-form-objects Read more