Forem: michalhonc

Open native share context with Javascript

michalhonc — Mon, 23 Nov 2020 07:54:14 +0000

Share text, links, and files to other OS apps with Javascript share API

Surely you have already used Share API in mobile native apps. It's the popup menu with all apps that can receive share context with the addition of locations like a copy to clipboard. This API is well known in iOS and Android (React Native and Expo) but did you know that you can trigger the same popup via browser API?

The W3C specification is still a draft but well supported by the browsers. It's mostly available in mobile browsers (makes sense) but Safari on macOS and Edge on Windows do support it for desktop at time of writing (11-2020).

API

The API consists of two functions on navigator object. The first function is share() which takes a data object as a single parameter. You can pass the following to this object

{
    url: USVString,
    text: USVString,
    title: USVString,
    fiels: Files[],
}

USVString is a sequence of Unicode scalar values. Simply USVString is a sequence of numbers that are represented by a related characters in the Unicode standard.
Image, video, audio, and text files can be shared

This function returns a promise that is resolved once the user completed a share action. Rejected can be when the user closed the share context popup or when the specified data parameter is not valid. This API works only for HTTPS protocol and only after the user interacted with the page, ie. you can not init share popup onload.

// async context is present
try {
    await navigator.share({
      title: 'Share API',
      text: 'This API is cool!',
      url: 'https://example.com',
    });
} catch(err) {
    console.log(err);
}

To check if a given file array can be shared, use the canShare() function that takes an object as a parameter with an interface:

{
    files: Files[];
}

Usage may be following:

// in HTML
<input id=“files” type="file">
// …
// async context is present
// Event Handler
const { files } = document.getElementById('files');
if (navigator.canShare?.({ files })) {
  await navigator.share({
    files,
    title: 'Pictures',
    text: 'Our Pictures.',
  });
}

Note that canShare() has lesser support than share()!

Fallback

For browsers that do not support this API should be available a fallback. Either the share button is not shown or a custom popup is presented to the user. Such popup can consist of options such as copy to clipboard, share on social media, open in a mail client (anchor with the mailto prefix as href) or paste it to message.

Links for implementation of custom share behavior for social media:

Conclusion

With Share API users can customize their preferred share targets on their own device instead of being limited to just the predefined options.

4 not so crucial things I didn't know about JavaScript

michalhonc — Sat, 01 Aug 2020 16:33:36 +0000

There is so many things that you don't know about JavaScript. Some are crucial, some are not. I wanted to put some not so crucial observations that I didn't know about JavaScript to blog post. Hope you will find them interesting. Let's get to it.

Just plain scope

Thing number one in this list is that you can use just plain { ... } scope whenever you want.

let name = 'Big Lebowski';

{
    let nickname;
    if (name === 'Big Lebowski') {
        nickname = 'The Dude';
    } else {
        nickname = 'Walter';
    }
    // ...
}

console.log(nickname) // ReferenceError: nickname is not defined

This preserves the same functionality as other scopes withif, for, etc. But why would you use plain scope? Exactly why you are using lexical scoping in eg. function or if statements. To scope variables so they are not accessible from outer scope to prevent naming collision and keep things seperate. You can use these plain scopes to follow the principle of least privilege. Not once did I come across upon such usage in any codebase that I run into but that doesn't mean it's useless.

There is no `else if` in JS!

Wait, what?! I have used else if so many times and now it doesn't exist in JavaScript? The construction else if doesn't exists in the language AS IS. Only if / else exists. But how can I use else if then? Answer is easier that you might think. You just omit curly braces after else.

if (a === b) {
    // ...
} else if (a === c) {
    // ...
}

// is actualy following but with omitted curly braces after else

if (a === b) {

} else {
    if (a === c) {
        // ...
    }
}

Omitting curly braces is not anything special in JavaScript. Recall this:

const name = () => firstName + lastName;

Again, this is not anything crucial for your day to day life but just a fun fact.

Naming loops and other statements! WHAT?!

You can label JavaScript statement to afterwards use break or continue with the label.

loop1:
for (let i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (let j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i === 1 && j === 1) {
         break loop1;
      }
   }
}

You can also use them with those plain scopes I mentioned at the beginning of this post.

someScope: {
    // ..
    break someScope
    // anything after break won't be executed
}

Again, I have not seen naming with label in any real codebase but that doesn't mean it doesn't have an use case for you in future.

There is negative zero!

Yes, there is -0 and it is valid. Since JavaScript uses IEEE 754 standard there are signed zeros (-0 and +0) and they are equal!

-0 == 0 // true
-0 === 0 // true

You can still tell the difference with following code

Object.is(-0, 0) // false
// or
1/0 === 1/-0; // false (1/0 === Infinity and 1/-0 === -Infinity)

Where negative zero occurs? In certain numeric operations such as

0 / -3; // -0
0 * -3; // -0

Another case is using negative zero with vector logic where besides value you also needs to know the direction of the value.

Do you know the difference between inherit, initial, unset, and.. And revert?

michalhonc — Tue, 19 May 2020 05:01:17 +0000

Do you know what the differences are between the four CSS values for controlling the inheritance of the rules? This article will present them to you and explain when to use what value in a given situation.

For each CSS property, these values are valid. In order to fulfill understanding how these values work, it takes explaining when a property is inherited and when it is not.

Inherited properties

Inherited properties are those properties that, when not specified, take the value of the property from the parent element. An example may be the property color If we set that to a html element, all child elements that don't have the color property inherit the value from the html element.

html {
   color: blue;
}

footer {
   color: red;
}

In this case, all the text, except the footer, will be blue. The footer will have red text.

If the CSS property has not been set anywhere, its value is taken from the default styles.

html {}
footer {
   color: red;
}

In the case of Chrome, the all-purpose text will be black except for the footer as the default color of the property color is black.

Non-inherited properties

The opposite are properties that are not inherited. Unless we specify such a property. Its value will be set from the default styles.

We will use the border nature as an example. If we set that to a html element, only a html element will have that value.

html {
   border: 1px solid blue;
}

footer {}

No other element will have a blue border. The footer does not have the border set, so it will use the default value. The footer will have the value of the CSS property of border equal to none

inherit

The first value we explain is inherit. It creeps out from its name that if it specifies a property for CSS, it will take the value from the parent element. So, for inherited qualities, it sets their guiding behavior. For example, it finds practical uses when resetting a value in media query. For non-inherited properties, this value can also be set, but in practice I have not yet encountered a situation where it would be suitable for use.

html {
   color: grey;
}

p {
   color: lightgrey;
}
@media only screen and (max-width: 600px) {
   p {
      color: inherit;
   }
}

initial

If you don't need to use inheritance, you use the value initial. That given CSS property sets the default value given in the specification. This makes the element with this homeliness independent of the parent element and its value of the same CSS property.

div {
   color: green;
}

div > p {
   color: initial;
}

unset

The combination of the two above values is unset. After setting the CSS property, unset acts dependent on whether the given CSS property is inherited or not. If the CSS property is inherited (e.g. color), The CSS property will behave as if it has a value of inherity, i.e. it will inherit the value from the parent element. If the CSS property is not hereditary (e.g. boder), The CSS property will behave like a value of initial. It is therefore a combination of intial and inheritance that does not change its inherited behaviour for a given CSS property.

div {
   color: green;
   border: green;
}

div > p {
   color: red;
   border: red;
}

@media only screen and (max-width: 600px) {
   div > p {
      color: unset; /* -> green */
      border: unset; /* -> none */
   }
}

revert

Revert is a whole new value currently (18-05-2020) supported only in Firefox and Safari. It behaves very much like unset. The difference is that revert versus unset can refer to maximum user agent stylesheet. This means that the value specified in the specification is not taken as initial. This makes a difference, for example, with the property display for paragraph. Its value in the specification is inline, whereas the default browser value for the section is block.

p {
  display: unset; /* -> inline */
  display: revert; /* -> block */
}

all

We explained all the values by which the current value can be reset. These values also include one CSS property, namely all. This property sets original / inherit / unset / revert to all CSS properties of the element. So it is not necessary to list all the properties.

p {
   color: unset;
   border: unset;
}
/* vs */
p {
   all: unset;
}

Hope it helps :-)

Find more tips on my twitter @michalhonc, instagram @michalhonc.cz and personal blog https://michalhonc.cz

Super Cool and Super Useless Secret Chrome Feature

michalhonc — Thu, 23 Apr 2020 15:51:30 +0000

Debugging a website inside DevTools is crucial.

But what if you are developing DevTools? How do you debug that?!

Well with DevTools within DevTools ofcourse! DevTools are just another HTML page so you can open another DevTools!

Just open DevTools in separet window and press Command+Option+I for Mac and F12 or Control+Shift+I for Linux/Windows. You will get another window!

For you as a web dev it's probably useless. But can be handy for DevTools devs.

Skyrocket your CSS skills with Spaced Repetition

michalhonc — Thu, 16 Apr 2020 17:26:43 +0000

What if I tell you that there is a way to either greatly decrease your time spent studying, or greatly increase the amount you learn? Doesn't matter if it's CSS, HTML or geography.

How?

I was never able to study in a way of memorizing stacks of texts. I need some sort of game that can keep me entertained while studying. I have recently tripped over term called Spaced Repetition. Spaced repetition is a study method which uses spacing effect which describes how our brains make better connections and overall remember things more effectively when we space out our learning over time.

The following curve better describes the review cycle that can help memorizing topic for longer period of time.

To apply Spaced repetition in studying, I use an app called Anki. It's multiplatform (Web, Android, iOS (paid), Mac, Windows and Linux) app that is based on flash cards.

In Anki I've created multiple Decks (topics) with multiple questions about CSS.
Namely these decks:

CSS properties
CSS pseudo-elements
CSS pseudo-classes

You can download them on my Github repo, simply import them to Anki and start studying!

There are some advanced stuff in those decks that I was not aware it even exists.

Link to repo: https://github.com/michalhonc/anki__decks

Let me know which decks should I create next! React? NodeJS? HTML elements?

Set up continuous deploy for Free with React, Github, Travis and Heroku

michalhonc — Wed, 08 Apr 2020 17:02:47 +0000

In this tutorial I'll show you how to set up professional development process with help of continuous deployment.

We'll be using React with help of Create-react-app but you can easily follow with any other project maintained with NPM. Even if you are not using NPM, you can adjust the core build and run scripts for your needs quite easily. By any means you don't have to have any React experience whatsoever. It's just a sample project that will be used to show the flow of setting up the environment.

Requirements before we start:

Installed NodeJS with NPM and Git,
You have to have an account on Github, Github account linked with Travis-ci.org and Heroku. All of them are free. Travis CI has .org TLD for free repos and .com TLD for private repos. For this tutorial we'll use .org version for free repos.

Create React project with Create-React-App

Open your terminal of choice in your work folder. For me, it's ~/sandbox/

cd ~/sandbox/

Within this folder, we'll create the React project with NPX (A tool for executing Node packages) that is pre-installed with NPM version 5.2+

npx create-react-app tutorial-cicd

Installation of boilerplate project will begin. When everything is good to go you'll see a message with list of commands that can be run within the app. We'll just cd into the project

cd tutorial-cicd

We don't have to do npm install since the npx command already dit it. Now we can start the app with:

npm start

New browser tab will get open with http://localhost:3000 and following page will be shown.

The good thing about create-react-app is that it has tests included out of the box so we don't have to set up anything. For the reference you can run tests within you folder with

npm test

You'll be prompted with few options of running your tests. Simple press a to run all tests. Only one test should be run with text renders learn react link that checks if the app renders link that can be seen on http://localhost:3000. Since React renders the link just fine, the test passes.

Now we have our project setup.

Create Github repo and link it to our app

If you already setup your Github account you are good to go, if not please register on Github.com. After you login to Github, we'll create new repository. You can create new repository on https://github.com/new.

We'll name the repository tutorial-cicd and set it to Public. Now we have repo created but still not linked to our app. We can do that with following commands

git remote add origin git@github.com:<your_github_username>/tutorial-cicd.git
git push -u origin master

NOTE that you should swap <your_github_username> in first command with your username. Also this way we are using SSH to connect our repo. If you don't want to use SSH auth you can use HTTPS versions.

We don't have to do git init since npx already included .git and .gitignore in our app folder.

If you've done everything correctly, you should see the app on Github under project tutorial-cicd.

We have now working app that is connected to Github repo.

Connect Github repo with Travis CI

Now comes the part where we connect the repo with Travis CI. You should be logged in into Travis CI with the same Github account that has our tutorial-cicd repo. You'll be afterwards redirected to Github for authorization.

After you have successfully logged in. Click on your profile logo in the upper right side of the dashboard, click Settings and then the green Activate button. After that you should see a list of repositories on your Github account. If you don't see the tutorial-cicd repo, click on Sync account in the left side of the screen. It'll take few mins (don't know why it takes so much time to sync) to sync Github and Travis CI. After success you should see the tutorial-cicd repo.

Create Travis config file

To tell Travis CI what to do, we must create .travis.yml config file in our projects root directory.

touch .travis.yml

Within this file, we will specify language to be used in build, its version and script to be run.

Since we need JavaScript on server, we will use Node.js v12. For this demo we will run only our test and production build of create-react-app so we can add following to .travis.yml

language: node_js

node_js:
  - "12"

script:
    - npm test
    - npm run build

Let's try that. Push new file to Github repo with

git add .
git commit -m "add travis.yml config file"
git push

If you visit tutorial-cicd in Travis on URL

https://travis-ci.org/github/<your-github-name>/tutorial-cicd

You should see either running (yellow) build, already finished build (green), or failed build (red).

Under it, there is a log of the build. If something failed, you will see there the appropriate error message.

If everything passed, you just run first build! Good job

Create Heroku project

Now we will create project on Heroku where we can run our app in the cloud. For that you need to create an account on their website. After you create and account, create new app on this link. Name the app as "-tutorial-cicd" and choose a region that is closer to your location. For me Europe. If the app name is already taken, just modify it slightly. Click "Create app".

Map Deployment Method to Github

To link Heroku project with you Github repo, in the Herokus Deployment method, choose Github. Then find the Github repo project and connect it. In the Automatic deploys section, check the "Wait for CI to pass before deploy" and then click on "Enable Automatic Deploys".

Link Travis and Heroku

To connect Travis and Heroku, we need to update .travis.yml file. But before updating the file, we need to create our secure api key. For this, you need to have both Heroku and Travis CLI. After installation login to heroku CLI with

heroku login

That will prompt you with e-mail and password for Heroku.

If you have both CLIs installed you will run

travis encrypt $(heroku auth:token) --add deploy.api_key

You will verify detected repository with yes. Then it will prompt you what the CLI will overwrite our Travis config file with deploy part. Answer with y. At last we will specify provider of our deploy to be heroku and app name. Final .travil.yml config file should look like this.

language: node_js

node_js:
  - '12'

script:
  - npm test
  - npm run build

deploy:
  provider: heroku
  app: <your_heroku_app_name>
  api_key:
    secure: <your_secure_key>

Now you can push changes to Github repo with

git commit -m "add deploy section to travis.yml"
git push

Serve static files on Heroku

We have build our create-react-app to production version but we have not specified how to run such build. For that we will use serve package. Sure there are better ways to do that but I have chosen the most straightforward for this tutorial. We need to install one extra dependency to our project

npm install --save serve

After that we will change our start script in package.json to use our installed serve package as following

NOTE: only edit start in scripts object.

{
    ...
    "scripts": {
        "start": "serve -s build",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    }
    ...
}

We can again commit new changes

git commit -m "add serve package"
git push

After success CI in Travis, you should be able to see you app running on URL

https://<your_heroku_app_name>.herokuapp.com/

Conclusion

You have now setup continuous deployment that will deploy your changes to production without human intervention. Only failed tests or build will need additional steps. Remember that you should create new git branch when developing new feature so another college can check your changes before they are deployed to production.

My full repo can be found on my Github.

Going to create another tutorial on same process, but also with Docker! Stay tuned

Checkout more articles on my personal blog

5 Canny little tricks for React devs

michalhonc — Sat, 21 Mar 2020 17:36:31 +0000

No extra talking. Let's get to it.

1. Pretty print your props.

You just created new component that has massive amount of props. To quickly get your head around them you can pretty print them on page with more arguments on native JSON.stringify function.

const NewComponent = (props) => (
   <pre>
      {JSON.stringify(props, null, 2)}
   </pre>
);

2. Solve multiple HOC around a component?

You cannot use hooks for some reason so you end up with HOC (Higher Order Components). That can get hairy in no time. Use compose function to clean your code. You can create your own or if you use redux you can import one from it.

export default connect(mapStateToProps, mapDispatchToProps)(i18n(format(Component)));

// vs.

import { compose } from 'redux'; // or your implementation

const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
   i18n,
   format
);
export default enhance(Component);

3. console.log function that uses concise body (body without return statement).

You have function component that use concise body so you immidietely return body without the need of return statement. Pretty cool time saver.. but what about the time you want to console.log props. You would have to convert it to block body with return statement. Or not? Actually you can use condtional logic for it.

const Component = (props) => console.log(props) || (
   <div>
      {props.children}
   </div>
);

This both logs props to console and render the component because console.log returns falsy value so it skips to second part of the condition.

4. Manually restart nodemon

Sometimes you want to restart nodemon server manually. Instead of some random change to a random file and Ctrl + S just type rs with a carriage return (Enter) to the terminal running nodemon. It will restart.

5. Pass HTML character references as props

Want to pass HTML character references as props in JSX? It works with simple string but breaks with more complex logic. You can achieve it with String.fromCharCode function

// <Component charCode={160} />
// 160 -> non-breaking space

const Component = (props) => {
   const divider = String.fromCharCode(props.charCode);
   return (
      <div>
         <SubComponent text={`${divider}-${divider}`} />
      </div>
   );
}

Find more tricks on my Twitter!
https://twitter.com/Michalhonc

Bypass AdBlock! (Not a single F*ckAdBlock plugin given)

michalhonc — Sat, 08 Feb 2020 12:39:05 +0000

Full version (without ads :-)) is accessible on my blog http://bit.ly/bypass-adblock

You're losing ~ 25% of your revenue because of AdBlock, which is not negligible. If your ads are not unpleasant or harassing, you do not have a fake button leading to advertising, or pop-up windows, IN MY OPINION you have the right to fight AdBlock.

But how?

The aim of this article is to help you, as a website owner, to combat advertising blocking. To win, you need to understand how AdBlock works. Identify its strengths and weaknesses and set a strategy against blocking advertising accordingly.

What AdBlock is?

AdBlock is primarily referred to as web browser add-ons that block ads on websites. The user simply installs them into the web browser and no longer has to worry about anything when browsing through the Internet. AdBlock will solve everything in the background.

What and how it is blocked?

So how can AdBlock find advertising and just not show it to the user? To find the answer, at least have basic knowledge of HTML and CSS. Let's have the following HTML structure:

<div id="article">
  This is an article.
</div>
<div id="advertisement"> 
  Buy new phone with 50% discount!
</div>
<div id="article_2">
  Another article.
</div>

On a glance, it's clear what advertising is, and what an advertiser isn't. The AdBlock add-on just looks at its database of well-known ads and compares the individual elements on the page. If it finds a match, it removes the element from the page. Since id = "Advertisement" is most likely in the database of known ads, AdBlock deletes this element and all its children in HTML.

What's AdBlock targeting?

AdBlock can write rules on anything in HTML and CSS. It can focus on the level of HTML tag immersion, their classes, id, attribute data, css rules and their order.

How to find out what AdBlock is catching on my page?

If you don't know what AdBlock is grasping for on your page, I attach a simple guide.

Install AdBlock Plus as a add-on to your browser,
open DevTools (F12 keyboard shortcut),
in DevTools, click on the "AdBlock Plus" tab,
up in dropdown, set up "Show _ Blocked _ Items of _ any _ type",
Reload Page

You'll get a red sheet of all the blocked elements on the page, their types (script, element, etc.), domains and blocking rules. You can read from it what easlist the rule comes from.

Program for "acceptable ads"

The first ways is an official one. AdBlock Plus has a program for "acceptable ads" that grants an exception with blocking advertising under certain conditions.

Conditions include:

Placing advertising outside the main content
Clear resolution of what is content and what is advertising
Advertising size on the page

Create issue in easylist to remove rule

If you think AdBlock is blocking an element that isn't advertising, or a rule on your page breaks a layout, you can add an issue to the appropriate easylist with a comment on what's blocking, what's breaking it, and how to reproduce it. If the easylist administrator approves your claim, the rule will be removed or replaced.

Proxy URLs

Proxing a familiar advertising URL through your domain. AdBlock can focus on URLs in the link in HTML (for example, advertima.eshop.com/mobile), thereby blocking the entire advertising element. So if you change the URL in the link to, for example, yourdomain.com/direct?ID=3958104 and redirect from this URL to advertima.eshop.com/mobile, AdBlock has nothing to grab on to.

Advertising scripts that AdBlock simply blocks can also be tackled this way.

Hashing CSS classes and attributes

The often used technique of fighting AdBlock is hashing out CSS classes and other elements. If a CSS ad has a class called Ad, it's simple to filter it out. If you're throwing up the value, filtering it will be more native. If you dynamically hash out the value, filtering using CSS classes will be virtually impossible.

Such dynamic shedding can have different implemnnings. For example, you can use a bundler (e.g. Webpack, together with CSS Modules), which classes use the hashing feature to execute such as class name + git commit hash.

Advertising camouflage

Another problem with advertising as such is its uniqueness and simple filtering. So how do you disguise such advertising?

Add other non-promotional elements to the page that have the same HTML structure, but different content. Such an element is more challenging not to include in the filtering rule.

If AdBlock adds a rule that blocks both advertising and the non-advertising element, you can go back a few steps above and create an issue in the relevant easylist.

Using SVG instead of text "Advertising"

You may be required to label the advertising element with the words "Advertising" or "Sponsored." Unfortunately, that play into the hands of AdBlock.

It's easy to get around. Instead of text as such, you display SVG, which contains the text in question and insert it as a background image. The text in the SVG thus embedded is hidden for AdBlock. When you combine this approach with hashing out the URL of a given SVG, you have a solid defense.

<svg width="100" height="35" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect fill="none" height="37" width="102" y="-1" x="-1"/>
  </g>
  <g>
    <text font-family="Helvetica, Arial, sans-serif" font-size="24" y="24.5" x="2.5" stroke-width="0" stroke="#000" fill="#444">
      Advertising
    </text>
  </g>
</svg>

To meet the previous Advertising point, you can create a second SVG that has no text and is zero in size. You insert such SVGs into all non-advertising elements so that, again, they are least different from advertising in terms of HTML structure.

Another approach is to parse texts into several HTML tags in different order. Facebook, for example, has implemented this approach.

Full article is accessible on my Gastby blog http://bit.ly/bypass-adblock

Forem: michalhonc

Open native share context with Javascript

Share text, links, and files to other OS apps with Javascript share API

API

Fallback

Conclusion

Links

4 not so crucial things I didn't know about JavaScript

Just plain scope

There is no else if in JS!

Naming loops and other statements! WHAT?!

There is negative zero!

Do you know the difference between inherit, initial, unset, and.. And revert?

Inherited properties

Non-inherited properties

inherit

initial

unset

revert

all

Super Cool and Super Useless Secret Chrome Feature

Skyrocket your CSS skills with Spaced Repetition

How?

Set up continuous deploy for Free with React, Github, Travis and Heroku

Create React project with Create-React-App

Create Github repo and link it to our app

Connect Github repo with Travis CI

Create Travis config file

Create Heroku project

Map Deployment Method to Github

Link Travis and Heroku

Serve static files on Heroku

Conclusion

5 Canny little tricks for React devs

1. Pretty print your props.

2. Solve multiple HOC around a component?

3. console.log function that uses concise body (body without return statement).

4. Manually restart nodemon

5. Pass HTML character references as props

Bypass AdBlock! (Not a single F*ckAdBlock plugin given)

But how?

What AdBlock is?

What and how it is blocked?

What's AdBlock targeting?

How to find out what AdBlock is catching on my page?

Program for "acceptable ads"

Create issue in easylist to remove rule

Proxy URLs

Hashing CSS classes and attributes

Advertising camouflage

Using SVG instead of text "Advertising"

There is no `else if` in JS!