28. 10. 2020

October 2020

Apps & services

  • Notion - All-in-one workspace - one tool for your whole team. Write, plan, and get organized.
  • BionicReading - With the Bionic Reading© API you can deliver the next level of reading to your audience.
  • There is a new version of Reeder with iCloud sync and more.

From GitHub

  • Nextra - Nextra is a Next.js and Markdown (MDX) based site generator. 0 line of code needed.
  • wp-latte - This mu-plugin gives theme and plugin developers availability to write templates with Nette Latte v2.5.
  • PHP CS Fixer - The PHP Coding Standards Fixer (PHP CS Fixer) tool fixes your code to follow standards; whether you want to follow PHP coding standards as defined in the PSR-1, PSR-2, etc., or other community driven ones like the Symfony one. You can also define your (team's) style through configuration.

Design

  • Cascadia Code Font - This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.
  • FiraCode - Free monospaced font with programming ligatures

IPFS

Exploring IPFS a peer-to-peer hypermedia protocol designed to make the web faster, safer, and more open. IPFS powers the Distributed Web https://ipfs.io/

brew cask install ipfs

Logitech Folio Touch for iPad Air (4tg gen)

Logitech Folio Touch Backlit keyboard case with trackpad for iPad Pro® 11-inch and iPad Air® (4th gen)

Logitech Folio Touch for iPad Air (4th gen)
null

20. 10. 2020

CSS frameworks

Full frameworks

  • Tailwind CSS - a utility-first CSS framework for rapidly building custom designs.
  • Twitter Boostrap - world’s most popular front-end open source toolkit
  • Bulma - Bulma is a free, open source CSS framework based on Flexbox
  • UIKit - Lightweight and modular front-end framework

Minimalist

  • MVP.css - A minimalist stylesheet for HTML elements
  • Picni.css - Lightweight and beautiful CSS library

#css #webdesign

16. 10. 2020

Add a Class to the First Post in The Loop

add_filter(
    'post_class', 
    function ( $classes ) {
        global $wp_query;
        if( 0 == $wp_query->current_post )
            $classes[] = 'first';
        return $classes;
    }
);

#Wordpress #PHP

12. 10. 2020

Awesome Markdown editors

Typora

I am just found the best (for me) Markdown editor on the planet. Why?

  • it's freeware and opensource
  • it's minimalistic and easy to use
  • combine wysiwyg and plaintext editing
  • support folders, front matter, custom styles,
  • allow quick file open ⌘ + ⇧ + O 😍
brew cask install typora

Caret

Caret is a Markdown editor for Mac, Windows and Linux. It stands out with its clean interface, productivity features and obsessive attention to detail. ($29)

brew cask install caret

Notable

Markdown note taking app supports tags, dark theme, zen mode, multi edit and so on

brew cask install notable

MacDown

Open source Markdown editor inspired by Mou, with live preview of extended markdown syntaxes

brew cask install macdown

Visual Studio Code

brew cask install visual-studio-code

#markdown #macOS

6. 10. 2020

HTML Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="author" content="" />

  <!-- OG -->
  <meta property="og:title" content="" />
  <meta property="og:site_name" content="" />
  <meta property="og:description" content="" />
  <meta property="og:image" content="" />
  <meta property="og:url" content="" />

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image:alt" content="image description" />

  <!-- Sitemap & RSS feed -->
  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"/>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

  <!-- Tailwind -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w==" crossorigin="anonymous" />
  <link href="style.css" rel="stylesheet" />

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body class="font-sans text-gray-900 leading-normal tracking-normal grid min-h-screen">
  <header></header>
  <main class="grid items-center"></main>
  <footer></footer>
  <script src="app.js" async></script>
</body>
</html>

With:

#HTML #Snippets

2. 10. 2020

Yarn tips and tricks

Chose Yarn version

Let’s find out your current Yarn version with yarn --version. If your local Yarn version is 1.22 and above go ahead and type-in:

yarn set version berry

This should fetch Yarn 2 and show you an output as follows:

Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into /Volumes/Work/web/.yarn/releases/yarn-berry.cjs...
Updating /Volumes/Work/web/.yarnrc.yml...
Done!

You can downgrade back with follow:

yarn set version 1.22.5

Upgrade all npm packages interactively

This is similar to npm-check interactive update mode. It provides an easy way to update outdated packages

yarn upgrade-interactive --latest

Will looks like follow:

[1/? Choose which packages to update. (Press <space> to select, <a> to toggle all, <i> to inverse selection)

 devDependencies
❯◯ autoprefixer      6.7.7  ❯  7.0.0          https://github.com/postcss/autoprefixer#readme
 ◯ webpack           2.4.1  ❯  2.5.1          https://github.com/webpack/webpack

 dependencies
 ◯ bull              2.2.6  ❯  3.0.0-alpha.3  https://github.com/OptimalBits/bull#readme
 ◯ fs-extra          3.0.0  ❯  3.0.1          https://github.com/jprichardson/node-fs-extra
 ◯ socket.io         1.7.3  ❯  1.7.4          https://github.com/socketio/socket.io#readme
 ◯ socket.io-client  1.7.3  ❯  1.7.4          https://github.com/Automattic/socket.io-client#readme

Offline package mirrors

Yarn can maintain offline copies of your packages for more repeatable and reliable build. Create .yarnrc file with follow content:

yarn-offline-mirror "./.npm"
yarn-offline-mirror-pruning true
--install.prefer-offline true
--install.dev true

All npm packages will be saved to .npm folder locally.

#yarn #npm #javascript

29. 9. 2020

Responsive Typography

h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}

p {
  font-size: calc(1em * var(--text-multiplier, 1));
}

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}

#css #webdesign #typography

24. 9. 2020

Fetch in pure Node.js

There are a lot of popular Node.js modules for requestiong data with HTTP or HTTPS (e.g. axios, got, node-fetch), but you don't need them! You can easily made HTTP/HTTPS requests in Node.js with http.get or https.get:

import https from "https";

module.exports = (params, postData) => new Promise((resolve, reject) => {
    const req = https.request(params, (res) => {

        // reject on bad status
        if (res.statusCode < 200 || res.statusCode >= 300) {
            return reject(new Error('statusCode=' + res.statusCode));
        }

        // read data
        let body = [];
        res.on('data', chunk => {
            body.push(chunk);
        });

        res.on('end', () => {
            try {
                body = Buffer.concat(body).toString();
            } catch (e) {
                reject(e);
            }

            resolve(body); // submit data
        });
    });

    req.on('error', (err) => {
        reject(err);
    });

    if (postData) {
        req.write(postData);
    }

    req.end(); // close request
});

Then just call this:

import fetch from './fetch'

(async () => {
  const content = await fetch('https://example.com');
  console.log(content);
})();

Happy nodescripting!

#javascript #nodejs