DEV Community: Sylvia Pap

My career story - from bootcamp to Google in ~1 year

Sylvia Pap — Thu, 25 Feb 2021 03:16:32 +0000

Intro

Quick disclaimers - This isn't a how to get into google post. I'm just going to try and give my whole story here. Maybe it'll help someone, maybe it's just me looking for attention and validation from strangers on the internet 🤷‍♀️

I say '~1 year' because I started a coding bootcamp in January 2020, and I got this offer in the beginning of February but basically January 2021 lol. But I did start looking into all of this in November 2019. So if I need to rename this to 14 months - sue me.

I'm not saying I had no experience when I started this whole switch. Experience is impossible to quantify but I think, relative to the entire tech job applicant pool, I had little-no relevant experience. If you compare with other bootcamp students/self-taught coders/career switchers, maybe I had a lot. Some people learn to code without ever having owned their own computer, but some people go into bootcamp having worked professional developer jobs before. tldr - I acknowledge my privilege and helpful background going into this, but I at least had way less than the people with computer science degrees and/or multiple years of tech work experience that I would be competing with for jobs.

Ok, story time!

November 2019

This is what I consider the most important general turning point in my career, but it wasn't like I had never written a line of code before this. I used some basic HTML as a kid on Neopets and MySpace. I tried Comp Sci 101 in college (I think it covered Java) but I immediately dropped the class. I could barely figure out how to access my Mac's terminal.

Every once in a while, after taking a personality quiz or reading a book about finding your dream career, I'd go on Khan Academy and check out some beginner videos on computer science and programming. I'd always enjoy it, but feel overwhelmed/too late to switch, imposter syndrome, etc. etc.

I was just about to commit to life as a lawyer. I was signed up to take the LSAT. This is a cheesy thing I say in interviews, but the 'logic puzzles' section of the LSAT actually was kind of the final sign I needed to make the switch. These puzzles reminded me of my favorite course in college (logic for philosophy). I like Boolean algebra, formal logic, puzzles, patterns, proofs, certainty. I knew that this was all very relevant to computer science, so it all just really clicked then - I didn't want to be a lawyer, and I liked what little I knew about computer science.

So I bought and read a book called "The Self Taught Programmer" and learned some basics in Python. I was pretty excited to see Hello World in the browser - that, and even just using my terminal, was a huge deal at the time compared to the few exercises I had done in a Khan Academy IDE. This simple book was kind of a big turning point for me - it was the first time I really felt like I could do this. For some reason, I just didn't think it was too late/impossible to do a big career switch anymore.

Udacity Course

So at this point I had been doing the totally self-taught, free online resources route. I loved it, but I also got very excited/impatient, so I started to think I needed something more structured. I decided to do a Udacity online, self-paced course in full stack web development using Python.

And I loved that too! I remember the first time I looked at the clock while working on a project, saw it was 3am, and hadn't even realized how much time had flown by while I was actually spiraling down a StackOverflow rabbit hole. I've spent a lot of time in my life staying up late reading Wikipedia, but I had never had a moment like that before. I thought wow, I'm spiraling on the internet, but people get paid for this?

But, I wanted to go fast, learn as much as possible as quickly as possible, and I thought that a structured, in-person course was a better way to do this.

I did some research, some YouTube, considered applying to Master's degree programs because I'm a sucker for academia, but settled on Flatiron School coding bootcamp/full time software engineering immersive in San Francisco.

January 2020 - Flatiron Coding Bootcamp

Important to note - I had a lot of privilege in this decision making process. I had savings, supportive family, a job that I could easily quit, no partner/children - still a big/risky decision, but none of the other factors that make this bootcamp question even harder for a lot of people.

I went from just trying this thing out to quit my job, move to SF, start bootcamp pretty quickly. I wasn't that rigorous in researching which bootcamp to do, either.

Maybe I would have been better off somehow doing a different bootcamp. Or no bootcamp! These are endless debates that I have mostly given up on.

Overall, I loved bootcamp because: 1. I just love coding, 2. great instructors/classmates, 3. going into a WeWork building in the center of SF every day (until COVID). It was a cool feeling while it lasted - walking into a building that also hosts Uber/Square, right across from Twitter, learning coding in a welcoming space with free coffee and frequently free food.

I think these reasons are important to note because the whole experience made me think that this would all have been very possible without a bootcamp. It's impossible for me to ever say firsthand, obviously, but my reasons for enjoying the bootcamp were pretty general. Maybe I couldn't have done any of this without the bootcamp. But if you're reading this, wondering if you can do a free/self-taught/cheaper route without one of these big bootcamps - based on my limited experience, I'd say yes. tldr - I liked my bootcamp, I'm thankful for it, but they're not magic.

May 2020 - August 2020: Start Job Search

I graduated from Flatiron May 8, then almost immediately got into the job stuff. I had sent a few apps before even. I was eager.

I naively thought that if I applied to a ton of jobs, at all sizes of startups and mid-size companies and large companies, sent some simple networking messages to current SWEs and recruiters, kept my mind and options open, I'd at least have interviews within a few weeks.

I could not have been more wrong. I had some really depressed/angry moments where I was just... shocked... at how hard it was to even get a response. I knew the interviews would be hard, but I didn't expect it to be that hard just to get the interview. Or even a phone screen. Even a LinkedIn response!

August 2020: First Offer - Short Term Contract

At this point - I was frustrated with Flatiron as an organization. Even with all the disclaimers/research, saying 'we don't guarantee a job,' etc., I had high expectations. Not that they would get me a job. I never expected that. I never even expected that they would 'get me an interview,' but I thought if I did all the work, on my resume/website/projects/networking, they'd get my foot in the door. And they did eventually! But it took 3 months, and a lot of nagging.

Flatiron has 'Employer Partnership' representatives - people who work with companies to connect grads. Some were really helpful. One was particularly helpful. He set me up with an interview for a small startup that would later offer me a contract job.

So... at the end of the day, I got a job because of Flatiron. I am extremely thankful, but also critical, because so many things had to click into place for this to happen. Main takeaway here - do not expect anything from a bootcamp career-wise.

My main problem with these bootcamps is just that they're overpriced. Not worthless - not even close - not a 'waste of money,' nothing extreme like that. I guess it's similar to debates on private vs. public universities. Some say the private/prestigious universities are truly better education/better opportunities, but ridiculously more expensive.

I like to complain, but I don't think I have regrets. Overall Flatiron was a positive experience, and I am very thankful to the EP rep and my career coach for their help.

This offer was with a very small startup called DaoCloud. They are a platform for connecting/finding wellness practitioners. The entire company was around 20 people, and only 1 other coder, also on short-term contract. I'm not making any judgments about any of this, just throwing some numbers out for comparison.

December 2020: Second Offer

So I had been working for the first startup (DaoCloud) for a few months, as a contractor. Some people like contracting, but I wanted regular full time. There are all kinds of complexities about taxes here that are important, but I won't go into them. Point is - I really liked that first position, but wanted something full-time.

I had interviewed with this other startup (Universe, an iOS app for mobile website building) in July 2020. They rejected me first time around too! But they said they might be able to offer me a position in a few months. And surprise surprise, they actually meant it! They reached out to me again around Nov/Dec, I had one more informal conversation with someone, and I got an offer to be a full-time software engineer with them! They are also small, but slightly larger than the first. And they had way more engineers, which I liked.

I absolutely loved my time with both of these companies. I truly learned so much. I always used to think learning and growing professionally were meaningless cliches that people say in interviews, until they actually happened to me!

I learned things about coding, git, deploying, product management, you name it - in such a short time. I worked with some amazing people. I can't emphasize enough how much I enjoyed these companies and am thankful that they gave me chances when no one else did.

Google

Ok so Google kind of has its whole own timeline. May 2020 - I applied online, but with an employee referral, and was rejected - no phone screen or recruiter contact or anything. I was super mad at the time! I had heard that employee referrals were a big thing, so I thought I'd at least get a chance. I wasn't expecting to get a job or anything, but I expected more than what felt like an auto rejection.

July 2020 - I went to a virtual networking event and talked to a Google recruiter. I am also thankful to Flatiron for this, because the same EP guy who got me the startup interview, told me about this Google networking event.

So I went to this event. Followed up with the Google recruiter on LinkedIn because he said he likes LinkedIn. We set up an initial phone call. He was super nice and cool. I wasn't even expecting anything at this point either! I was still a little ego-shook from being rejected when I applied online, and thought I was just having a networking phone call for the heck of it. This recruiter had also said during the event itself that Google wasn't really hiring (this was peak mid-pandemic time). So basically, I was very surprised when he said he'd set me up with a first round technical interview.

I really am trying not to give any direct advice here, but I will say, in the job search, you have to be shameless and relentless. Don't ever take no or we're not hiring for an answer. 99% of the time - it's true, and you're going to get rejected/ignored, but I just had to always remind myself - you have nothing to lose by continuing to ask/try. Worst case is you get ignored. It might seem obvious to some, but it was tough, yet important, for me to actually internalize.

Anyway - back to the first Google interview. I was extremely excited and nervous. I studied my data structures and algorithms to an unhealthy extent. I did practice interviews. I did LeetCode. I obsessively watched YouTube videos of other people doing LeetCode and practice interviews.

And then, I bombed the interview. I had been doing entirely like, binary search trees in Python, and actually, little had I known, this was a frontend specific interview. So the interviewer asked me relatively simple frontend questions, but I absolutely choked/panicked/failed because I just hadn't even thought about frontend or JS or anything relevant in weeks. Not to make excuses, but the recruiter had told me to study the standard DS&A/LeetCode/Python. So you really just have to be prepared for anything in these interviews.

Sept 2020 - the recruiter offered me another chance to first round interview for the general SWE position! I.e., not frontend specific. I was stoked and grateful and nervous all over again. I got a do-over. I spent weeks doing the same level of obsessive studying. I could write a whole other post about the pros/cons of my studying. I had some standard study books, Cracking the Coding Interview, I bought AlgoExpert and enjoyed it. I strongly believe anyone can succeed at these interviews with entirely free/online resources, and it's just a matter of sheer practice. I liked prep courses/books to keep me structured.

Due to some combo of not studying the right things, simple not studying enough, and/or test-taking nerves, I bombed the interview again. No one to blame but myself. I studied and practiced so much. I understood why you need to spend several months doing 100s of questions to nail these interviews.

So there I was, rejected, told I couldn't apply to these roles again for a year, 3 strikes I'm out. Sad, but I fully accepted it.

Nov/Dec 2020 - A Google recruiter reached out to ME!!! Pure irony. I had lost all hope in Google. I had other job options. She was recruiting for a position I hadn't really heard of before - Technical Solutions Consultant/Customer Solutions Engineer. Maybe unimportant but there seem to be like 5 different names for my position based on official job postings and what my contract ended up saying lol. I could write more about the specifics of the position, but the important takeaway is that this job is generally around half coding, half business consulting/data engineering. She said she had seen my resume on file from my past interviews and I could be a good fit.

I actually laughed and thought, ok Google, trying to get my hopes up again. There's no way I'll get this, and they're just trying to interview as many people as possible. But I might as well take the interview. Nothing to lose.

And wow! I had some of the best interviews of my life. I will never know if it was just having the right attitude, months of studying finally clicked, and/or good luck. I don't think the coding/algorithm questions were as hard as the general SWE one I had, but whatever. I nailed them. I had fun talking to the interviewers. I started to get truly excited about the job and have hope again.

I passed the first round technical, and still thought, wow this is exciting but there's no way I'll actually get it. The process is so long and has so many steps. But the 'Virtual On Site' (main day of interviews) was amazing. I had truly the best interview of my life with my future manager. And still - I had to wait for the 'Hiring Committee' stage!! This whole process is pretty well documented for Google in general. It was pretty standard, but a lot of waiting and still thinking, wow there's a good chance I'll get this job, but don't get your hopes up yet.

But obviously, finally, they offered me the job! I still can't believe it. I was genuinely sad to leave the startup job I had, but this was and is my dream opportunity. At the time of writing this, I haven't actually had my first day yet. So stay tuned!

Conclusion

There's much more I could say, and yet maybe I already said too much. I hope this is the right balance of informative and concise. I could definitely write specific posts about my interview experiences and studying.

I think the 'job search' is all a random mess and there's no good way to give advice here. My only advice is don't give up 🤷‍♀️

Good luck and thanks for reading!

I still feel like this

Resources

Cover photo

Standing out in a job application / Twitter clone project using React

Sylvia Pap — Wed, 28 Oct 2020 19:10:20 +0000

Intro

Hello dev community! I am humbly asking for your time and attention and potentially retweets. This isn't really a tutorial or super technical post, so I hope I'm not being spammy here.

I applied to a twitter swe apprenticeship, and there's an application question 'tell us your life story in tweets.' It's just a basic text box/essay question situation, this wasn't required at all, but I'm really trying to do the whole 'standing out' and maybe 'getting a job after going viral' kind of thing, so I made this twitter clone of my 'life story':

https://sylviapap-futuretwitterapprentice.netlify.app/

I think someone was hired by Airbnb after going semi viral for making an Airbnb clone that was like her resume as a vacation destination? Link coming soon. I have like 70 followers on twitter so by 'going viral' I mean honestly anything more than 10 likes.

Here's my tweet if you are so inclined to RT:

// Detect dark theme var iframe = document.getElementById('tweet-1321511142238285825-26'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1321511142238285825&theme=dark" }

But I'm only asking, if you look at this, and you genuinely enjoy it, throw me a like/comment/RT! No free lunch. And if you don't like it, please tell me why! The application submission is due in a day so the whole thing was a little rushed, but I can obviously keep editing forever and use it as a nice portfolio/beginner project regardless. So I'm also posting this to get feedback - on the code and content and everything!

But first here are some obvious problems I acknowledge:

No actual Twitter functionality (i.e. being able to like, share tweet) lol
No backend at all in fact (i.e. might add basic 'like' functionality first, then backend/data persistence, but currently have neither)
Search bar should at least refresh the page on submit
Might add some kind of 'info' or home page describing the project
I chose to make it chronological order (or would you call this reverse chron? idk but oldest on top) because it seemed to make the most sense to me, story/creativity-wise, but obv I recognize this is not how actual twitter works lol
It's more or less 'good enough' on mobile, but doesn't look like the actual Twitter mobile browser version, uses some hacky 'hide on mobile' css
Overall just messy code tbh. I combined a lot of existing tutorials' CSS. Did the whole thing in less than a day tho
I tried to be funny/just the right amount of political. If you don't think I'm funny and/or you think anything in here is unprofessional - ~~i will fight you~~ please tell me but let me down easy :'(

Finally here's my repo:
https://github.com/sylviapap/twitter-clone

Thanks for your time!!!!

Putting dev.to on your LinkedIn?

Sylvia Pap — Sun, 19 Jul 2020 19:21:38 +0000

I recently saw this post about putting dev.to on your resume, and I thought it was very helpful! I had put dev on my resume for some positions that were more specific to writing, but now I think I will keep it on there for all jobs. Having top posts on here is definitely one of my greatest/most measurable achievements as a very junior dev.

Before this, I "had dev.to on my LinkedIn" but only as part of my "featured articles," the publications section, and a link to my profile.

So after seeing the resume post, I thought I could go another step in adding to my Experience section. I have the following currently:

But imposter syndrome always has me worried that this is somehow... dishonest. I've always thought the Experience section on LinkedIn was solely for employment where you were paid. But... maybe that's too strict. So I wanted to post this and get general thoughts on it.

Advice for a struggling bootcamp grad?

Sylvia Pap — Sat, 18 Jul 2020 01:20:23 +0000

Hi dev community - I have not yet posted a #discuss type question here, so apologies in advance if this is too common of a question/too long. I know the market is saturated with coding bootcamp grads, and the 'blog market' is saturated with posts about bootcamp grads. I know it's very hard to get one of the most coveted, competitive, and high-paying jobs after taking only a 3 month course. And of course I know this is an unprecedented and horrible global pandemic economy.

All of that being said - I'm really struggling, and these problems have been around for bootcamps grads for years now. I've read a lot of blogs. I've done a ton of networking. Gotten good advice. And I generally feel like I just have to do something else major now - like get some kind of further online degree/certificate? I'm not sure, but it seems like employers see '3 month bootcamp' grad and throw the resume in the trash before it even gets to their inbox. I'm not trying to be lazy and say I'm owed anything after an objectively short time - I just don't know what else to do to show that I'm serious and that I love coding and I want to learn as much as possible. And it seems like everything I could do now to try and get more experience/demonstrate my skills - personal projects, hackathons, contributing to open source, freelancing, unpaid internships - might just be further exhausting myself with nothing tangible to show for it.

Again I am really not trying to hustle or cheat my way into something I am not qualified for. I am willing to put in the work. I also am interested in doing something like an online master's degree in computer science, truly genuinely for my own personal interest, but it seems like a risky further move into debt that may or may not even help me get a real job.

A lot of the advice for struggling junior dev job seekers right now is 'just keep pushing along!' i.e. applying, networking, etc. I am not knocking that advice - and I will certainly keep applying, working on my personal projects, doing whatever self-taught learning that I can. But I am starting to wonder if I can/should do something that is more of a major change. Thank you!

Learning Swift, iOS, and Vapor in one week

Sylvia Pap — Sat, 11 Jul 2020 04:27:37 +0000

I always think of a line from Silicon Valley where the main character says, to prove how smart/good at coding he is, "I learned Ruby on Rails in a weekend"

My bootcamp taught RoR in 6 weeks so maybe I can't say this, but I think if you had a solid coding background in other frameworks, learning RoR in a weekend wouldn't be hard, so that's just a funny TV vs. reality tangent. The wonderful world of internet commenters have also pointed out that the episode's timeline/character's age imply RoR wasn't around when he would have been 17 so... it might not be the show's most technologically accurate line!

But it's relevant to me because now I'm like, is it impressive to say I learned Swift, iOS, and Vapor in one week? Can I even really say I did learn it? It's kind of like saying I 'learned' a language by coding a hello world - not wrong per se, but it would obviously be a lot more impressive to say I built a full stack application with mobile/iOS frontend and backend REST API using Swift - and I didn't do that lol! I just did (parts of) a ton of tutorials and videos, used XCode for the first time, and used Vapor - a framework I had never even heard of before - all in about a week, so I'm feeling accomplished.

I had also been feeling pretty down/discouraged about the whole job search process, and this kind of revived me. I mean there were also times where I was literally pulling my hair out at 2am wondering why I'm the dumbest person on earth. But equal amounts of feeling like a genius. Classic coding ups and downs.

I might never be able to brag about learning iOS in a week to sound smart, but I definitely dove into a whole new world of programming in a relatively short amount of time, and I learned some interesting things.

Background

I find it hard to say exactly when I started coding or first learned to code. But I'd say I really started down the path to becoming a true and obsessive coder in October 2019. I read a book on Python, took an online course in web dev using Python/Flask, and in January 2020, I did the whole in person web dev bootcamp thing for Ruby, Rails, and React.

A very common question for beginners is Where to start? What language to learn first? and a probably even more common response is, It doesn't matter. Just start somewhere, and then it's relatively easy to learn new languages, etc. from there. And it still amazes me how true that is!

For me, looking back, starting with Python was great. But Python/Flask was hard. Very new and confusing, almost entirely self-taught. Then Ruby/Rails at bootcamp - still hard, but a lot better. I noticed small connections to what I already knew and had instructors to help me in person. Now Swift/Vapor - super hard, all on my own, very rushed, but also really cool, and I think kind of tied together for me how similar these 3 major backend frameworks can be. And also different! Same same but different.

Comparing backend/server-side frameworks

I'm not entirely sure what the best way is to compare backend frameworks. But I did recently see this video, and thought it was just a generally super cool visualization, comparing "popularity" based on GitHub stars:

The real difficulty over the last week was learning Vapor - a backend framework for Swift. At the time of writing this, vapor has about 19k stars. And Rails (the main backend framework I knew before this/compared almost everything to) has about 46k.

So why did I choose to learn these things?

Well I'm probably too much in a quantity over quality stage in my programming life. I know the very standard advice about jack of all trades, master of none, don't just list as many tech terms as possible on a resume to look good. But these are desperate times. I'm looking for anything to distinguish myself from all the bootcamp grads who know React.

So when my bootcamp put up a free Swift course for us after graduation, I thought I'd check it out. XCode was a little scary - I still need to figure out all the shortcuts, and I still prefer my VSCode - but I liked it, so I put Swift/iOS on my resume (I'll admit this sounds sleazy, but I promise I didn't lie, and I said 'beginner in Swift/iOS').

And then I got an interview for a Swift backend position. I almost didn't even apply because it seemed so specific and out of reach. I'm not complaining or questioning it, but it is crazy to me how the world works out. I'm still in the interview process though, so I hope writing this doesn't jinx anything.

But I didn't learn Swift just for this interview. I had only just started learning it, so when I got the interview, I spent the entire week leading up to it trying to become an expert in Swift and iOS. iOS wasn't as important for this specific interview - the position is backend, but for a mobile app company. But I wanted to be familiar with the basics of iOS development just in case.

Swift and iOS

At first, I grouped these together. Of course, later, I get to the web/backend API side of Swift. But I started off just thinking ok, I need the basics of Swift and mobile. I still don't know the fundamentals of Swift that well. If you asked me to whiteboard a simple function, I probably could not do it. But I started off kind of skimming the resources from my bootcamp on Swift fundamentals, which helped to get a general vibe and at least be aware of the major differences from the languages I knew before. I checked out the Apple developer docs and Swift.org.

If you really want to learn iOS, I think this video was the best resource I found:

I skimmed/watched the first few minutes of many videos like this, and I thought this one was the best, especially if you're a total beginner. If for nothing else, it was really cool to see a Hello world app on my iPhone. It was like falling in love all over again 🥺

Vapor

vapor / vapor

💧 A server-side Swift web framework.

Vapor is a web framework for Swift. It provides a beautifully expressive and easy to use foundation for your next website, API, or cloud project.

Take a look at some of the awesome stuff created with Vapor.

💧 Community

Join the welcoming community of fellow Vapor developers on Discord.

🚀 Contributing

To contribute a feature or idea to Vapor, create an issue explaining your idea or bring it up on Discord.

If you find a bug, please create an issue.

If you find a security vulnerability, please contact security@vapor.codes as soon as possible.

💛 Sponsors

Support Vapor's development by becoming a sponsor.

💚 Backers

Support Vapor's development by becoming a backer.

View on GitHub

I started off doing the tutorial with the most recent version of Vapor (4) but then my code challenge was in Vapor 3. It wasn't that difficult to go back to Vapor 3 but I did encounter some unrelated brew cleanup issues. Either way - check out the Vapor docs if you want to try out the basic setup.

There aren't a lot of blog posts on Vapor, as you might expect! React and JS are the top tags on here for a reason. But this was a very good, comprehensive blog post on Vapor that I found:

A Vapor Guide-Setup and Deployment with Heroku and Ubuntu

leogdion ・ Jun 24 '19 ・ 14 min read

#swift #tutorial #ios #webdev

PostgreSQL and Fluent

This code challenge required PostgreSQL for the database, and Vapor uses Fluent as its ORM. This reminded me of my Flask experience back in the day, and Fluent reminded me of SQLAlchemy. I thought Postgres was just really hard to learn as a total beginner - but honestly I still struggle with it, even now, as a medium-beginner! And there aren't a lot of posts/explicit tutorials on how to use it. I always end up finding a mess of various docs/examples and typing so many wrong things into the command line before I finally come back to the same obvious, correct one.

This is just to say - if you're a beginner using Postgres, don't be discouraged. There must be a reason why my bootcamp, and so many others I assume, start us off with SQLite and ActiveRecord in Rails. Again, totally might just be because anything feels easier in a structured, in-person context. But this bit from the Rails/Active Record docs makes me think I'm not wrong in thinking it's more beginner friendly:

Convention over Configuration in Active Record

When writing applications using other programming languages or frameworks, it may be necessary to write a lot of configuration code. This is particularly true for ORM frameworks in general. However, if you follow the conventions adopted by Rails, you'll need to write very little configuration (in some cases no configuration at all) when creating Active Record models.

This 'convention v. configuration' thing was a very interesting concept I remember loving at bootcamp. Like, it's so simple and obvious when you hear it, but I hadn't had the words for it before. This might be an oversimplification, but to me, convention over configuration means less writing actual code. Someone far more experienced than you has written the standard stuff. Almost like using a website creator template. You sacrifice flexibility (configuration), but you get more ease, speed, and reliability for basic use. When you're a beginner - you want convention.

So in my limited experiences with postgres and its relevant ORMs, I struggled with the heavier configuration aspect. Small side note for beginners - postgres/SQLite are examples of a database management system (DBMS) and ActiveRecord/Fluent are the Object-relational mapping framework (ORM). Overall, if you're reading this and you want yet another person's specific advice, start with something like ActiveRecord/Rails before something like PostgreSQL/SQLAlchemy.

SwiftNIO

I noticed NIO a lot while debugging/seeing errors building my HTTP REST API with Vapor, so I thought it was worth mentioning. As far as I can tell, in simplest terms, it is a building block within Vapor for routing/creating API endpoints.

apple / swift-nio

Event-driven network application framework for high performance protocol servers & clients, non-blocking.

SwiftNIO

SwiftNIO is a cross-platform asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients.

It's like Netty, but written for Swift.

Repository organization

The SwiftNIO project is split across multiple repositories:

Repository	NIO 2 (Swift 5+)	NIO 1 (Swift 4+)
https://github.com/apple/swift-nio SwiftNIO core	`from: "2.0.0"`	`from: "1.0.0"`
https://github.com/apple/swift-nio-ssl TLS (SSL) support	`from: "2.0.0"`	`from: "1.0.0"`
https://github.com/apple/swift-nio-http2 HTTP/2 support	`from: "1.0.0"`	`from: "0.1.0"`
https://github.com/apple/swift-nio-extras useful additions around SwiftNIO	`from: "1.0.0"`	`from: "0.1.0"`
https://github.com/apple/swift-nio-transport-services first-class support for macOS, iOS, tvOS, and watchOS	`from: "1.0.0"`	`from: "0.1.0"`

Protocol Implementations

Below you can find a list of a few protocol implementations that are done with SwiftNIO. This is a non-exhaustive list of protocols that are either part of the SwiftNIO project or are accepted into the SSWG's incubation process. All of the libraries listed below do all of their I/O in a non-blocking fashion using…

View on GitHub

SwiftNIO is focused on providing the low-level building blocks for these higher-level applications. When it comes to building a web application, most users will not want to use SwiftNIO directly: instead, they'll want to use one of the many great web frameworks available in the Swift ecosystem. Those web frameworks, however, may choose to use SwiftNIO under the covers to provide their networking support.

Debugging in Vapor

This was, again, harder than debugging I've done in other programs. This could definitely be a lack of research issue, but from the brief googling I did do, it doesn't seem like an uncommon feeling.

I relied on writing my own tests, and adding basic breakpoints manually in XCode. In Rails, I used byebug and rails console a lot, and I didn't find anything analogous in vapor. All just things to get used to and keep researching.

Conclusion

I actually loved trying to learn vapor, Swift, and iOS. I would highly recommend for anyone in a similar medium-level of experience range. I'd probably also recommend Swift and basic, frontend iOS dev for someone with no coding experience at all, because I found XCode to be generally more of a familiar user experience. It's a lot more visual, like you can manually drag and size a button to your iPhone simulator screen without even having to write code.

This ended up being more of a reflection on my experience with this pretty wide range of technologies. I hope it was helpful. Maybe I'll do some more focused tutorials on specific Vapor examples next! Either way, if you made it this far, thanks for reading.

Resources

10 Tech YouTube Channels to Diversify Your Feed

Sylvia Pap — Sat, 04 Jul 2020 05:30:58 +0000

From the same guys who brought you the diversity problem in tech, there is now the diversity problem in tech YouTube! Catchy opener attempt aside - this isn't going to be a huge rant or invitation to debate about diversity, it's just a short blog post about suggestions for YouTube channels to follow that aren't already-popular white men.

But before any comment trolls come yelling about 'forced diversity' - I did not come across these channels because I typed 'i hate white men >:(' into the YouTube search bar.

Sylvia

@sylviapapdev

the volume in this bus

22:03 PM - 24 Jun 2020

Shameless plug for my own tweet

Trust me - I have seen a lot of tech YouTube. The Tech Tube, as they say. There are a lot of great white men on here, with a lot of followers and subscribers already! And then there are a lot of really great channels featuring women and POC, with way less subscribers, views, etc.!

I found all of these YouTubers because most of them have the less traditional path to tech involving bootcamps or self-instruction, and have struggled with imposter syndrome due to being a minority in tech. While I 110% acknowledge my white privilege - I am still a woman in tech, and hearing other people talk about how they also struggle with feeling like they don't 'belong' in this industry is relatable and motivational.

This is NOT a criticism of anyone or anything (except the obvious diversity problem in tech). But I have seen a lot of posts like these:

Again - everyone in these posts/lists is great. The posters of these lists are great. I follow a lot of them. I enjoy their videos. But almost 100% of these are white men. So I just thought I'd do my own version of great tech YouTubers you might not have heard of.

Final argumentative point - 'diversity and inclusion' does not mean forcing an unqualified person into a company or your YouTube feed just for the sake of it. It's to give people who are just as, if not more, qualified, a fair chance, within a system that has made it harder to reach the same level of success. I could really get into the research on this, but this is just a blog post about YouTube, so... not yet.

One more note - I came across most of these back when I was still in the 'Should I go to bootcamp?' phase of life. So if you can break up 'tech YouTube' into two categories, one being these more informal, vlog types, and the other being tutorials with step-by-step instructions on how to code something specific, these channels are more relevant to the first category, but some of them certainly have both.

Ok, all of that being said - here are some of my favorite YouTubers, that I haven't seen on other popular lists, with a special focus on women and BIPOC.

Senegoddess

I especially enjoyed her 'day in the life' videos. Those can be a controversial sub-genre on the tech tube lol because a lot of them just show people eating free snacks in nice lounges. But I felt like hers were more realistic.

The Come Up

Self-taught SWE, no bootcamp, no CS degree, did Recurse Center. Also a lot of personal finance tips!

Jarvis Johnson

Actually not really a tech YouTuber anymore :'( but probably just one of my overall favorite YouTubers who used to be a SWE and were some of the first videos I watched back when I was deciding whether or not I wanted to make this career switch.

Mayuko

Also really enjoyed her 'day in the life' videos.

Amigoscode

CodingPhase

Jabrils

I especially enjoy his machine learning tutorials

Ijemma Onwuzulike

Dummy Codes

Special shoutout to a fellow Sacramento resident - we are the Bay Area Lite

Nicole Young

Conclusion

Small side note, but I only chose the number 10 here because that's what the majority of other posts of this type seem to do lol. There are obviously so many amazing YouTubers out there. Too many for anyone to list.

Final food for thought: there are probably some very interesting cases to be made for how the YouTube algorithm and suggestions contribute to this problem, or could help fix it.

How to make your own (no template) personal website with React, Material UI, and Netlify

Sylvia Pap — Sat, 27 Jun 2020 01:52:04 +0000

Sometimes I feel like everything I write on here could be prefaced with "Not another [general category] post..." but I am still relatively new to this world so I'm still covering and re-covering basics, but also finding very subtle ways that I can add to seemingly exhausted concepts.

So yes, I know, there are a ton of tutorials out there for making your own personal site. Here are some of my favorites for getting started (if you haven't read anything else relating to personal sites/portfolios before my post, I recommend starting with these, especially the first):

Start here

My stuff

Current personal site
Current site repo
Old site (kept on github pages just for fun/demo purposes)
Old site repo

Version 1.0 with template, pure JS/HTML/CSS

My first personal site was almost entirely a template. I used HTML5Up and I really loved it. Easy to use and tweak if you want to customize a little. I used the "Ethereal" one, which is probably one of the most common, but I still think it's so aesthetically pleasing, and I love the horizontal scroll and gallery. It also looks great on mobile. Check out the repo if you're curious, I made some very slight modifications and of course my added info. I'm keeping it on GH pages as well, for contrast, and I might continue to tweak it just for learning purposes.

To template or not to template

When I finished my bootcamp, I wanted to start applying to jobs ASAP so I prioritized quick and easy on my portfolio site. I also just don't even have that many projects (relatively) or info at all lol! I am just starting out, after all, so I wanted to keep it simple and short. Plus, if I use a quick and easy template, then I'd have more time for learning... {checks notes} data structures and algorithms?

In all seriousness - and this post says it best - absolutely nothing wrong with using a template. Here are some nice React specific templates I enjoyed looking through.

I personally just wanted to make my own. I realized I had barely "coded" outside of leetcode since my bootcamp ended, so this seemed like a good time to get back in the ol' game and make my own site.

Next: should I use React?

I didn't use React on my first site because it seemed unnecessary. The beauty of React (I think?) is its scalability, so it felt kinda lame to use it for such a small site. I still kind of think my ultimate goal here is using nothing but my own HTML, CSS, and vanilla JS.

If you haven't seen it yet - my favorite personal site is from Dev's very own, Ben Halpern.

But then I thought, again, I'm applying to a lot of jobs looking for React experience. So maybe React isn't necessary here, but it's a good exercise/refresher on using it at all. So here we are. React reacts only.

Is this site really "my own" if I use a design library?

I'm not sure! I started off thinking I would write all my own CSS, no libraries like Bootstrap. I did that for my final bootcamp project and I enjoyed it because I wanted as much flexibility as possible. But then I started selecting elements and tweaking colors and the clock started doing that thing in movies where the hands start spinning faster and faster so you know the main character is wasting a lot of time and working too hard.

Then I realized I had never used Material UI, so this could be a cool chance to try a new thing, but also make my life easier without going full template.

Anyway, that's my spiel. There are a lot of tutorials on making a personal site, and a lot of tutorials on React, and a lot of templates for a personal site with React, but not a lot of super up-to-date articles on the basics of making your own personal site with React. So here's my "tutorial" - in quotes for now because I'm not sure how in depth this will be. Might be more of a "walkthrough," or, "overview," if you will, if you're a stickler for terms.

Setup

npx create-react-app personal-site
cd personal-site
npm start

I'm also trying to do something slightly different from tutorials I've seen that do the same thing, but with jQuery. I honestly... have just never even used jQuery before. Sorry. This might be hacky, but I wanted all of my personal data in a file for single-source-of-truth updating. I didn't do that on my first site. But now I have a simple data.js file in a services or constants folder within src and this is basically all it contains so far:

export const data = {
  name: "Sylvia", 
  occupation: "Software Engineer",
  description: "looking for work",
  image: "profilepic.png",
  ...
  }

and then, in any other React component I can add:

import {data} from '../services/data'

and then use constants:

    const name = data.name;
    const description = data.description;
    const profilepic= "images/"+data.image;

and I saved profilepic.png in an images folder within public.

I also use App.css for changes to css outside of the Material components. For example, I wasn't quite sure what to do for my background, but I learned about this cool color gradient thing and it seemed like a small way to show a potentially lesser known CSS trick, so I added to my App.css:

body {
  background: linear-gradient(#ccafac 20%, #bebbcc, #9ba6c9, #8d95b8, #ccafac );
}

I'm obviously not a designer. This background could be very ugly. I think it's cool but in an old school way. I'm open to criticism here but please let me down easy.

EDIT! I am currently alternating between this color gradient background option, and plain image background I found on Unsplash. Not because anyone hated on my CSS gradient though. So if you're looking at my site right now and thinking, wait where's this color gradient I've heard so much about... I'm the kind of person who rearranges her furniture once a week. Also I wanted a nice og meta image to show up on the thumbnail on LinkedIn so I definitely have the Unsplash for that. I might also just save a plain color gradient image for my thumbnail... 🧐 TBC

Material UI

Before this, I had only really used Bootstrap and Semantic UI. This isn't really a post about the specifics of design libraries, but here are some nice articles that I skimmed when deciding to use Material:

Tldr - Material is popular, easy to use, and I like the way it looks for now. Plus... Google. So I pull up the docs and get going:

npm install

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

and that's all you actually need. But for font, icons, and responsive meta tag, I also did the following:

// for svg icons
// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

and add to index.html within the <head> element:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width"
      />

I also used Font Awesome for icons. I tried the Material icons, but found FA easier for brands (Material doesn't seem to have the DEV icon 😞 ) so I add <script src="https://kit.fontawesome.com/{your code}.js" crossorigin="anonymous"></script> to the end of my index.html. FA is totally free, you just have to give them your email to get this kit link.

At this point, I also like to change the icon links to something besides the React default. I just save something like a little moon emoji and change to:

<link rel="icon" href="%PUBLIC_URL%/moon.png" />

Some general thoughts for using Material:

Understand React hooks - while I mentioned adding your own App.css for changes such as background above, I also modified the useStyles hooks within components for specific changes, like padding, margin
Start off with the basic components like <Grid>, <Paper>, <Button>, <Typography> before going on to more complicated templates and examples
There are a few very basic examples in the docs that use purely Material components, but most of the other 'examples' or 'templates' have a lot added on that can make it complicated to try using

Hosting on Netlify

I wanted to use Netlify because, again, chance to use something new, and I remember reading this post and thought Netlify seemed cool and fast. Again, my site is so small, it might not matter. But it does seem faster than GH Pages even on this small scale. So yay!

See the following article for setting custom domain:

Setting up Domain with Namecheap & Netlify

This might be a straightforward process to most, but it was new to me, and I was happy to have this excellent and clear walkthrough.

But as far as just hosting a React app on Netlify goes, it's usually simple. I ran into more difficulty than expected, possibly because I jinxed myself by writing 'it's simple' before actually doing it lol.

I set up continuous deployment, following the terminal prompts and browser options. More in depth steps from the docs and a how to guide.

[EDIT] I realized my very dumb mistake with deploying. I had started with a folder named Components - capital C. Then, being the unimportant-detailed-focused person I am, I changed it to components - lowercase c. Netlify continuous deployment is case sensitive !!!! What a fun fact. So I had to do git mv. Just when you think you know git. But anyway - you shouldn't even have to run npm run build if you want continuous deployment and follow the Netlify prompts to link your GH from the very start. If the build fails - it might be a problem like this.

The following worked without CD:

npm run build
npm install netlify-cli -g
netlify deploy

because (and I might be explaining this incorrectly, but general idea) npm run build runs a single build based on my origin git repo. But CD uses the remote, and that's where the case sensitivity disconnect happened.

Work in Progress

An artist's work is never complete, am I right! I probably spend too much time editing (and by "editing" I mean switching between #9ba6c9 and #8d95b8 until my contact lenses fall out) but at the same time, I sometimes completely get distracted by another project and forget to update something important on a personal site. But maybe this blog post will motivate me to keep editing/looking for better ways to do things. infinite 👏 days 👏 of 👏 code

The bigger picture behind the GitHub master branch name change

Sylvia Pap — Sat, 20 Jun 2020 00:27:30 +0000

By now you may have heard that GitHub plans to replace "master" with an alternative term to avoid slavery references

I'll hopefully explain this throughout, but my main focus here isn't actually this specific GitHub debate. I am not trying to add to this question, or even make a claim in support or against.

Angie Jones @ #JuneteenthConf

@techgirl1908

Who resparked the master branch convo right now?

It's upsetting me and my homegirls.

We are literally fighting to save lives and y'all are fighting to save a software term.

We're in a war against racsim. Keep your ridiculous term (for now) and pick a bigger battle.

00:12 AM - 16 Jun 2020

This blog post was inspired by Juneteenth and looking into different ways that I could get involved and write a relevant post. So first, here are some important things you can be doing today (that do not include fighting on the internet about a tech term):

If you want more info on just the GitHub decision, here are some more general articles:

This is a good dev post in support: Github is replacing the word master to avoid slavery references. Deal with it.
and this is a good post against: 9 problems with replacing "master" in Git. This one is very good for what I would consider an in between.

Again - not trying to add to what has become a classic internet troll debate with no seemingly correct answer and a lot of loud white people going in circles. And yes, I am white, so I sincerely acknowledge that I can't speak for anyone on this issue.

But I am a woman, and I know what it's like to feel excluded from the tech community by things that might seem small to others. So I'm just going to share some things other people have said on this topic that I have found helpful and/or relevant to bigger issues.

First, some Twitter humor that generally represents my stance:

Scott Nye

@railoftomorrow

Taking Aunt Jemima off of syrup???? What’s next, some other familiar aspect of my life that, if altered, won’t affect me at all but will chip away at the casual or even overt racism in our society????

18:01 PM - 17 Jun 2020

And one in opposition that I was prepared to argue against:

David Daniel

@davydany

@natfriedman @Una @github @billygriffin22 🤦‍♂️ this is just stupid .... "master" branch in git doesn't mean the same as master/slave, it simply means the main branch..

The word "Master" has other meanings too... Like verb: acquire complete knowledge or skill ... Or the meaning here, adjective: main or principal.

02:13 AM - 15 Jun 2020

Largely because I find it insensitive to say anything along the lines of "I've never thought of it this way, therefore it is not offensive." To quote another Tweet:

Angie Jones

@techgirl1908

This is the bare MINIMUM you can do and yall can't even do this without whining and centering yourselves.

Yes we know slavery never crosses *your* mind when you hear it. When does it ever? THAT'S THE WHOLE POINT!

If you cant even do the light work, pls just get out of the way

00:29 AM - 16 Jun 2020

BUT - and I cannot emphasize this enough - I am not here to add to this specific GitHub debate. I know some commenters are going to miss this point, so maybe I should have left the word GitHub out of my title. Might go back and edit if this still isn't clear: I am talking about microaggressions in tech in general, inspired by and relating to the GitHub debate, but more so as a post dedicated to the larger importance of simple awareness of microaggressions.

Some people against the 'master change' understand the importance of implicit bias and just think this particular debate is trivial. Again - I am not addressing that!! But a lot of people who think the word shouldn't be changed also seem to think a lot of other things shouldn't be changed. That's what this is about. Bigger. Picture.

Political correctness and "free speech"

Many will openly admit that, yes, this debate is not just about technology or force of habit. It's about fear and anger toward a larger 'PC culture,' microaggressions, over-sensitivity, coddling, etc.

I can kind of see how this is the only possible argument against something as small and easy as changing a few letters in a branch name. To oppose something so small, you really must be dreaming up some wild 1984 slippery slope fallacies. These articles (The Atlantic and The Guardian) address this better and more calmly than I can.

Why microaggressions matter

I grew up in several very white communities, and I thought, up until college, that I could not be racist because I didn't have any consciously racist thoughts. I thought racism was explicit - hate crimes, slurs, segregation. I heard the term micro-aggression for the first time in college, and I also wondered if it was 'the wrong hill to die on,' 'taking away from more serious issues,' etc.

This is an excellent article with many sources on the general importance of micro-aggressions.

I slowly learned more, but the most significant event was a course I took on The Psychology of Stereotyping and Prejudice. I might be coming off too self-righteous, ivory tower white savior here, so I will try not to go too deep into this. I just feel like these kinds of courses and materials are not common in formal education, or even the debates all over the internet now. People love to debate about their experiences, and maybe articles they've read about current events, but are less likely to read about how abstract, experimental, and unconscious psychology might be affecting how we think about these problems.

How psychology can help

One of my favorite books on this topic, and in general, is Blink by Malcolm Gladwell. It's not entirely focused on race, though, so you should probably first check out the many Anti-Racist Reading Lists being discussed lately. But if those are too much for you or your white grandmother's fragility right now, this is an excellent place to start.

If you want something shorter than a book, this is a great scholarly article: Language Matters: Considering Microaggressions in Science

Clearly these debates can be polarizing and make people in the middle feel attacked and overly defensive, so I do want to stress - the whole point of understanding micro-aggressions and implicit bias is understanding how we all perpetuate negative things without conscious awareness that we are doing it.

Conclusion

I'm still not entirely sure where I stand on this specific GitHub name change question. There's definitely too much white-splaining going on. That's why I tried to amplify as many other voices besides my own here. Regardless of where you stand on the GitHub question - it makes me uncomfortable to see these conversations still being dominated by white cishet men (regardless of their stance!)

Mina Markham 🧁

@minamarkham

@zkat__ I’ve never like the master/slave terminology. Similarly I don’t like the male/female analogy for peripherals.

Changes like these are important because language matters. But if these are the only changes an organization wants to make, then yes it’s performative.

19:35 PM - 15 Jun 2020

Either way, this certainly cannot be the only thing you do or care about in anti-racism. We should still criticize GitHub for other things, just like we should with every organization right now putting up a BLM statement and nothing else.

Changing master to main is small, and maybe won't make much of a difference whether it happens or not. But the larger idea here of micro-aggressions and implicit bias in perpetuating exclusivity in one of the most homogenous industries should be worth considering.

Setting Heroku Config Vars with Google Cloud JSON Credentials File and Rails

Sylvia Pap — Fri, 15 May 2020 05:27:41 +0000

Setting config vars/secret API keys in Heroku is usually pretty straightforward. Here's a great post I refer to a lot on hiding your API keys in general. But things get tricky when you have anything more than the standard KEY=value setup.

When you sign up for something like the Google Maps API, you get a standard API key - a single string of characters you can plug into a .env and then Heroku config vars. But with Google Cloud APIs, you need a whole 'service account,' and .json file of various keys that looks like this:

{
  "type": "service_account",
  "project_id": "project-00000000",
  "private_key_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "private_key": "-----BEGIN PRIVATE KEY-----xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-----END PRIVATE KEY-----\n",
  "client_email": "xxxxxxxxxxxxxxxxx@xxxxxxxx.iam.gserviceaccount.com",
  "client_id": "xxxxxxxxxxxxxxxxx",
  "auth_uri": "xxxxxxxxxxxxxxxxx",
  "token_uri": "xxxxxxxxxxxxxxxxx",
  "auth_provider_cert_url": "xxxxxxxxxxxxxxxxx",
  "client_cert_url": "xxxxxxxxxxxxxxxxx"
}

And it doesn't seem like you could just plug each of those into config vars individually. (But I didn't actually try it - so, lol if that does work! But the docs pretty clearly say to use the whole file).

When the 'before you begin' of 'basic setup' takes a whole day

It took me a while to figure out even the basic set up for local testing (I didn't install the SDK), but the process of hosting was even more stressful, because of the risk of getting credentials stolen, so assuming you've made it past all these steps, I thought I'd write a blog post about safely setting Heroku config vars when you have a .json credentials file.

This might be kind of niche, but I'm writing this based on a bootcamp project that was built with a Rails frontend and backend - so no React/JavaScript here. It should be applicable regardless - the Heroku google-cloud buildpacks here are language non-specific - but a lot of my struggles revolved around the Ruby buildpack, so just be careful if you're using React, etc., that you have the appropriate React buildpack in addition to the Google buildpack. Are you sick of the word buildpack yet?

`heroku create`

So now let's assume you have an app set up and ready to go for Heroku. For Rails, this might involve some extra steps with postgres. This might go without saying, but pretty much every step here can be done either from the command line or in browser. I liked to have both open, and refresh my Heroku settings page after command line changes just to sanity check things were working. But I'll show command line here, because I love code blocks!

Make sure you're logged into Heroku (heroku login) and in your main project directory, and run:

heroku create my-app
heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 https://github.com/buyersight/heroku-google-application-credentials-buildpack.git

Note that the --index 1 and the order here are important. Heroku docs re: multiple buildpacks: "The buildpack for the primary language of your app should be the last buildpack added."

Terminal should return, or you can verify with heroku buildpacks at any time, the following:

Buildpack added. Next release on example-app-test-123 will use:
  1. https://github.com/buyersight/heroku-google-application-credentials-buildpack.git
  2. heroku/ruby
Run git push heroku master to create a new release using these buildpacks.

But at this point we haven't staged anything so don't forget to run:

git add .
git commit -m "first heroku commit" 
git push heroku master

General reminder, before you run git push heroku master after a buildpack change, you'll probably need to change something in the code (like even just adding a space in any file) so you can add/commit changes to be pushed and the app will be "re" built.

At this point you should notice the long chain of ruby gems installing. If the build is fast, short, and has no gems, it probably means your Ruby buildpack didn't get through and this is bad news bears! Again, check heroku buildpacks and/or settings in browser to verify it looks like this:

heroku buildpacks
=== my-app Buildpack URLs
1. https://github.com/buyersight/heroku-google-application-credentials-buildpack.git
2. heroku/ruby

Now for the real config var stuff.

As always, either in command line or browser, set the vars. In terminal:

heroku config:set GOOGLE_CREDENTIALS='<copy and paste contents of your .json file>'

and don't forget to wrap in quotes. But if you do it in browser, no quotes:

and now, same thing, but:

heroku config:set GOOGLE_APPLICATION_CREDENTIALS='google-credentials.json'

and in browser to confirm (also a larger image so you can kind of see what the settings/config vars page should look like at this point):

Note that it's important that you use exactly google-credentials.json in this step. At first I thought I could/should use whatever name I had been using in my local directory, i.e. my-config.json, but it didn't work, and I'm pretty sure it's part of how the buildpack works that this is named exactly like this. And it has nothing to do with your local directory (kind of the whole point I realized) so you don't need to make the names match or anything.

Finally, if everything has gone according to plan, you should be able to run:

heroku run rake db:migrate
heroku run rake db:seed
heroku open

and for me, all I needed to confirm the credentials worked was if the db:seed was successful, because I used the API to get the list of languages and language codes in my seeds.

Small note here - I actually call on the API in my code like this:

translate = Google::Cloud::Translate.new version: :v2, project_id: ENV["CLOUD_PROJECT_ID"]

but I don't have CLOUD_PROJECT_ID anywhere in Heroku config vars. It seems that I only needed this for local env/testing, and you could just take out the whole project_id: ENV["CLOUD_PROJECT_ID"] part here if you were just using Heroku, because of the buildpack.

Mistakes I made

I thought, with a Rails app, the Ruby buildpack gets added automatically when you run heroku create. It doesn't seem that it does, but it also seems like if you aren't using additional buildpacks, you wouldn't need to explicitly set the Ruby one. But throughout my process of trying two different google-buildpacks, I kept getting this error without realizing it was because I did not have the Ruby buildpack specified:

heroku run rake db:migrate
Running rake db:migrate on ⬢ translation-chat-app... up, run.7099 (Free)
rake aborted!
LoadError: cannot load such file -- bundler/setup
/app/config/boot.rb:3:in `<top (required)>'
/app/config/application.rb:1:in `require_relative'
/app/config/application.rb:1:in `<top (required)>'
/app/Rakefile:4:in `require_relative'
/app/Rakefile:4:in `<top (required)>'
(See full trace by running task with --trace)

So I recommend frequently running heroku buildpacks and/or checking Settings in your browser. After these bundler errors, and some stack overflowing, I realized I somehow now only had two different Google buildpacks, and no Ruby buildpack:

heroku buildpacks
=== translation-chat-app Buildpack URLs
1. https://github.com/buyersight/heroku-google-application-credentials-buildpack.git
2. https://github.com/elishaterada/heroku-google-application-credentials-buildpack

This second one - from elishaterada - did not work for me, although looking back now, this may have been because of the Ruby buildpack. So I can't entirely say it doesn't work, but it didn't for me, so I'm going to say follow this buildpack strictly: buyersight. It is a fork of the elishaterada one. Either way, you're probably not going to want two of the same thing in your buildpacks!

I found it easier to just click the 'x' button on browser to remove, but you can also do:

heroku buildpacks:remove https://github.com/elishaterada/heroku-google-application-credentials-buildpack

and then to get my Ruby back I did:

heroku buildpacks:set heroku/ruby

Conclusion

Again, there were a ton of related stack overflow posts about this out there, but nothing exactly followed/explained this in a satisfying way. It's kind of a niche problem, and weird that Google can't just give a simple API key here, but there seem to be a lot of amazing Google Cloud services that might require this. I was almost discouraged from hosting my project because I was so scared of exposing my info. But I'm glad I got past that! Hope this helped you too.

References

Symptom Check and Self-Report COVID with React, Rails, Google Maps API

Sylvia Pap — Wed, 13 May 2020 21:47:08 +0000

Not another COVID app!

Yes, I'm sorry, this is a COVID tracker. I know the market is pretty saturated on these. Some of my friends expected this to be my Silicon-Valley-Pied-Piper moment, but sadly, all I have in common with Pied Piper is a weird name...

Racoon

I'm proud of this, and willing to take the risk that people think this is some kind of dating app for raccoons. Racoon, with one 'C', is an anagram (and supposedly, the only anagram) of 'Corona.' It's a valid alternate spelling - don't listen to that red dotted line.

[EDIT] I also just finally got around to getting a custom domain. I wanted to be as cheap as possible about it though, so allow me to present... racoon.digital!

My goal here is just to show off something I'm proud of, not to try to win anything or start a real company. So if you're thinking, This idea is not original! or, This name would really confuse users and be hard to sell! - it's hopefully not that important, as long as I don't get any hiring managers who were attacked by raccoons in childhood.

Core Features and Lessons Learned

Dynamic Google Map
Official, up-to-date worldwide COVID-19 data
Custom markers to display cases by users' locations (anonymously)
Symptom checker component
Health profile for saving/editing symptoms and diagnoses

Here are some highlights of what I feel were my biggest challenges/achievements/takeaways.

Authorization and Authentication

I wanted the two main components - the map and the symptom checker - to be available without an account. You need an account to post to the map, to see comments, and to save anything, such as bookmarks or diagnosis results.

But, I now see why it is easier to make the whole app either login required or none at all. I ran into many difficulties with ternaries on whether or not a user was 'logged in,' especially with react-router and Redux. In general, I absolutely loved Redux, but this is also the first time I've really used it, so some of my problems may have come from a faulty implementation of Redux/Thunk. The page loads as if there is no current user every time, and then cycles through several re-renders once the fetch to my backend has retrieved the current user. This caused a ton of problems with undefined errors on the initial load.

I should have used localStorage.token ? for my ternaries instead of essentially currentUser ? or loggedIn ? based on a successful fetch to my backend auth route. Those return false on initial load, whereas if a user is logged in, localStorage.token would return true on page load. I thought it made sense to set it up the second way just in case there were a token without a user, somehow. But, if your auth is solid, then a user would only ever have a token if they are logged_in, and it makes more sense to base any auth conditionals on the frontend using localStorage.token ? (showpage) : null.

`google-maps-react`

I used the library google-maps-react for easily using the Google Maps JavaScript API in React. At first, this package was truly amazing, and I never realized how difficult it can be trying to use pure JS inside a React component without some kind of library. I only ran into problems with it once I wanted more customization, as you might expect. There were some small hiccups that they should definitely fix - such as forgetting to include the <Circle /> component in the default version. But even that taught me the wonders of simply changing a version number in package.json from 2.0.2 to 2.0.3. Love it when that works.

The deeper issues I had with google-maps-react, and why I would almost recommend not using a wrapper package at all if you really wanted to get serious about your Google Maps React app, was all the hidden styling and mysterious <div>s that popped up. You can specify map styling - again, huge benefit - but only properties for the whole container/map, such as position, height, and width.

As for the mystery <div>s - I was proud of myself for going back to vanilla JS roots and using the following solution:

    const div = document.querySelector("#root > div")
    div.className = "map-container"

Seems small, but for the longest time I had basically:

<div id="root">
  <div>
    <div class="nav"></div>
    <div class="map"></div>
  </div>
</div>

with no idea how that 2nd, empty, classless <div> got there!

I triple checked all my JSX, so without getting into the google-maps-react source code, I thought it must have been from something the package does to wrap the map component.

There was an easy solution for this particular example, but there are many more such struggles of unforeseen styling here. Still love google-maps-react, but something to be careful of when using imports. Side note - there also exists a google-map-react.

Symptom Checker API

I used the Infermedica API for the diagnosis component. I wanted to make as few requests as possible (the API is free but limited) and that made things harder because it's designed for many requests. You're supposed to send a POST request with a patient's basic info (sex, age), then the response is a question, and then you go through an interview flow of follow-ups that add to the previous request body, and eventually returns a response of no further questions/diagnosis.

I ended up with a big, ugly, repetitive function, and a less-than-ideal user experience form submission, but! it! works!!!! It's one of my biggest refactor goals to set it up in the intended interview, or even chatbot, style. But I now deeply understand this meme.

I'm also looking into ways to replace the symptom-checker form with something cooler like a legitimate chatbot, and/or rewrite my own medical algorithm. This would be way more as an exercise in writing my own algorithms though - there have to be so many complex medical-knowledge things from real doctors that went into the Infermedica API.

Rails Serializers

I got wrecked by serializers on this project. I'll write another blog post on it, because I have a lot to say on the subject now, and I didn't find a lot of helpful blog posts along this sub-journey.

But for now I'll say that I severely underestimated serializers, started off with Active Model, then tried to switch to Fast JSON API, then saw my users' (luckily, fake) password digests exposed, then my life flash before my eyes, and then finally came back to a point of semi-understanding, security, and efficiency with AMS. Until my longer blog post - do not underestimate your Rails serializers. Make them as solid as possible, as early on as possible.

Speed!!!

I've seen this shared a couple times and always think of it now - 40% of people abandon a website that takes more than 3 seconds to load. Load times/query optimization aren't a big focus in bootcamps. It's maybe understandably too-much-too-soon for beginners. But I think I learned some useful things about Active Record optimization, like avoiding .all, and instead using .includes() or .where(), so that's a small victory. But I want to learn more about caching data, using localStorage, minimizing fetches on the frontend, and of course optimizing the backend.

TensorFlow and Machine Learning

I wanted a basic audio component because I recently read some amazing project ideas for using audio recognition to diagnose patients through a recording of a cough. Pro: I used react-mic and it worked as expected! Yay! Con: I didn't do much else with it, or anything at all with TensorFlow in the final version of the audio component here.

I never claimed to be good enough with AI/ML to use TensorFlow here in a meaningful/diagnostic way, but I thought I had a decent enough understanding to tell the user whether or not their recording sounded like a cough. I still might. But the deadline came knocking and I abandoned that for simple audio that records, shows a frequency visualization, and lets you download your recording. But focusing on the positives here, I used a new react package, and I set up a general component for building upon later.

I struggled with the basics of audio, JS, and HTML more than expected. I had never used any of the getUserMedia() API, and was overwhelmed by all the new AudioContext() and new MediaRecorder(stream, options) so I want (need?) to understand all of this better before anything else re: audio/AI/TensorFlow.

But I haven't given up! I got TensorFlow to tell me whether or not I was coughing into a microphone in a separate exercise, I just need to figure out making the 'cough training' persist.

Deploying

A final note on deploying both the frontend and backend to Heroku - this post is my favorite article to follow. It's pretty standard, but this one is concise and direct. I didn't use yarn, and I had no problems. I had tried Github pages and React before this, and did not like it, so I was surprised at how easy this was. If you are just looking for the fastest, easiest way to get your Rails backend, React frontend app online, I strongly recommend Heroku!

[EDIT] I now strongly recommend deploying the frontend to Netlify!! I still have my backend on Heroku, but my frontend/new racoon.digital domain is on Netlify. I just generally love how easy it is to use continuous deployment with Netlify and React. I've only had minor setbacks with it, either from some dumb, easily fixed mistake I had in the build, and/or from forgetting to add a _redirects file for react-router. See here for more in depth guide, but it really is straightforward. And so far, it definitely seems faster than Heroku.

Conclusion

I hope to add a video demo soon. That seems like a very key post-bootcamp thing to do for projects, but I hate the sound of my own voice so here we are. I hope that racoon.digital is good enough for now. This domain was surprisingly cheap - please let me know if I am missing something that makes this a terrible domain name lol! I just wanted something memorable and catchy for my LinkedIn, and honestly I like it, but I'm always open to feedback here.

Thanks for reading!

Remember to social distance! Cover image: Unsplash

References

A Beginner's Guide to Healthcare AI and TensorFlow.js

Sylvia Pap — Tue, 05 May 2020 00:31:40 +0000

Intro

I am a semi-beginner in all things tech and coming up on actually finally completing my coding bootcamp course with Flatiron on full stack web development! Woo 🎉 The course covers standard software engineering, and not AI/machine learning/data science, but I've always been interested in it, and wanted to learn general programming before one day moving into something more directly AI related. But I could definitely be like this meme about wannabe AI enthusiasts - so this is a post for - cannot emphasize enough - beginners.

Image credit: @spicy_coding_memes

COVID-19

Yes, this is a post about COVID-19. AI and coronavirus. Who needs another one of those? Not me! Send tweet.

I promise I'll try to be original here. I've always been very interested in healthcare tech and AI - maybe because I love to watch Grey's Anatomy and I've always wanted the glory of medicine without having to go to medical school! But for real - and at the risk of sounding like Silicon Valley:

I really do want to use technology to make... the world... at least slightly less terrible than it is now. Whether or not that's possible is a question for another day!

Most coding bootcamps have a 'final project' that combines everything we've learned in the past 15 weeks, and mine is due at the end of this week, so I've been spending a lot of time looking at trending projects/hackathon submissions to gather inspiration and try to think of something that hadn't been totally done a million times before (this might also be impossible). As I said, I've been generally interested in something healthcare-related for this final project since before I even started, and now with COVID, I couldn't help it.

For inspiration, this project in particular caught my attention, because of the use of audio recognition and coughs. There doesn't seem to be a lot of specific research on the use of cough recognition and coronavirus, but the research on uses in other medical conditions/cases seems very promising.

There are many other very cool uses for AI/COVID - using imaging, fever detection glasses, cleaning robots, and - potentially more controversial - 'smart' doors that monitor people's activity and movement in quarantine. If all of these seem a little too sci-fi and impractical, there is also the more familiar example of AI chatbot technology, such as IBM Watson, in helping to automate COVID diagnosis, questioning, and spread of information. While this is a beginner's post, it's no secret that AI in general has a ton of varying uses, some controversial and some, frankly, mundane, so I won't go into that too much more here.

TensorFlow

All of this got me very interested in a basic implementation of TensorFlow, Google's open-source machine-learning platform. My final bootcamp project is a COVID-19 self-report tracker and symptom checker, with a Rails backend and React.js frontend, so I looked into using TensorFlow.js, specifically for audio recognition. TensorFlow and AI in general seem more common in Python, so I found this tutorial on implementing a simple audio recognizer in JavaScript especially exciting!!

As I said, I was inspired by examples of using AI to diagnose COVID, but I am nowhere near being able to do that in any meaningful way, so I really just wanted to implement the most basic possible use of AI in my app to show that I could. I was able to "train" the TensorFlow model by coughing with my microphone on for a few seconds, and there you go, a sliding bar would move to the right if I was trying to record a cough, and to the left if I was trying to record anything other than a cough (i.e. regular talking).

I really did nothing impressive here - all the cool stuff is handled by TensorFlow and this excellent tutorial! The simple audio recognizer uses Transfer learning, which "is a technique that shortcuts much of this by taking a piece of a model that has already been trained on a related task and reusing it in a new model" (straight from the old copy and paste here) but it's nice to know that so many of these seemingly complex AI technologies are actually just building on a ton of past work. So something relatively simple, like an image or audio recognizer, doesn't require as much re-training. This is why all I had to do to make my simple audio function the way I wanted was to "teach" it the sound of a cough. It already "knew" basic human speech pretty well, so then the distinction between that library and a new sound wasn't far off.

const INPUT_SHAPE = [NUM_FRAMES, 232, 1];
let model;

async function train() {
 toggleButtons(false);
 const ys = tf.oneHot(examples.map(e => e.label), 3);
 const xsShape = [examples.length, ...INPUT_SHAPE];
 const xs = tf.tensor(flatten(examples.map(e => e.vals)), xsShape);

 await model.fit(xs, ys, {
   batchSize: 16,
   epochs: 10,
   callbacks: {
     onEpochEnd: (epoch, logs) => {
       document.querySelector('#console').textContent =
           `Accuracy: ${(logs.acc * 100).toFixed(1)}% Epoch: ${epoch + 1}`;
     }
   }
 });
 tf.dispose([xs, ys]);
 toggleButtons(true);
}

But I thought, this could even be used just for a simple validation on an online symptom submission so the user knows if they are coughing enough into the microphone, and/or prevents the user from submitting useless audio. While small, these are all things that can make the process of doctors remotely diagnosing and treating patients even just a little bit easier, which is very exciting to me!

Conclusion

Image credit: @pure.python

This isn't a tutorial, and I don't have any unique insights on using TensorFlow (yet!) but there seem to be a ton of amazing tutorials and it really was easier than I expected to use TensorFlow in this simple way. If you, like me, are interested in AI/ML but haven't had time to do that Coursera course in full yet and are feeling overwhelmed, my advice is to just go for it and see what you can do!

Cover image credit: @coderhumor

References

*https://devpost.com/software/faco-fight-against-corona-jfcza9
*https://devpost.com/software/corona-mask-detector
*https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7187882/
*https://venturebeat.com/2020/03/03/how-people-are-using-ai-to-detect-and-fight-the-coronavirus/
*https://www.scmp.com/tech/article/3077964/ring-smart-doorbell-monitors-people-covid-19-isolation
*https://www.bbc.com/news/technology-52340651
*https://techcrunch.com/2020/04/16/chinese-startup-rokid-pitches-covid-19-detection-glasses-in-u-s/

Mapbox and Tool Tips in React.js

Sylvia Pap — Fri, 10 Apr 2020 20:29:39 +0000

While perusing popular posts, I was inspired by this COVID-19 map to get into learning Mapbox. The project covers a lot of what I do here and I hope I'm not coming off trying to steal anyone's thunder. This isn't a post about my creativity. I am a beginner/bootcamp student and felt like I could even further simplify the process of just using Mapbox at all, let alone connecting it to interesting COVID data and formatting.

Basic Setup of Mapbox

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. This tutorial on basic setup in React is very good and helpful! This post will mostly walk through/combine several already very good tutorials. Once again, not trying to reinvent the wheel here, but hoping to combine some good existing wheels.

End goal!

Basic React setup:

npx create-react-app your-app-name
cd your-app-name
npm install mapbox-gl

or add mapbox-gl to package.json manually and then run npm install. Both seem to accomplish the same thing - creating package-lock.json and having a package.json that contains mapbox-gl in dependencies.

Now this is probably a trivial difference, but the Mapbox tutorial includes everything in index.js, I've been learning React with keeping index.js short - like this:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById("root"));

And then keeping most of my code in App.js for now.

// src/App.js

import React, { Component } from 'react'
import "./App.css";
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: -90,
      lat: 45,
      zoom: 3
    };}

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });}

  render() {
    return (
      <div className="App">
        <div ref={element => this.mapContainer = element} className="mapContainer" />
      </div>
    )}}

export default App

and now we have a basic Mapbox! For the access token, you simply sign up for a free and easy account on Mapbox, and then, small side note that isn't super important since it's unlikely anyone would want to steal your free token, but good practice to use .env and .gitignore:

// in project main directory
touch .env

// .env
REACT_APP_MAPBOX_ACCESS_TOKEN=<mytoken>

// App.js
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

// .gitignore
.env

Fun note of caution! ⚠️ If you get the error Invalid LngLat latitude value: must be between -90 and 90 - you probably have your longitude and latitude mixed up! If you only knew how many things I tried to fix this without just simply googling the error because I didn't think I could be making such a simple mix up...

Longitude boi

Anyway, at this point I have my coords set to SF. You can mess around with console.logs and the React dev tools for state to experiment with different starting coords and zoom.

    this.state = {
      lat: 37.7524,
      lng: -122.4343,
      zoom: 11.43
    };
  }

Still following the Mapbox tutorial - here is how you add a bar that shows your coordinates and zoom as you move around the map.

// added to existing componentDidMount() function 

componentDidMount() {
...
    map.on('move', () => {
      this.setState({
      lng: map.getCenter().lng.toFixed(4),
      lat: map.getCenter().lat.toFixed(4),
      zoom: map.getZoom().toFixed(2)
      });
      });
    }

and in render(), add the follow <div> just under <div className="App">:

// added to existing render() 
...
   <div className="App">
     <div className="sidebarStyle">
        Longitude: {this.state.lng} | Latitude: {this.state.lat} | Zoom: {this.state.zoom}
     </div>

At this point you should also have something like this in src/App.css. Note if something isn't working but you aren't getting any errors, it might be a CSS issue - a lot of this involves styling from Mapbox.

.mapContainer {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
}

.sidebarStyle {
 display: inline-block;
 position: absolute;
 top: 0;
 left: 0;
 margin: 12px;
 background-color: #404040;
 color: #ffffff;
 z-index: 1 !important;
 padding: 6px;
 font-weight: bold;
 }

A small tangent I found interesting but easy to look up - if you want to change the icon that appears in the browser tab next to title, save an image to your public folder, and add to index.html where the default icon link is already set:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/map.png" />

and just change the portion after %PUBLIC_URL%/. I had saved mine as 'map.png' as you can see here.

This is where the Mapbox tutorial pretty much ends, and then links to examples on how to expand. As with everything in programming, there are so many good options! And different ways of doing every one of those options. For some reason, tool tips stood out to me. I didn't even know 'tool tips' was the official term for these little hover popups until now.

I had also come across this great blog post on React component libraries, and was interested in using react-portal-tooltip. But, I found the Mapbox official example on tooltips a bit easier to follow directly after this setup. react-portal-tooltip is more general, and useful for all sorts of apps, which is great, but it helped me to start with the Mapbox specific example to learn what was going on here.

Tooltips

The tooltip (or infotip, or hint) is a common graphical user interface element — a small "hover box" with information about the item. Again, pretty basic stuff, but I am a coding bootcamp student, and we just finished vanilla JS/started React, so this seemed like a cool thing that would have been harder without React! I always like to think of a clear example in my mind of why I am learning something, instead of just accepting it because it's a buzzword. Anyway!

This is the repo for the Mapbox specific tooltip example that I'm starting with.

First, create a components directory within src and a ToolTipBox.js Component (or you could name it anything you want, something shorter like just ToolTip.js, but if I end up using a tooltip library later, that could be not specific enough). Import the component, as well as ReactDOM which we now need in App.js, and add the following code:

...
import ReactDOM from 'react-dom';
import ToolTipBox from './components/ToolTipBox'
...

export class App extends Component {
 mapRef = React.createRef();
 tooltipContainer;

 componentDidMount() {
   // Container to put generated content in
   this.tooltipContainer = document.createElement('div');

   const map = new mapboxgl.Map({
     container: this.mapRef.current,
 ...
   });
 ...
   const tooltip = new mapboxgl.Marker(this.tooltipContainer).setLngLat([0,0]).addTo(map);

   map.on('mousemove', (e) => {
     const features = map.queryRenderedFeatures(e.point);
     tooltip.setLngLat(e.lngLat);
     map.getCanvas().style.cursor = features.length ? 'pointer' : '';
     this.setTooltip(features);
   }
   );
 }

 render() {
   return (
     <div className="App">
      ...
       <div ref={this.mapRef} className="absolute top right left bottom"/>
     </div>)}}
...

Notice in map.on('mousemove') I have this.setTooltip(features). I define this outside of componentDidMount() and it connects to my ToolTipBox component.

export class App extends Component {
...
 setTooltip(features) {
   if (features.length) {
     ReactDOM.render(
       React.createElement(
         ToolTipBox, {
           features
         }
       ),
       this.tooltipContainer
     );
   } else {
     ReactDOM.unmountComponentAtNode(this.tooltipContainer);
   }
 }
...
}

Important things used here - React.createRef(), which is good for:

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

But should be avoided for anything that can be done declaratively.

queryRenderedFeatures comes from the Mapbox API and is how we get the 'features' that will gives us the tooltips/popups info!

React.createElement() - this doesn't seem common/standard and would usually be done with JSX. The React docs recommend using JSX and not React.createElement(), but it seems fine here.

Now more on the ToolTipBox component, which uses Static PropTypes to validate that the 'features' returned from queryRenderedFeatures is an array.

// src/components/ToolTipBox.js

import React from 'react'
import PropTypes from 'prop-types'

export default class Tooltip extends React.Component {

 static propTypes = {
   features: PropTypes.array.isRequired
 };

 render() {
   const { features } = this.props;

   const renderFeature = (feature, i) => {
     return (
       <div key={i}>
         <strong className='mr3'>{feature.layer['source-layer']}:</strong>
         <span className='color-gray-light'>{feature.layer.id}</span>
       </div>
     )
   };

    return (
      <div className="flex-parent-inline absolute bottom">
        <div className="flex-child">
          {features.map(renderFeature)}
        </div>
      </div>
    );}}

There's a lot going on with CSS here, and you'll notice the actual example I am copying from had more styling, but I removed it and added some to my own App.css for simplicity of code blocks here. Here's what I added to my CSS after this step:

.flex-parent {
  flex-direction: column;
  position: absolute;
}
.flex-child {
  color: white;
  background: gray;
  text-overflow: clip;
  padding: 1rem;
}

Pretty simple, just enough styling to see a basic box show up. Not that aesthetic, but I can come back to that later, and so you can you!

Either way, though, unless you want to completely define all your own CSS, which I did not, you should probably have your index.html looking like the example as well, as they import stylesheets here from mapbox:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/map.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta
     name="description"
     content="Web site created using create-react-app"
   />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link href='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css' rel='stylesheet'>
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
   <title>MapBox React Example</title>
 </head>
   <div id="root"></div>
   <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js'></script>
 </body>
</html>

React Tooltip Library

This post is already a little long so I won't actually go into react-portal-tooltip. But one very annoying thing I overcame while exploring it and thought worth sharing - if you get this guy:

There are many solutions on StackOverflow. This one worked for me:

touch src/declare_modules.d.ts

// in declare_modules.d.ts
declare module "react-portal-tooltip";

// if it still doesn't work, add import in `App.js`
// App.js
...
import './declare_modules.d.ts'

Thanks for reading!

DEV Community: Sylvia Pap

My career story - from bootcamp to Google in ~1 year

Intro

Ok, story time!

November 2019

Udacity Course

January 2020 - Flatiron Coding Bootcamp

May 2020 - August 2020: Start Job Search

August 2020: First Offer - Short Term Contract

December 2020: Second Offer

Google

Conclusion

Resources

Standing out in a job application / Twitter clone project using React

Intro

But first here are some obvious problems I acknowledge:

Putting dev.to on your LinkedIn?

Advice for a struggling bootcamp grad?

Learning Swift, iOS, and Vapor in one week

Background

Comparing backend/server-side frameworks

So why did I choose to learn these things?

Swift and iOS

Vapor

vapor / vapor

💧 A server-side Swift web framework.

💧 Community

🚀 Contributing

💛 Sponsors

💚 Backers

A Vapor Guide-Setup and Deployment with Heroku and Ubuntu

leogdion ・ Jun 24 '19 ・ 14 min read

PostgreSQL and Fluent

Convention over Configuration in Active Record

SwiftNIO

apple / swift-nio

Event-driven network application framework for high performance protocol servers & clients, non-blocking.

SwiftNIO

Repository organization

Protocol Implementations

Debugging in Vapor

Conclusion

Resources

10 Tech YouTube Channels to Diversify Your Feed

Conclusion

How to make your own (no template) personal website with React, Material UI, and Netlify

Start here

My stuff

Version 1.0 with template, pure JS/HTML/CSS

To template or not to template

Next: should I use React?

Is this site really "my own" if I use a design library?

Setup

Material UI

npm install

Hosting on Netlify

Work in Progress

More

The bigger picture behind the GitHub master branch name change

Political correctness and "free speech"

Why microaggressions matter

How psychology can help

Conclusion

Further reading

Setting Heroku Config Vars with Google Cloud JSON Credentials File and Rails

heroku create

Mistakes I made

Conclusion

References

Symptom Check and Self-Report COVID with React, Rails, Google Maps API

Not another COVID app!

Racoon

Core Features and Lessons Learned

Authorization and Authentication

google-maps-react

Symptom Checker API

Rails Serializers

Speed!!!

TensorFlow and Machine Learning

Deploying

`heroku create`

`google-maps-react`