teleren/devto huggingface dataset:
Introduction to Bem (Block Element Modifier)
Tags: css, bem, webdesign
Published: 2020-05-23 01:02:42

---
title: Introduction to Bem (Block Element Modifier)
published: true
date: 2020-05-23 01:02:42 UTC
tags: css, BEM, webdesign,
canonical_url: https://www.ma-no.org/en/web-design/css/bem-block-element-modifier
---

I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving what I thought would be beautiful yet simple style to my HTML code. But suddenly I ended up with class names such as “blue” “bigger” “text_normal”. “text_normal2” and similar. I stumbled directly into this CSS pitfall, which seems to be caused by a lack of structure and rules to follow when writing CSS. This kind of code is dangerous and hard to maintain because you might forget what class name does what and to which HTML element it can be applied, and so on. Chaos reigns.

So what possible solutions to this problem are there? You could come up with your own “home-made” CSS-naming set of rules to keep your code manageable but this would mean only you would be able to read the code fast and your team members would have to try and decipher your rule set. Not to say if everyone in the team made up their own CSS naming convention. Why not try an option that has been around some time know and therefor is tried and tested?

[Read all](https://www.ma-no.org/en/web-design/css/bem-block-element-modifier)
I'm live, answering questions relating to Software Development
Tags: career, video, live
Published: 2020-05-23 01:01:19

{% youtube tfetUnNOlmA %}

I'm live right now for an hour answering questions from when I was a software dev for almost 4 years. Drop on by and hang out, asks a few questions if you have some.

Was gonna work on scripts but one of our cats destroyed my hands so they're hard to use at the moment.
COVID-19 Literature Clustering
Tags: octograd2020
Published: 2020-05-23 00:32:36

## My Final Project
A novel approach to document exploration using Machine Learning. Let's cluster similar research articles together to make it easier for health professionals to find relevant research articles, and respond to rapidly spreading COVID-19 promptly.

## Demo Link
 https://maksimekin.github.io/COVID19-Literature-Clustering/plots/t-sne_covid-19_interactive.html

## Link to Code
{% github https://github.com/MaksimEkin/COVID19-Literature-Clustering %}


## How I built it
- Parse the text from the body of each document using Natural Language Processing (NLP).
- Turn each document instance di into a feature vector Xi using Term Frequency–inverse Document Frequency (TF-IDF).
- Apply Dimensionality Reduction to each feature vector Xi using t-Distributed Stochastic Neighbor Embedding (t-SNE) to cluster similar research articles in the two-dimensional plane X embedding Y1.
- Use Principal Component Analysis (PCA) to project down the dimensions of X to a number of dimensions that will keep .95 variance while removing noise and outliers in embedding Y2.
- Apply k-means clustering on Y2, where k is 20, to label each cluster on Y1.
- Apply Topic Modeling on X using Latent Dirichlet Allocation (LDA) to discover keywords from each cluster.
- Investigate the clusters visually on the plot, zooming down to specific articles as needed, and via classification using Stochastic Gradient Descent (SGD).

## Additional Thoughts / Feelings / Stories
You can see the analysis Jupyter Notebook here: https://maksimekin.github.io/COVID19-Literature-Clustering/COVID19_literature_clustering.html

The news video that featured the project can be found here: https://www.youtube.com/watch?v=vyOrM8zC_Iw
hey codenewbie, don't expose api keys
Tags: codenewbie, octograd2020
Published: 2020-05-23 00:30:25

When I first experimented with and implemented SendGrid email I left my api key hard coded in my app and pushed it to github. I tested an email, it worked, and I forgot about it. I received an email sometime later about an api key but I ignored it and moved on with whatever I was doing, probably pottery or eating multiple snacks. Sometime later I was working on an app and decided to implement SendGrid email into it, remembering how simple and effective it was. At that time I experienced lengthy pain and confusion in struggling with what I was missing or confused about, as well as figuring out how to become mosquito-proof. I kept seeing a status code 202, "The request has been accepted for processing, but the processing has not been completed".  I went deep exploring dusty google hits on how to implement SendGrid. I procured strange headers from bootleg and unknown developers all over the web to try sending along with my request. Eventually I recalled some email about an api key and dug it up to take a look. #codenewbie. My SendGrid was disabled until I resolved the exposed api key. 

Shoutout to Poul from SendGrid! For reactivating me after resetting everything and implementing .env and .gitignore, then disabling me again after I failed to first remove my already pushed .env that hadn't been ignored yet before pushing with a new key. Then reactivating me again later!
New MacBook Pro Dev Setup
Tags: codenewbie, computerscience, macbook
Published: 2020-05-23 00:00:14

A quick run down of everything I did to get my dev environment up and running on my new 2020 MacBook Pro...

## First Things First... 
Before I did anything with my new laptop, I first made sure to backup anything I wanted to save from my old laptop (a late 2014 MacBook Air). This included making a copy of the `settings.json` in VSCode, checking for and special settings in the `.bashrc` and `.zshrc` files, and backing up all of my documents. 

## Next Things Next...
The **first** thing I do with any new computer is go through the setup process and then check for software updates. Then I download any software that I know I'll need. 

### For this setup this included: 
- VSCode 
- Firefox
- Chrome
- Affinity Designer
- Postgres
- Discord
- Slack
- Zoom
- Streamlabs OBS
- Spotify 
- iTerm2 (with OhMyZsh) 

Then I went into iTerm2 and setup a new custom profile, as well as making customizations to my OhMyZsh settings. 

After I had my terminal setup, I went into VSCode and replaced the contents of the `settings.json` with the saved copy from my old laptop. 

##Last Things Last.
The last thing I do to make sure I have everything I need is to go through and make sure I install all of the CLI programs I'll need for my development process. With this computer that meant updating XCode, updating Node and Ruby, and then installing Homebrew, NPM, React, Gatsby, and Rails. 

I also made sure that when I was backing up my previous laptop, I made a list of all of the extensions I had in my previous install of VSCode. Re-installing those on my new machine is the last step of the process. 

### My Favorite VSCode Extensions: 
- Dracula Official (theme)
- Panda (theme)
- Prettier
- ESLint
- Bracket Pair Colorizer 
- Code Spell Checker
- Live Server
- JS JSX Snippets
- Material Icon Theme
- Ruby / VSCode Ruby
- WakaTime 


Let me know how similar or different this is from your process of setting up a new machine! This is the basic "must have" list and doesn't include the fun stuff like choosing a new wallpaper or making sure I have [my favorite screensaver](www.fliqlo.com) installed. 

xx Pixi / Emily
Custom Domain For Github Pages
Tags: programming
Published: 2020-05-31 21:27:49

---
title: Custom Domain For Github Pages
published: true
date: 2020-05-23 00:00:00 UTC
tags: Programming
canonical_url: https://programmerdays.com/2020/05/23/Custom.Domain.For.Github.Pages/
---

I recently set up [github pages to use as my blogging platform](2020-04-12-Blogging.With.Github.Pages). And I have had no major complaints so far. I already added lots of bells and whistles: commenting, analytics, rss feed etc… Today, I’ve set up custom domain for my github pages.

I already had a domain with Google Domains, so I just had to point it to my github pages site. To get it working, I followed this [medium post](https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a) and the [documentation from github](https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site). Now that it’s all done, going to any of these urls, [programmerdays.com](programmerdays.com), [wwww.programmerdays.com](wwww.programmerdays.com), [dannyhan12.github.io](dannyhan12.github.io) should all take you to “programmerdays.com” which shows my github pages site.

The process involves just 3 steps, but I found it a little confusing at first. Here’s some notes that explains what is going on.

## Step 1

First, update Google Domains or your DNS provider to send your apex domain, such as `"<my-awesome-custom-domain>.com"` to the IP addresses owned by github. This is pretty straightforward. You need to tell the "internet" where to find the server that will process your requests.

## Step 2

Next, update the settings of your github project to use your custom domain. Now, when Github servers get requests for `“my-awesome-custom-domain>.com"`, they'll be able to properly map it to your github pages, `"<username>.github.io"`. Conversely, if you make a request to the original github pages, the url is auto-magically updated to your custom domain.

I used this curl command to review requests

```
curl -v -L -D - https://programmerdays.com -o /dev/null 2>&1 | egrep '>|<|\*' | less , 

```

and I could see that the request is sent to one of the github IP addresses and that it immediately returns with a successful code, 200. If I run the same curl command with the url of my github pages, `“<username>.github.io"`, I get a 301 redirect rcode. Then another request is sent to my custom domain.

## Step 3

Finally, update Google Domains again. Add a CNAME for the subdomain, “www”, to your `"<username>.github.io."` page. Now, requests going to “www.`<my-awesome-custom-domain>`.com" will also get your github pages page. The github docs mention that the proper redirects work between a subdomain and an apex domain.

## Conclusion

Setting up a custom domain was pretty straightforward. I got it working without too much trouble, or even understanding. I then took a little time to learn about DNS records and HTTP redirects. Getting something working and learning something is a nice double win for me.
Fool proof women only verification for a platform, how would you solve this?
Tags: discuss, webdev
Published: 2020-05-22 23:55:10

---
title: Fool proof women only verification for a platform, how would you solve this?
published: true
description: 
tags: #discuss, #webdev
---

Me and my friend have been discussing recently on how to build a "women only" platform & I was wondering if this can be solved with tech, it should be cheap, does not compromise identity(other than gender), fast and feasible.

Why? - A friend was looking for a flat along with a roommate on a very popular facebook group in India called Flats & flatmates, but around 85% on the posts were from brokers, and some of these posts looked very shady. She had to hand out her phone number or call the broker in order to contact the person regarding the flat. 

She was very hesitant to give out her number and I understand as we Indians practically invented "bobs & vagene". Plus, she said we as developers should have solved this by now.

So we were thinking of ways someone could prevent this.

1. Do a realtime verification by going and meeting the person. 
Drawback - Too expensive in terms of time, resources & money. Might work for large corporations. Your address is exposed here too.

2. Do a ID/Aadhaar verification, the Indian Social Security Network counterpart. 
Drawback - Most people will not just use their ID to verify for a website/app especially if it's new & Adhaar is already so controversial due to it's security loopholes.

3. An "invitation only" system where current users can invite other women. 
Drawback - Difficult to scale quickly, but seems the most sensible way.

How would you solve something like this?
Day 3: Responsive Design
Tags: codenewbie, codequality
Published: 2020-05-22 23:51:20

Today was a pretty simple day as far as coding goes. 

I had to find some extra time to code since I am traveling tomorrow and I wanted to be 100% prepared to do so safely during such times. 

I still managed to complete two of the Responsive Web Design challenges and intend on completing two more by the end of the night. 

I got some good practice today with flex-box and functional nav bars. I might intentionally do some extra practice with flex-box and grid design to ensure that these important styling skills are really solid until I can build a fairly simple front-end in ten minutes or even less than that. Once I can do that, I will feel more comfortable moving forward onto the main course of any new developer, JavaScript.

I am excited to move onto this important skill, but I am forcing myself to have patience and to really focus down on my necessary skills.
React Hooks: useEffect()
Tags: react
Published: 2020-05-22 23:46:58

In my last post, I covered useState() and its usefulness in a functional component. In the same vein of imitating class component functionality, we have useEffect() to perform side effects in function components. In class components, we put side effects in componentDidMount and componentDidUpdate. 

Here is a short example of useEffect():

```js
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}
```

In useEffect() you have three parts: code that runs when useEffect() is called(which is on every render), the cleanup effect(runs when the component unmounts), and a parameter that you can pass into useEffect() which tells that useEffect() function to run only when that parameter changes. So if I put in a state variable, the effect may run when that variable changes. But if that component re-renders with the same value, it will not fire the effect. 

In the example above, the effect will fire every time the component is re-rendered. However, if we placed the count as a second parameter and on a re-render it hadn't changed, the effect will not fire. The current example makes more sense since this is probably something you want to display at all times this component is mounted. You can even have multiple useEffect functions with these second parameters and separate your tasks based on what is being changed on a re-render.

Here's another example: 

```js
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);
```
This is the useEffect with a second parameter placed in it. This will only fire if count changes. 

Lastly, using the effect cleanup helps avoiding duplicating your code in componentDidUpdate and componentWillUnmount.

```js
function FriendStatus(props) {
  // ...
  useEffect(() => {
    // ...
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
```

The return statement is the cleanup: this effect runs when the component unmounts. In this case, it is unsubscribing from a friend's status.
A simple yet unique racing game
Tags: octograd2020, githubsdp
Published: 2020-05-22 23:32:07

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## Reverse Racing Game
I have collaborated with other cs, art, and musics students to create a 3D racing game where the main goal is to finish the race last using different strategies and unique items. Although the process wasn't smooth at all, I am really grateful to have the GitHub student pack which allowed us to use most of the tools for free. Feel free to check out the demo and repo linked below!

## Demo Link
https://notrena.itch.io/win-to-die

## Link to Code
{% github https://github.com/fancent/Win-to-Die %}
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How we built it
While the arts and music students provided us the models, textures, and soundtrack. We, the cs students, used Unity3D and C\# scripts to build our game from scratch.

We first envisioned our game to be a fast paced, high octane racing game. However, given that we need to build our custom physics, our game turned out to have a lot of unexpected physics behaviour. Therefore, we decided to change our theme to a funny, meme-ish game where we added some Fisher Price toy cars and cartoonish rockets to the game.

Our biggest challenge was of course the custom physics behaviour. In particular, we wanted our track walls to not introduce and friction, instead, the walls should accelerate the players when contact is made. This is because we do not want our players to constantly ram into walls and slow themselves down, which would defeat the purpose of making others go fast. Therefore, we started looking ways of using geometry to calculate the angles of such acceleration mentioned. However, the calculation turned out to be a bit harder than we expected. At the end, we came up with a satisfied solution of combing both built in physics and our custom one. For more details, please checkout our github repo!


## Final Note
Finally, I would like to thank my teammates for such amazing experience. Although our game did not end up like what we first imagined, the process itself was rather satisfying. Go and try out our game!

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Structural Demographic Theory - TerminusDB Discussion #11
Tags: knowledge, talks, politics, humanities
Published: 2020-05-22 23:16:57

---
title: Structural Demographic Theory - TerminusDB Discussion #11
published: true
description: Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our CEO talking Structural Demographic Theory.
tags: Knowledge, talks, politics, humanities
---
Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our CEO talking Structural Demographic Theory.
WFH during COVID. Will it be different after?
Tags: discuss
Published: 2020-05-22 23:14:20

I'm assuming most everyone in this community is WFH these days.  I've been doing it with my company for over 2 months now.  I've never done it before myself but I am enjoying it immensely.

My question to you all is when people start going back to work later in the year or most likely the beginning of Q2 2021, do you think it will be the same?  At the moment _everyone_ is working from home which means _everyone_ has to use Zoom and there is little to no FOMO.  Once people start going back to the office and you have a few people on Zoom and the rest in a meeting room, will it be the same shenanigans? Or do you think people have learned their lesson on how to properly interact with remote employees?
[The Best iOS Project Ever]
Tags: ios, augmented, shopping, swift
Published: 2020-05-22 22:58:49

## Find My Fit iOS App

### The app was developed using Swift 5, SwiftUI, SDWebImage, Apollo, PostgreSQL and Apple ARKit 3, for the augmented reality feature.

[Comment]: # This app is the first version to be developed, following by an Android version next year. As the Team Lead, I had to plan and control the execution of the project on time and scope, and as a Developer, I developed the Augmented Reality feature and SignIn with Face ID. All the project team was formed by 15 resources with the client's team and our development team, with also the UX/UI design team. Due to the short time that we had to develop all the features (3mos), we had to focus on the priority list and develop with excellence. The final result: we got an A+ grade AND three of us got hired by the company, and now we're developing the remaining features.

[Note]: The app is still under development with a forecast to be deployed to Apple Store this year.

### Demo Video Link: https://tinyurl.com/ydbq2m9d
#### Link to Code: Unfortunately, since it's a startup company and we have a signed NDA, the code now is not accessible to anyone.


[Final Note]: I'll be selected because "I'm the best of the best of the best, sir!"
My Graduation Project Experience
Tags: productivity, cpp, computerscience, challenge
Published: 2020-05-22 21:25:14

Hey, I am Nikhil Upadhyay and this is the first time I am writing a blog post on any platform so it may be a short one. I've completed my graduation with Physics as my major subject. I like physics very much but when it comes to deep theoretical physics it becomes vulnerable and I am saying this from my experience that's why I like experimental physics very much.
So, This was the time of my end semester and there is rule to complete a major project under a supervisor before you graduate. So, my department allotted me a professor Dr. Raktim Abir (Core Area- Quantum Chromodynamics and Chaotic Systems). During my graduation I learned some programming Languages like C/C++ and some Python so when I first met my Professor he nicely talked to me and asked me a first question "Nikhil, this is your last semester so would you like to tell me how was your experience in this department or this course?" then this discussion goes on. As I told him about that I want to change my subject from physics to Computer Science, so he gave me a topic which is related to Computer Science and Physics "Cellular Automaton". Like you I also didn't hear that name before so I go to my friend Google and research on my own. During this project, I have to study "What is Cellular Automaton and how this work?" and also I have to make some algorithms for famous Cellular Automaton models like Game of Life and Abelian Sandpile's Model. I got to know a YouTube channel TheCodingTrain from Prof. Daniel Shiffman ,he is pretty smart and funny guy and I saw his tutorial then I got familiar and then it takes 3 months and finally I submitted my Project and gave the presentation. That's It!!
Thank You
My own implementation for source code management system (SCM)
Tags: 2020devgrad, octograd2020, showdev
Published: 2020-05-22 22:53:16

---
title: My own implementation for source code management system (SCM)
published: true
description: I just graduated from Mansoura University - Faculty of Engineering, and this was an interesting project I worked on during study.
tags: 2020devgrad, octograd2020, showdev
---

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Final Project
The main feature of the system is to record every change when you commit and let you checkout to this commit at any time.

## Link to Code
https://github.com/ahmedakef/sstc/

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## Additional Thoughts / Feelings / Stories
I always use Git, but I wanted to know how it actually works, so I spent some time reading about source version control systems and different approaches to save commits, find difference between versions ... etc
It was really nice in research and implementation and I managed to make a simple SCM in the end that have lots of bugs for sure :"D

## How I built it
I used C# to implement the project and it was the first project to use c# in. I was searching alot.
and it was also the last time :"D
[Final Note]: # (CONGRATULATIONS!!! You are amazing!)