Why Flutter? 🤔
In the contemporary world of JavaScript, a lot of solutions to build iOS and Android app has been released. Cordova and Ionic was probably the first famous, giving you the possibilities to make Web app hosted in a native WebView. Then, React-Native arrived with a new concept where your code is compiled to native code. And now there’s Flutter, with a similar concept but the magic behind the compilation work a little differently so it is supposed to be faster. Here’s why Flutter is good:
- Uses Hot Reload in milliseconds to show your app
- Comes with a lot of customizable…
The some() method tests if any elements of the array pass the test implemented by the provided function.
[1,2,3,4,5].some(i => i === 5)
# trueAs simple as that ! But… here come the magic ! If you use forEach and loop through and array of X items and want to break the loop. Is it possible ?
[1,2,3].forEach(i => {
if(i === 2) break;
});
# SyntaxError: unlabeled break must be inside loop or switch 😓😓😓You can use a classic for or wrapping the forEach inside a try catch and throw an exception. …
Why Electron? 🤔
It’s an easy solution to build cross platform desktop native applications. A lot of great products are made with this technology e.g Figma, Hyper, Visual Studio Code, Slack and Discord.
- Uses Web Technologies like HTML,CSS and JavaScript
- Is an open source project maintained by GitHub (Microsoft 😜)
- Is compatible with Mac, Windows and Linux
Requirements 👨🔧
- NodeJS (version 8.9.3++)
GG GL HF WP EZ ! 👨🔬
# Clone the Quick Start repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install the dependencies and run
npm install && npm startNot that hard !? As you can see, Electron come by default with two JavaScript files…
Why Parcel? 🤔
It is probably one of the simplest application bundler. Parcel is about:
- Fast bundle times
- Bundle all your assets e.g JS, CSS, HTML and more
- Automatic transforms using Babel and PostCSS
- Zero config code splitting
- Hot module replacement
- Error logging
Requirements 👨🔧
- Yarn
- Parcel (yarn global add parcel-bundler)
GG GL HF WP EZ ! 👨🔬
At the root of your project’s directory, create your index.html and index.js files and install the missing dependencies by running the following command.
touch index.html && touch index.js && touch hello.jsLet’s start by adding this code in index.html.
<html>
<body>
<script src="./index.js"></script>
</body>
</html>Now open index.js and write:
import { hello }…At the WWDC 2018, Apple has announced watchOS’s newest version and showcased many new features. Out of which, one in particular is really interesting for web development: the support of full HTML rendering on the Apple Watch. Clicking on a link from messenger app or an email will open a WebKit browser. Previously, the OS would ask users to open the content on their phone instead. This new feature will allow users to view and browse the web content directly on their watch.
Exceptions 🤔
At the moment, some features are not supported:
- Video playback
- Service worker
- Web fonts
How does it scale 📐
Most responsive website…
Hey guys, It’s been a while since I’ve written an article. Last week, I’ve decided that from now on I’ll publish 2 articles weekly on different subjects. On Mondays, the post will feature new discoveries or subjects that I like such as Functional Programming, while Thursday’s will be about learning new languages or frameworks.
Why ELM? 🤔
Forget all the fancy hardcore concepts such as Monad, Monoid, Semigroups and gibberish term. Elm is about:
- Efficient rendering
- No run-time exceptions (No null, No undefined is not a function), thanks to the compiler, which makes ELM interesting to use in the industry
- Separated logic and…
A pipe takes x sequence of operations. The first function receive the argument as an input, process it and gives the output as an input to the next function. etc… until the final result.
The difference between compose and pipe is the way the functions are called. Pipe is a left-to-right and Compose a right-to-left.
import _ from ‘lodash/fp’// print :: Any -> Void
const print = (val) => console.log(val)// add1 :: Number -> Number
const add1 = x => x + 1// triple :: Number -> Number
const triple = x => x * 3// square :: Number -> Number
const square = x => x ** 2const x = _.pipe(add1, triple, square)
print(x(3)) // 144
Why is it useful
- Easier to read than compose
- Easier to debug
- Reduce the number of variables used
Function composition is a mathematical concept that allows you to combine two or more functions into a new function. It requires you to write your functions in a composable way. This means your functions must have 1 input and 1 output and functions with multiple inputs must be curried.
Keep your function pure and focus on the types of the input and output.
import _ from ‘lodash/fp’// print :: Any -> Void
const print = (val) => console.log(val)// add1 :: Number -> Number
const add1 = x => x + 1// triple :: Number -> Number
const triple = x => x * 3// square :: Number -> Number
const square = x => x ** 2const x = _.compose(add1, triple, square)
print(x(3)) // 28
Why is it useful
- Easy to read
- Eliminate temporary variables
A higher-order function is a function that can take at least one or more functions as arguments, or returns a function as its result.
const names = ['Leonardo_Dinosaur', 'Cheerful_Candytree', 'Reindeer_Fairyfluff']const removeUnderscore = names.map((name) => {
return name.replace('_', ' ')
}) // ['Leonardo Dinosaur', 'Cheerful Candytree', 'Reindeer Fairyfluff']
The map method is a HOF that accept a callback (anonymous function).
Why is it useful
- Readability
- If pure, it could be reusable and easy to test.
The array method reduce() transform an array into a single value.
How to use it
const nums = [1,2,3,4]const sum = nums.reduce((acc, curr) => { return acc + curr }, 0)
// 10
Reduce is more flexible than the other array methods we saw before. It is possible to pass an empty object or array as an accumulator and you can return whatever you want inside.
If you manipulate a big data and want to filter and map, it’s possible to do this manipulation with only one reduce.
Why is it useful
- Readability
- Immutability
- Chaining array method
- More flexible than the other array method
Maxime Beaudoin
Consultant Frontend developer and musician for several years.
