teleren/devto huggingface dataset:
Project to Index & Search WebFont Icons
Tags: showdev, aws, html, javascript
Published: 2020-10-27 21:56:49

I've made an interesting little project (hosted on a <a href="http://ii.aitchisonsoft.co.uk/">subdomain of my personal website</a>). The concept of it is that it's a search engine for icons from web icon packs. 

The indexing is done by running utilities/filterIconPack.py which parses the icon pack's CSS (metadata + links to the CSS are stored in utilities/iconPacks.json) into JSON. 

The frontend is a static site in S3, which makes API calls to a simple AWS lambda + API Gateway backend. The backend searches the icon data JSON file which fuse.js and returns the results.

It hasn't turned out as useful as I had hoped, since the way it's designed excludes many icon packs and I've failed to find a way of automatically collecting pack metadata. However, it's still a passably interesting project, so I decided to share.
Complex auth - the biggest issue: cache invalidation
Tags: kotlin, cache, invalidation, caching
Published: 2020-10-27 21:47:53

For [Localazy](https://localazy.com), we want to introduce a complex solution for managing organizations and teams. 

It changes the current simple user-project relation to one of:

- **user-project** - it's still allowed as it's the most common case
- **user-organization-project** - where both user-organization and project-organization is the N:M relation
- **user-organization-team-project** - where user-organization is N:M, user-team is N:M, and project organization is N:M

And all these relations have to be calculated to find the final relation between the user and the project to authorize her to access the service.

Of course, the user authorization has to be processed for every single request and so the only solution is to heavily cache it. It's actually not a big issue to find the final relation and to cache it. 

**The challenge is to invalidate the cache correctly when any of those N:M relations change.** Of course, we don't want to invalidate the cache fully for all touched entities; only what is really necessary. 

You have to plan for the invalidation with the same care as for caching from the beginning if you want to do it right! The one of the typical problems is the invalidation of removed relations. Of course, I would expect the soft delete to be in place, but you don't want to go through all soft-deleted items nor you want to store this information, so you can't just have the `invalidate()` method, you have to pass also information about the operation that led to the invalidation. 

And a small tip: Be sure that your cache invalidation works well before running integration/e2e tests :-).

---

Btw, if you are looking for a way how to localize your web/desktop/mobile app to more languages for free, give [Localazy](https://localazy.com) a try and ping me for goodies.
Deploying a website with Netlify
Tags: html, css, javascript, opensource
Published: 2020-10-27 21:40:00

---
title: Deploying a website with Netlify
published: true
description: You have built a static website or a statically generated website. Maybe you've built a new Gatsby site or you have built a static site. Now the question is: Where do you host it?
tags: HTML,css,javascript,opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9mc67mfw372zp6szuir8.jpg
---

{% youtube gLPRck2mkE8 %}

You have built a static website or a statically generated website. Maybe you've built a new Gatsby site or you have built a static site like we did in our last post: [https://koalatea.io/building-a-website-with-parcel](https://koalatea.io/building-a-website-with-parcel)

Now the question is: Where do you host it? Luckily today we'll give an overview of the steps needed to host your website with Netlify.

## Why Netlify?

Netlify is an all-in-one platform for running web projects. This means you can use Netlify for hosting most if not all your web projects. Netlify is simple to use and setup which works perfectly when you have a basic website you want to get up and open for the world to use quickly.

## The 6 simple steps

Setting things up is mostly signing up for accounts so I'll just lay out all of the steps here. We also go over each step in our video.

1. Have your static or statically generated website. A static site, statically generated blog with something like Gatsby, or even a Jamstack site (but this requires a little more setup).
2. Push your code to GitHub, Bitbucket, or GitLab
3. Create a Netlify Account. [Go signup](https://app.netlify.com/signup) and signup with the hosting provider of your code.
4. In your "Overview" page select `New site from Git`
5. Select the repo you want to deploy. Then you'll need to enter the build command and the folder for Netlify to distribute. Something like `parcel build index.html` and `dist` if you are deploying a static site with Parcel
6. Wait for your app to deploy! Netlify will now start building and deploying your website. In a few minutes, Netlify will give you a URL to view your website and your website will be deployed.

## That's it!

Your site should now be deployed with Netlify and ready for the world to see. You can start sharing your site with the domain Netlify gives you, or Netlify also allows you to set your custom domain. That will be a post for another time since it is different for every domain provider.

Thanks for reading/watching!
Day 243: It's Tricky
Tags: hiphop, code, coding, lifelongdev
Published: 2020-10-27 21:33:42

_liner notes_:
- Professional : Had a couple of meetings. Basically spent time planning out a demo app I' building for my next blog post.

- Personal : Was looking at my bank accounts and noticed that one has higher than the previous month. It's weird because this account is only to pay off a balance transfer so I could get 0% interest for like a year. So there's no way that the balance would go up! I look at the charge and there is an almost $200 purchase on what looks like makeup (I had to look up the name on the charge). I quickly called the bank to file a fraud claim. What's weird is that I don't even use the card. I just log in every month to pay on the balance. I've never used the card. I don't even carry the card on me. The fraud department said they are going to cancel the card and send me a new one. Pretty angry! I was about to pay this thing off and this happened. It's pretty clear that every other transaction was a payment, except this one that it's fraudulent. Everything has been smooth so far.

![A view from the shore of a lake in Two Jack Lake, AB, Canada with pine trees surrounding and a mountain in the distance.](https://dev-to-uploads.s3.amazonaws.com/i/dlh1k1owycp9k3k58xm7.png)

Going to do some coding. Finally filled out my mail in ballot last night. Really had to do some research on some of the amendments. The way they are worded is strange. It's tricky! It's almost like they don't want voters to understand what they are voting on. I'll be dropping it off tomorrow morning after my early meeting. Going to try and get the recording of the last show to the station tonight as well.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube l-O5IHVhWj0 %}
Updating My O(1) Reloading Post for Snowpack 2.15.1, npm 7 and Create React App 4.0.0
Tags: update, snowpack, react, cra
Published: 2020-10-27 21:11:03

---
title: Updating My O(1) Reloading Post for Snowpack 2.15.1, npm 7 and Create React App 4.0.0
description: A message on an update to my Snowpack with Create React App post.
published: true
tags: update,snowpack,react,cra
---

I had a couple of requests the other night (including from the creator!) to update my Snowpack with Create React App post to use both the latest version of Snowpack and Create React App.

{% twitter 1320745141833879552 %}

{% twitter 1320750070015418369 %}

Check out the updated post!

{% post https://dev.to/okeeffed/o-1-reloading-with-create-react-app-1104 %}

The final project can be found on my [GitHub](https://github.com/okeeffed/cra-4-snowpack)
A collection of projects made with nuxtjs
Tags: nuxt, vue
Published: 2020-10-27 21:11:00

Hi,
I'm Guillaume and I use nuxt everyday.
In order to share inspiration with other nuxt dev, I'have created BuiltWithNuxt, a nuxt projects showcase.

https://builtwithnuxt.com

If you want to share yours for free, go here https://builtwithnuxt.com/submit
React Workshop - free online workshop by SCS Concordia
Tags: react, beginners, workshop, ui
Published: 2020-10-27 21:08:22

---
title: React Workshop - free online workshop by SCS Concordia
published: true
description: SCS presents a NODE.JS workshop in collaboration with Autodesk!
tags: #react, #beginners, #workshop, #ui
cover_image: https://scontent.fymq3-1.fna.fbcdn.net/v/t1.0-9/121166116_3314841555264666_3796737968829975468_o.jpg?_nc_cat=101&ccb=2&_nc_sid=b386c4&_nc_ohc=dzuwmGZXwSMAX8bCjrk&_nc_ht=scontent.fymq3-1.fna&oh=4d77dbec10067bb6b1a9bb9c7a478a9e&oe=5FBD669A
---

Join us next week for a React workshop by SCS Concordia (Montreal) in collaboration with Autodesk!

This workshop will cover concepts, examples, and exercises to help you build the UI for your next project. React is a frontend Javascript library that allows you to build interactive UIs.

### Registration: Workshop happening at November 5 (Thursday) 17:30 EST

> Sign up through Facebook events: 
https://www.facebook.com/events/1818957074910385


> or sign up directly through this Google Form:
https://forms.gle/pU4gcKTLugaXaTmb8 


### Topics

Talk topics include but are not limited to:

✅ What **React** is and what you can do with it
✅ Modern Javascript (**ES6**) syntax and tricks
✅ Writing **JSX** and rendering elements to HTML
✅ Building **components**, composition and splitting
✅ Displaying **lists** of item objects using components
✅ Understanding React data flow with **props** and **state**
✅ Using **Hooks** in function components
✅ Adding interactivity with HTML **inputs**, **forms** and **event-handling**
✅ **Fetching** data from public **API**s
✅ Building a **project** while thinking in React

### Preview

![react workshop preview 1](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/2.png)

![react workshop preview 2](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/2b.png)

![react workshop preview 3](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/3.png)

![react workshop preview 4](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/4.png)

![react workshop preview 5](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/5.png)

![react workshop preview 6](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/6.png)

![react workshop preview 7](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/7.png)

![react workshop preview 8](https://res.cloudinary.com/dvfhgkkpe/image/upload/v1603799558/react_workshop_slides/8.png)


This is an online event that will be conducted live on **YouTube**. The link will be provided prior to the event, so make sure you **subscribe**!

https://www.youtube.com/channel/UCvLvkP20J4GGKLEG0nnzvzg


See you there! 🤓 
👩‍💻 👨‍💻
How to talk to micromanager
Tags: career, productivity, beginners
Published: 2020-10-28 08:34:56

---
title: How to talk to micromanager
published: true
date: 2020-10-27 20:28:12 UTC
tags: career,productivity,beginners
canonical_url: https://www.notonlycode.org/how-to-talk-to-micromanager/
cover_image: https://www.notonlycode.org/content/images/2020/10/micromanagers2-thumbnail.jpg
---

This video is a 2nd part about dealing with micromanaging boss - in previous episodes I explained what are common symptoms of micromanagers and why people become micromanagers. This week I'm talking about different ways to talk to micromanager in order to get more independence and more decision making power at work. This is part fo my Things Developers Hate series. Enjoy!

{% youtube vKm7RKE2Rls %}

🎥 Video timeline:  
[0:00](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=0s) Intro  
 [0:37](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=37s) 3 types of micromanagers  
 [1:25](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=85s) The only 2 sure ways  
 [2:10](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=130s) Make preparations  
 [3:45](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=225s) Talk to your boss!  
 [4:55](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=295s) Build the trust  
 [6:38](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=398s) Talk to your N+2  
 [7:55](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=475s) Sometimes you will still fail  
 [8:58](https://www.youtube.com/watch?v=vKm7RKE2Rls&t=538s) Share your story!
Going from Windows (Lenovo 14") to MacBook Pro 13"
Tags: discuss, productivity, watercooler
Published: 2020-10-27 20:06:19

As the title says I just got this new Macbook Pro 13 2020. It's the first time I've ever owned a Macbook personally. It definitely is going to take some getting used to because it is significantly smaller than my old laptop.

I'm starting to second guess this purchase because it feels weird to use right now and the screen is a lot smaller. But I think with time I'll probably get used to it. Only thing is that I paid quite some money for this (about $2,100) so I guess my expectations were really high. But I do like like a lot of the features tho, especially that now I'm completely in the Apple ecosystem and all my devices just sync seamlessly. And also Mac OS has the terminal.

But what are you guys thoughts? Has anyone experienced something similar? Do you own a MBP 13"? Please share your experiences. Thanks!
Heroku: deploy with an existing git repo
Tags: heroku, django
Published: 2020-10-27 19:55:58

This is my first time using Heroku. Most tutorials I found on the internet deploy their app while creating a new git repository. However, I already have an existing git repository. After trial and error, I realize the [documentation](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) is brief and clear all the time but I wasn't able to understand at first. :anguished:

---
With an existing git repository currently working on `origin develop` branch, in order not to let heroku settings affect `develop` branch, there is NO need to create a new origin branch then push it there. (<-- it wouldn't affect at all...a silly thing I did at first)

### Required packages (pip install)
```
gunicorn
whitenoise
django-heroku
psycopg2 # not sure if preinstalled from prior
```

### Django settings for Heroku
- create `Procfile`
 - do not add extension after file name!
 - most tutorials write `web: gunicorn mysite.wsgi` in Procfile, use `web: gunicorn --pythonpath mysite mysite.wsgi` instead. (<-- repository location reseaon)
- create `requirements.txt`
 - `pip freeze > requirements.txt` 
 - in order for heroku to detect python buildpack
- modify `settings.py`
 - add `import django_heroku` on the top of the file
 - add `django_heroku.settings(locals())` in the file

It's important to notice the working directory. Normally, the django `mysite` project folder will also be the github repository folder. But I have my github folder outside `mysite` project folder.

Below is how I locate my required files.
```
# my local github repository folder
.
├── Procfile
├── README.md
├── data
├── mysite
│   ├── mysite
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── prediction
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── models.py
│   │   └── views
│   ├── static
└── requirements.txt
```

### 1. Create a Heroku account
[Install](https://devcenter.heroku.com/articles/heroku-cli) **Heroku CLI** in order to use `heroku` command in the command line.

### 2. Create an app
Under the working directory (for my case, my local repository), run:
```
heroku create <app_name>
```
Heroku generates a random name if `<app_name>` left blank.
Or create an app from the website > dashboard > create an app.
(Most settings can actually be done from the website as well.)

### 3. Create a Heroku remote
```
heroku git:remote -a <app_name>

# to check if remote is added
git remote -v
```
### 4. Deploy the app
```
# either one is fine
git push heroku master
git push heroku main
```
Note that the local branch name can only be `master` or `main`. If the local branch is neither, run `git push heroku <local_branch_name>:master`

### 5. Visit the app
```
heroku open

#if required login
heroku login
```
Explore the Canvas
Tags: canvas, zimjs, zim, amazing
Published: 2020-10-27 19:54:10

We have a video series called [ZIM Explore on YouTube](https://www.youtube.com/watch?v=KHmxhFFSsxk&list=PLCIzupgRt1paK03izl-jTAaUhVzQZxoNM).  These are longer videos that go through code to make a variety of fun things on the Canvas.  Here are some titles (sorry they are not links - we will let you explore the explore playlist to find them - just [click&nbsp;here](https://www.youtube.com/watch?v=KHmxhFFSsxk&list=PLCIzupgRt1paK03izl-jTAaUhVzQZxoNM)):

- ZIM Explore! 01. Shapes
- ZIM Explore! 02. Tiles
- ZIM Explore! 03. Light show!
- ZIM Explore! 04. Sockets!
- ZIM Explore! 05. Components
- ZIM Explore! 06. Canvases
- ZIM Explore! 07. Dashes
- ZIM Explore! 08. SVG
- ZIM Explore! 09. Bitmap Fonts
- ZIM Explore! 10. Squiggle
- ZIM Explore! 11. Distill
- ZIM Explore! 12. Wiggly Line
- ZIM Explore! 13. Isometric
- ZIM Explore! 14. CodePen
- ZIM Explore: 15. Data - LocalStorage, Async Database
- ZIM Explore! 16. Pen Holiday Card 
- ZIM Explore 17. ES6 JavaScript 6 
- ZIM Explore 18 - CodePen
- ZIM Explore! 19. Animate 
- ZIM Explore! 20. Golden - DUO 
- ZIM Explore! 21. Golden - PICK 
- ZIM Explore! 22. Golden - ZIMON 
- ZIM Explore! 23. Golden - DISTILL
- ZIM Explore! 24-1 SoundScape 
- ZIM Explore! 24-2 SoundScape 
- ZIM Explore! 24-3 SoundScape 
- ZIM Explore! 25. Kids App!
- ZIM Explore! 26. Shooting Game (1) 
- ZIM Explore! 27. Shooting Game (2) 
- ZIM Explore! 28. Exercise App 
- ZIM Explore! 29. Grava - Multiuser App
- ZIM Explore! 30. Grava (2) - Multiuser App
- ZIM Explore! 31. Cut and Paste Images
- ZIM Explore! 32. ThreeJS (3D) in ZIM
- ZIM Explore! 33. Isometric Game of Life in ZIM
- ZIM Explore! 34. Matching Game in ZIM
- ZIM Explore! 35. Sprites in CodePen
- ZIM Explore! 36. Custom Classes
- ZIM Explore! 37. Custom Classes 2
- ZIM Explore! 38. Stars!!
- ZIM Explore! 39. Registration Point
- ZIM Explore! 40. ZIM Synth
- ZIM Explore! 41. Comparing Flutter to ZIM (at 26%)
- ZIM Explore! 42. ZIM QUIZ to APP
- ZIM Explore! 43. ZIM Interval
- ZIM Explore! 44. Adobe Animate Vectors
- ZIM Explore! 45. Generator!
- ZIM Explore! 46A. Monster!
- ZIM Explore! 47. Lines! 

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
Uncovering critical data access using AppMaps
Tags: rails, java, security, showdev
Published: 2020-10-27 19:45:03

As part of a recent hackathon project, I pulled together some data insights from [AppMap data](https://appland.org).

For those unfamiliar, the AppMap framework is a suite of tools that allows developers to record runtime data from their applications. An AppMap client, essentially an agent, is responsible for capturing this data from a live application. It emits a file containing the recorded execution flow, data snapshots, high level process I/O (think HTTP, SQL queries, etc.) and some application metadata. I figured it would be an interesting experiment to identify different types of data accessed and label their usage.

Here's what I came up with in two days: [The AppMap data inspector](https://appmap-data-inspector.netlify.app/?url=https%3A%2F%2Fapp.land%2Fapi%2Fscenarios%2Ffbc57147-b947-4423-bd60-ef0d3369726d). The demo link contains some example data so there's no need to come up with your own.

This proof of concept makes some attempt at identifying the following:
- Sensitive values such as passwords, auth tokens
- Encrypted values such as password hashes
- Unencrypted values which _should be_ encrypted
- Data persisted within a database
- Data provided by a user, such as an HTTP request parameter
- Personally identifiable information: SSNs, emails, IP addresses (this may not count as PII, but I left it in for the proof of concept)
- Data logged to `stdout`

A single object can have multiple labels. PII in your application logs? Uh oh! Sensitive data persisting in your database unencrypted? Whoops! References to unencrypted passwords all over the place? Might be a code smell... 

I see a ton of potential improvements for this project, but I'm inclined to let it live on as a proof of concept for now. 

If you have some ideas of your own, I'd love to hear them in the comments below!

Thanks for reading!
Java dependency viewer with maven and fzf
Tags: java, dependencies, fzf, maven
Published: 2020-10-27 19:41:23

---
title: Java dependency viewer with maven and fzf
published: true
tags: java, dependencies, fzf, maven
---

Sometimes it is necessary to take a look in the dependencies and there classes and methods. Every good IDE has this on board, and you can easily scroll and search for the libs and the classes. But sometimes you may want to take a fast look and don't want to boot your favourite IDE, or you like to self-mortification and you are using Vim. 

As [coc-vim](https://github.com/neoclide/coc.nvim) does a good job to bring the language server support to Vim some of the convenience are sometimes missing. One of this is the mentioned dependency overview. For this case, I wrote a small script:

```bash
#!/bin/bash

# generate dependency list if not exists
if [ ! -f .dependencies ]; then
    echo "Generate dependency list"
    mvn dependency:list -DoutputFile=./.dependencies
fi

# check the last modified, if pom is younger the dependency list will be updated
if [ .dependencies -ot pom.xml  ]
then
    mvn dependency:list -DoutputFile=./.dependencies
fi
# open selection list for the dependencies
dependencies=$(cat ./.dependencies|fzf)

packagePath=$(echo $dependencies | cut -d':' -f1 | sed -e 's/\./\//g')
packageName=$(echo $dependencies | cut -d':' -f2)
version=$(echo $dependencies | cut -d':' -f4)

path=$packagePath/$packageName/$version
jar=$packageName-$version.jar

# open selection list for the containing class of the package
classFile=$(jar tf /home/maren/.m2/repository/$path/$jar | grep class | fzf )

# shows the public methods of the classes.
output=$(javap  jar:file:///home/maren/.m2/repository/$path/$jar!/$classFile)
# like cat but on steroids. 
bat --line-range 2:9999 -l Java <<<  $output

```

Here is a small demo:
![Dependencie viewer](https://dev-to-uploads.s3.amazonaws.com/i/gj008y9m53h3c5zmswet.gif)