DEV Community: Omar Benmegdoul

More web dev snippets

Omar Benmegdoul — Fri, 25 Jun 2021 16:33:14 +0000

Last month I posted a JS snippet for verbose logs -- it's easier to debug when the log contains the origin filename, line number, type, and name of whatever you're trying to log. Several classmates found it useful, so here are some others I've gotten good mileage out of.

I improved on the verbose log snippet with these two.

The first is shorter and therefore less likely to take up vertical space on the screen.
The other omits the typeof operator since it's not needed in the majority of cases -- this also lets you log multiple arguments.

 "Labeled log to console": {
        "prefix": "llog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}' <\\${typeof ${2:expression}\\}>`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, type, and value of expression "
    },

Shorter version with no typeof - use with slog then tab:

  "Short log to console": {
        "prefix": "slog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}'`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, and value of expression "
    },

React component (💅)

While working on my final project for Concordia's bootcamp, I found myself needing these.

Here's a React component snippet. It also imports styled-components and adds a <Wrapper> element inside the component -- I needed that, you might not.

    "React component": {
        "prefix": "rreact",
        "body": [
            "import React from 'react';",
            "import styled from 'styled-components';",
            "const ${1:ComponentName} = ({${2:myProps}\\}) => {return (",
      "\t<Wrapper>",
      "\t\t'I'm a placeholder'",
      "\t</Wrapper>",
      ")};",
      "const Wrapper = styled.div``",
            "export default ${1:ComponentName};"
        ]
    },

Flexbox

90% of my flexboxes look like this and I got tired of typing them. flex-direction:column may not be what you need, but since row is the default it's easier to delete that line when you don't need it than to add it when you do. Depending on what you're doing, this might go in your JS or CSS snippets.

"Flexbox boilerplate": {
  "prefix": "fflex",
  "body": [
    "display:flex;",
    "flex-direction:column;",
    "justify-content:center;",
    "align-items:center;"
  ],
  "description": "flexbox to center content"
},

A Verbose Log Snippet for Easier Debugging

Omar Benmegdoul — Sat, 08 May 2021 12:32:19 +0000

Here's a VSCode snippet that populates a console.log call with more information to help you interpret your output. Typing llog then Tab will get you something like:

console.log(`❗ data.js line:78 'reservations' <type: ${typeof reservations}>`,reservations);

Instead of just printing the value of your console.log argument, you get the file name, the line number, the name of the argument, its type, and then its output. There is also a red emoji to mark this as your own note and to easily spot the beginning of the log.

The actual snippet

"Labeled log to console": {
        "prefix": "llog",
        "body": [
            "console.log(`❗ $TM_FILENAME line:$TM_LINE_NUMBER '${2:expression}' <type: \\${typeof ${2:expression}\\}>`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, type, and value of expression "
    },

Here's a shorter version of the same info:

 "Labeled log to console": {
        "prefix": "llog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}' <\\${typeof ${2:expression}\\}>`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, type, and value of expression "
    },

And an even shorter version with no typeof - use with slog then tab:

  "Short log to console": {
        "prefix": "slog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}'`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, and value of expression "
    },

Shoutout to Neophius and alexdima for showing me the escape characters

How to use VSCode snippets

It's easier if I just show you:

Notes

The line number doesn't update if the call moves to another line in the file. It doesn't matter very much in practice.
Maybe you have more than one index.js? Replace TM_FILENAME in the snippet with TM_FILEPATH for the full path to the file.

Learn more about user snippets

Scraping Kijiji: the Idea

Omar Benmegdoul — Sun, 02 May 2021 00:28:40 +0000

I want to create a website to help find apartments in Montreal. Before I do or research anything, I just want to write out what I want it to do and how I think I can do it.

Data

Apartments

The data will come from Kijiji. I've written a Kijiji scraper in Python before, and now that I know more about JS I think I can do it faster. With any luck there's an API out there that I can use instead.

The scraper will periodically check Kijiji for new rental listings in Montreal. It will also scrape all the data for these listings so the end user can filter as narrowly as the data allows (which is more than Kijiji's user interface does).

Time distance

Instead of specifying a radius around a point and showing results to the user around that point, I want to allow them to filter results by time distance: how many minutes of walking, public transit, does it take to get from the apartment to some zip code.

I assume Google Maps has an API that lets you find this out. But unless it's free I probably can't call it for every single listing. I'll probably have to have a table of time distances between every 3-digit zip code and use this as an approximation. It's less than ideal for walking as you can easily walk 20 minutes in a straight line within H2H for instance. I would have to look into more granular options...

User Interface

There are a few things I don't like about Kijiji's interface:

Some listing properties can't be used for filtering (date available if I remember correctly), or the filters are not great
It is littered with duplicate listings and office rentals. A lot of apartment swaps, too, which may not be relevant.
It takes many clicks to get the information you care about. You have to click on listings to read the description, then you have to click on the pictures to see what the place looks like, and you have to click to see a map showing the location of the apartment.

My solution is to:

simply allow filtering using every listing property, with options (e.g. exclude listings if heat/electricity/water would put them above your stated budget)
include toggles to filter out duplicates, office rentals, and apartment swaps. They can be identified easily.
Make listing info visible in the search results. Most descriptions are not long enough to warrant a clickthrough. A table with all properties can be shown. A reasonably large preview image should be shown, with a series of thumbnails that change the src of the preview image on mouseenter so all of them can be seen without clicking through. A Google map of the apartment's location should be shown on mouseover of the address.

Problems:

That might be a lot of requests to make on a single page, leading the significant slowdowns. My hunch? Not as bad as waiting for dozens of different pages to load.
Getting distances might be tough as explained above.

Optional:

Is there a walk score API?

finally {

That about covers it! I'll write about my progress once I start doing research to (in)validate my assumptions.