DEV Community: Sean

Firebase: The google API for building Apps

Sean — Thu, 15 Apr 2021 19:58:10 +0000

Firebase is tool used for the backend and database of any app or website you might create. It's a template for your app, that can be configured to your specific needs while delivering the basics. It's made owned by google which makes it even more accessible. I use google for pretty much everything. Emails, writing, and countless other things. I actually didn't know that something like Firebase existed a year ago. I mean who's gonna give up a service like this for free-ish. Anyway lets get right into it.

Firebase offers Authentication

This is literally the bread and butter of any application. Users need to be identified and have a secure way of doing so. Firebase authentication consists of google auth, facebook auth, email only auth, github auth, email and password auth, and a few others. Users can safely change passwords, confirm their email, and even change the email they are using. Here's the link to the docs for auth.

Firebase offers 2 different Databases and storage

Firebase is flexible, like really flexible. There are 2 different databases available: the real-time database, and the firestore. Both are great but personally I recommend the firestore. Storage is just for storing things that you cant keep in either database in your google cloud bucket.

Storage: https://firebase.google.com/docs/storage
Firestore: https://firebase.google.com/docs/firestore
Real-time Database: https://firebase.google.com/docs/database

Firebase offers cloud functions

Because of the nature of firebase you don't have direct access to a server, but cloud functions solve that problem. You can export your functions to be called using triggers. So any server side code can be run no stress. Here's the link to the docs
P.S you need to be on a paid plan to use Firebase cloud functions.

Now that all that's been said here's a quick example of how you might implement firebase into a react app.

Here's a link to the code in action.

Happy Hacking!

Chatting Simulator

Sean — Sat, 08 Aug 2020 16:17:34 +0000

I built a chatting simulator

I got bored and took a break on writing the code for this app that I'm launching later this year. I wanted to create something that I could show you dev's quickly, and to help strengthen my react, redux, and react-router knowledge. This chatting simulator did just that. I hope you like it.

Demo link

Link to code

Hope you like it!

Vuejs, React, Or Angular?

Sean — Wed, 29 Jul 2020 13:59:41 +0000

I've always wondered...🤔?

Not all devs are frontend devs, and not all use frameworks, and not all use one of these three, so I don't really expect to get a satisfying answer from any one, really, but which one is better Vue, React, or Angular. I've done my best to learn all three but React is the only one that comes naturally to me. Vue is like the mutant child of Svelte and Preact, and Angular isn't my cup of tea because it's only available for TypeScript, and I'm probably one of the worst attempts at a TypeScript dev ever. I want to believe that React is the better overall tool, because ignorance is bliss(and because I'm better with it). At the same time I know that bliss usually means mediocrity. I know that as a dev there are specific tools that work best for a specific job, and there are some that work great generally too, I just want to know whether I'm sticking with React because I like it or because it's my best option and because I like it.

Any body got any thoughts that might lead me in the right direction?🤷

Intro To Ruby Procs and Lambdas(and the difference)

Sean — Wed, 29 Jul 2020 12:54:21 +0000

Intro

In this post I'll be getting into some of the key parts of Ruby, lambdas and procs. I'll also get into the main differences between them, and how to use either properly.

What are Lambdas?

Lambdas, what the hell is that?

This might be difficult to grasp, and I'm also not the best at explaining, but lambdas are basically small scale functions, that behave like methods. Kind of.

I don't get it.

Okay, a lambda is a block of code that is assigned to a variable. Lambdas require all input/parameters functions do to work, so without them Ruby will return an error. Lambdas are assigned(usually) to a variable, this makes them executable only when the variables value is called. Here's an example:

squared = lambda {|x| x**2}# or {|x| x*x}
[1, 2, 3, 4, 7].map(&squared)
#=> [1, 4, 9, 16, 49]

What happened?

Basically, I used the & to reference squared and map called it on each item of the list to create a new list. Its values are [1, 4, 9, 16, 49].

That's pretty much the basics for writing lambdas, but, of course there's more. We'll get into them a bit later.

Procs

You mean Crocs. Like these ones.

NO!

Procs are an essential part of Ruby. Senior and Junior Ruby developers alike should know how to use Procs. Procs are from the builtin "Proc" class in Ruby. They're blocks of code assigned to a variable.

How do I use a Proc?

Simple here's an example:

myProc = Proc.new {=begin Random block to later be executed =end}

Okay that doesn't look too confusing. But what's the difference between a Proc and a Lambda, other than syntax.

It's actually on the surface, there isn't one. They can be used to do the exact same job almost all the time. There's one small difference that I'd like to note though. Lambdas, which mind you are still nameless functions, aren't evaluated until they're called. But Procs are a class type so they're evaluated immediately. Let's use a simple example so you understand what that means for your code.

With a Proc

def myFunc()
   myBlock = Proc.new {return "Hello"}
   return "#{myBlock} World!"
end

With a Lambda

def myFunc()
   myBlock = lambda {return "Hello"}
   return "#{myBlock} World!"
end

If you haven't already noticed with the Proc the intended output never got returned. Since it was evaluated before it was called returning "Hello" ended the function, meaning the next line was never called. With the lambda that doesn't happen because Ruby skips it until it's later called by the return statement at the end of the function. Giving us "Hello World!", the intended output. This is kind of contrived but it's a difference worth pointing out. So having a return statement or any hard coded out put in a Proc is a bad idea.

That's that folks. 😄!!!

Explain Serverless To Me Like I'm Five

Sean — Tue, 28 Jul 2020 23:03:25 +0000

What's Serverless?, how does it work?, what does it do?, why is it important?, explain it like I'm five. 🤯

5 Things to Help You Better Understand the Web.

Sean — Tue, 28 Jul 2020 22:36:10 +0000

The Web, what a guy!

Okay, if this isn't your first rodeo with webdev then I suggest that you stop reading this post, because it won't add much to what you already know. If you're new or have only heard of webdev then you've come to the right place. Here are 5 concepts that'll make the web less confusing.

Here's the list! 😄

#1 Documents

What's a document. Everything that you see on the web is a document. All of it, videos, pictures, and text are all visible because they're displayed through the document.

So Youtube is a document?

What you see is, it's likely created using html, javascript, and css on the client-side for the looks, but all the data management and other server-side operations aren't actually part of the document. The document is mostly the structure, so the design, and everything other than the info. So the comments, videos, and recommended are all from the database. So everything that you see is a document.

#2 Client-side

The client-side is your computer. That's all. It means that there is no interaction with a server. It means vanilla js, no node, no deno, no server runtime.

#3 SPA's

Single Page Application is what SPA stands for. SPA's mean that the whole website or app only uses one html document. It doesn't actually mean everything, your styling, JavaScript and html are on the same document. It means that the separate pages on your app all exist on one html document. SPA's aren't really an efficient way of creating websites unless you're using a JS framework that is component based. That means that the framework is built to create DOM elements that can be embedded into the html.

#4 HTTP

HTTP stands for Hyper-Text Transfer Protocol. Hyper-Text in directly refers to markup langs, like html, and Transfer Protocol means that it's the procedure to move the markup from one place to another. In this case from a server to your client(computer, or mobile device).

#5 JSON

JSON stands for JavaScript Object Notation. If you're familiar with objects in JavaScript think of an object where everything except the curly-braces, commas, the opening and closing for other list types, and colons are double quote strings. It's a way to store info. Usually JSON is stored on web-servers. JSON is probably the most common way for websites to store their info and retrieve it easily.

That's that. Hope you learned something.

10 Resources/Libraries/Frameworks You Need To Use As A Frontend Developer

Sean — Tue, 28 Jul 2020 19:45:36 +0000

What up devs? 😄

Hey fellow devs. Here I'm going to list 10 resources that you should use or learn as a web developer. Some will be specific others won't. Let's get into it.

#1 Tailwindcss

Okay, okay, I know most of you are already getting ready to pull your hair out. Utility-first isn't for everyone, and it certainly isn't the only option out there to create good looking websites. Here's the thing though Tailwind allows for the building blocks to be accessible and if needed customizable. Things like CSS variables and theming aren't possible with Tailwind and that's fine. Other pre-processors and frameworks do too much. Simplicity allows for a unique end result, but when everything is laid out for you, *cough* Bootstrap, building a good looking website becomes more difficult than before.

#2 Svelte

For those of you who've never heard of Svelte, Svelte is a JavaScript framework and compiler. It is great for projects of any size. Most tasks can be done using Svelte faster and with a smaller bundle size. Svelte projects have the upside of speed and if your project is aimed to help users that have slow connections Svelte is your guy.

#3 React

I'm sure that, if you haven't been living under a rock for that past few years, you've heard of React. React is probably the most popular JavaScript framework, and the most likely to land you a job. You're wondering

If that's the case why is it third on this list?

The reason is simple, Node.js. Most JS devs use Node.js, and React, since it originally(and still kind of is) only a library for UI development it is built for client-side JavaScript. Most projects use node though and there's too much, like way tooooooo much, set up required to use React on node. All the stuff in the src and public folders aren't necessary for client-side React. For most dev's this is off-putting. That's probably why facebook created the create-react-app npm command, but that still only fixes part of the problem. React devs(like me) usually use Redux and React-Router with our projects. Redux is famous for it's boiler-plate, add that with the insane React setup and

#4 Angular

Many of you devs have been waiting for Angular to come up on the list. Angular is great and probably one of the benefits of using TypeScript. It's problem is pretty much the same as React's. Angular has way too many dependencies and too much set up. I'd probably end up finishing a project in React by the time I finished setting up Angular. At the same time. Unlike React or Vue. Angular is a true framework. What is mean by this is that React and Vue are considered frameworks because with all the React and Vue based libraries, bindings, and dependencies that work well with them they become all rounders, but unlike them Angular is self contained. React and Vue on their own, completely solo, are just JavaScript libraries. They both only major in reusable UI(through props), and state for React. Angular does that and so much more. It attacks the faults of vanilla JS from every direction. So Angular is best friends with boiler-plate but makes up for it with genuine quality. 😂 😂 😄

#5 Any JavaScript Pre-processor

What's a pre-processor? Something like Babel. It turns a type of JavaScript into actual JavaScript. Babel is what's used to interpret JSX on node. Examples are TypeScript, Livescript, CoffeeScript, Babel, etc. Pre-processors help build JavaScript projects by writing JavaScript in a different way. For ruby dev's transitioning into the frontend world CoffeeScript uses many ruby like syntax and logic conventions. LiveScript(which IMHO is terrible) is probably for JS devs who what a different pearl like JavaScript experience. Babel allows for modern JavaScript(like JSX and ES6) to be cross-browser friendly, even for IE(which is the worst by the way).

#6 JQuery

Okay, I think for most seasoned devs the reasoning for JQuery being on this list is obvious. JQuery is really useful. It makes manipulating the DOM a hundred times easier and to use it with other frameworks/compilers/libraries doesn't require any bindings. If you're new to JQuery you're probably wondering whether I've gone insane, I have not. JQuery syntax makes it easy for JavaScript to understand when it's looking at JQuery. Literally any and all JQuery starts in a $ sign and is inside of parenthesis (making it call ASAP). So if I wanted to use JQuery with any other JavaScript framework it can be in the same file all it requires is the standard JQuery separation.

#7 BulmaCSS/Bootstrap 4

Most devs probably don't know BulmaCSS but it's a utility-first CSS framework that's based on flexbox and is honestly amazing. You really should check it out. Bootstrap 4 is probably one of the most useful and well known CSS frameworks and at the same time one of the worst I've ever used. I don't like Bootstrap and because of my bad experience with it I stayed away from utility-first. Bootstrap is probably the most popular alternative to TailwindCSS for utility-first frameworks and most employers look for Bootstrap devs, if that wasn't the case it wouldn't be on this list.

#8 Tooltip JS libraries

Tooltips 😈. They're probably the least useful html global attribute. They're genuinely ugly, and can be replaced by pop ups. With that said there are libraries like popper.js and tippy.js (both supported by Github) that take your tooltips to the next level. Check them out, it will remove the hassle from pop ups.

#9 Vue

Most of you are probably angry at me for putting Vue so close to the end of the list. My reasoning is simple. What Vue provides can be replaced by, at least, 2 of the items above it. Nonetheless Vue does deserve to be here. It's a very well known framework and websites like devdojo use it. Vue makes it easy to create reusable components, with a lovely design. Sounding familiar, that's probably because Svelte, and React offer something similar, the only difference is that Vue doesn't have the speed of Svelte, or the efficiency of React. What Vue does have though is a good build, making it easier not to write bad code. Despite it's faults Vue is popular and being familiar with it isn't tasking like Angular or JQuery.

#10 Figma!!!!!

I know that this isn't really the kind of resource that you're expecting, but let's be for real Figma is awesome. Not using Figma or a tool like it only makes your life more difficult.

That's it Folks!!! If you got this far that's 🤯

P.S. Hope this post doesn't fall under TL;DR

Explain Git To Me Like I'm Five

Sean — Tue, 28 Jul 2020 15:49:27 +0000

What's git? How does it work? What is it used for? Why do I need it?

I've Got Something Cooking

Sean — Tue, 28 Jul 2020 15:13:39 +0000

So It's Been A Bit...

I haven't posted anything on dev for a while. I've been working on some good content, and a few projects that I want you devs to check out once I'm done. I've mainly been busy with a note app that I'm deploying and hosting using google firebase. I'm launching the website first, along with the google extension for a better experience. By December the mobile version will also be launched. I know that I'm not the only one working on something big right know. The quarantine is forcing all of us to be at home, surely someone's genius must be revealed during the lock down. Do any of you have something you're working on that'll be done soon. If so write about em in the comments.

How can I update a JSON file using fetch?

Sean — Mon, 20 Jul 2020 13:06:38 +0000

Fetch

I just started using fetch to make requests over http. I used to use axios, but I don't any more. I need to make changes to the json file using fetch, but I don't know how. What can I do?

What are you currently working on?

Sean — Tue, 14 Jul 2020 14:03:08 +0000

What I'm working on

I'm building an android native note taking app.

What's The Slickest Effect or Animation You've seen that only uses CSS?

Sean — Tue, 23 Jun 2020 16:13:42 +0000

Talk about creative, am I right? 😆

Need some inspiration, any body know any cool effects?