raulingg

advanced sidebar menu (multi level - unlimited navigation)

multi level and unlimited advanced sidebar navigation

A Pen by Raul Quispe on CodePen.

License.

raulingg

Hacker News Job Board

Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.

Requirements

• The page should show 6 jobs on initial load with a button to load more postings.

raulingg

// Example: https://codepen.io/marcelo-ribeiro/pen/OJmVOyW

const accentsMap = new Map([
  ["A", "Á|À|Ã|Â|Ä"],
  ["a", "á|à|ã|â|ä"],
  ["E", "É|È|Ê|Ë"],
  ["e", "é|è|ê|ë"],
  ["I", "Í|Ì|Î|Ï"],
  ["i", "í|ì|î|ï"],
  ["O", "Ó|Ò|Ô|Õ|Ö"],

raulingg

{
  "categories": [
    {
      "name": "Movies",
      "videos": [
        {
          "description": "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
          "sources": [
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          ],

raulingg

// Load the necessary modules and define a port
const app = require('express')();
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;

// Take in the request & filepath, stream the file to the filePath
const uploadFile = (req, filePath) => {
 return new Promise((resolve, reject) => {
  const stream = fs.createWriteStream(filePath);

raulingg

Tabs and Windows

Function	Shortcut
New Tab	⌘ + T
Close Tab or Window	⌘ + W (same as many mac apps)
Go to Tab	⌘ + Number Key (ie: ⌘2 is 2nd tab)
Go to Split Pane by Direction	⌘ + Option + Arrow Key
Cycle iTerm Windows	⌘ + backtick (true of all mac apps and works with desktops/mission control)

raulingg

# Run this in the project repo from the command-line
# http://stackoverflow.com/a/4593065/99923

git log --shortstat --author "Xeoncross" --since "2 weeks ago" --until "1 week ago" | grep "files changed" | awk '{files+=$1; inserted+=$4; deleted+=$6} END {print "files changed", files, "lines inserted:", inserted, "lines deleted:", deleted}'

raulingg

{
  "root": true, // Make sure eslint picks up the config at the root of the directory
  "parserOptions": {
    "ecmaVersion": 2020, // Use the latest ecmascript standard
    "sourceType": "module", // Allows using import/export statements
    "ecmaFeatures": {
      "jsx": true // Enable JSX since we're using React
    }
  },
  "settings": {

raulingg

(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)

Feature flags

This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).

So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.

Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -

raulingg

<script>
  ijQuery(document).ready(function() {
    $('.page-block')
      .first()
      .addClass('stickyheader')
    var firstSection = $('.stickyheader').height()
    $('body').css('margin-top', firstSection)
  })
</script>