DEV Community: Jaden Concord

Feedback appreciated for prototype app

Jaden Concord — Mon, 06 Sep 2021 21:40:31 +0000

I bit ago I started an experimental productivity app for task management. It is unfinished and solely experimental.

I would like feedback of the efficiency of the app for task management and the sufficiency of features. Note: passkey and user data are unencrypted as this is only an experiment.

What I leaned from an HTML fundamentals cource

Jaden Concord — Sat, 03 Apr 2021 00:40:03 +0000

Being a self-taught developer hobbyist, I thought it would be a good idea to expand my understanding by taking an HTML and CSS fundamentals course at my community college while I am getting my associates.
I have taken a Coursera course and studied fundamental practices for web design and development, but I wanted to see what I could learn by formally going through a course about the fundamentals before I go to university.

The Course

HTML is so simple, "it's like Legos". Going through this course with something I am fairly familiar with, felt very tedious and as if I was not learning much or anything at all at times.

Accessibility

The first topic of the course was accessibility. Accessibility was not something that was extensively familiar with. Learning about the importance of accessibility was interesting. Here are some of the things I learned from the topic:

What I learned about accessibility

Meeting accessibility is required by law in some countries for web sites
10% of internet users have a disability (or something like that) says W3 I think
So many (most) websites or apps fail in some way in accessibility such as keyboard navigation.
Accessibility benefits not only the disabled but everyone
Implementing Accessibility greatly improves the sites visual and usability
W3 has specific color contrast standards that are important for impaired vision and easier readability of content.

Re-Learning the languages

Anybody can use HTML or CSS like how anybody can play Legos, but accessibility, techniques, and design principles are what I think are important. Learning new tags, style attributes and concepts were very interesting and have helped me out.

Some of the syntactical things I learned

familiarity with floating. I knew how to float and clear elements, but I now am able to understand it much better.
Less common tags such as figure, kbd, image and q I had not known before
New CSS properties like text columns and other random things I have never seen before
I never knew about normalize.css

Being Certified

I was able to get a free Microsoft MTA certification with the class. It is nice to know that I knew somewhat that I was certified in some way and not just looking at the MDN or W3Schools to learn everything.

Why I Recommend A fundamental course

The fundamentals allowed me to understand websites in a new way. Self-teaching allows me to get into more advanced concepts while the college course was able to expand my understanding about how everything works.

My favorite fonts for developing websites

Jaden Concord — Thu, 25 Feb 2021 23:43:31 +0000

Photo by Alexander Andrews on Unsplash

Here are my favorite fonts to use in web projects:

Ubuntu Font

As the name implies, the Ubuntu font is part of the Ubuntu operating system. I really like this font because of the uniqueness and smoothness. I always download the font and use it as my system font because it's so awesome. It's also free and you can download it from the Ubuntu page.

Comfortaa

This is also one of my favorites because of the simplicity of the font. You have to use it wisely as it spaces is not the most accessible of a font.

Least Favorite Font

Times New Roman is easily my least favorite font. Who thought it would be a good idea to make the most exclusive proprietor font standard in writing papers?

tip: you can find fonts at fonts.google.com

What are your favorite fonts?

I created a universal theme switcher widget compatible with my SASS framework

Jaden Concord — Thu, 25 Feb 2021 23:26:57 +0000

<script src="path/to/themewidget.js" charset="utf-8"></script>

That's all the code it now takes for me to add a theme switcher widget on any of my projects using my custom SASS Theme Frameworks.

You can demo it on my personal page which is a work in progress. The widget is on the bottom-right edge of the page.

It supports a couple of different theme options which I will later add more of. It also has 4 different theme varients to choose from which effect the dark or light theme type.

It works by fetching SCSS resources and SCSS.js to compile to a CSS file. It is far from optimized but it works with only a couple of seconds of delay to update the theme. It also uses the local storage API to store the theme and update it on page load. I eventually want to store the theme across every domain using the widget so it will be like a universal theme.

My Daily Side Projects This Week

Jaden Concord — Sat, 13 Feb 2021 01:28:14 +0000

So far I have created 4 little front-end side projects to test out frameworks I am working on.

Javascript Function Search

The first one was very simple and has the least functionality compared to the others. It is meant to be a site where people submit common Javascript solutions that you can search for. There is no back end for any of the projects because I am testing my Front-end frameworks.

Document editor

The second one I did was a simple document editor. I mainly did it for fun and because I wanted to make a simple content editor to use. You can download and save .HTML files and view them.

Hoy (Today) Time Management App

This app prompts you for weekly tasks, what tasks you have to do today, and schedules it all for you in work blocks. This is based on some articles I have read about productivity and work blocks. It is really effective and makes me work a full 6-8 hours of blocks. It also makes loud sound effects when the work blocks or breaks transition.

AppRender (to learn)

Another app I made was one to keep track of things that I am learning and want to remember. I constantly have things I am learning on sticky notes or paper so this is a good alternative.

How to Use the Web Console Helpers Commands in Firefox Developer Edition

Jaden Concord — Fri, 12 Feb 2021 19:06:39 +0000

I recently discovered special web console commands in Firefox Developer Edition. If you are not using Firefox Developer edition I highly recommend using it because of all the useful tools.

These are the top ones from the Mozilla docs.

Dollar sign selectors

I previously wrote an article about using dollar sign variable to make a shortcut to the document.querySelector. Now, this command is built into the JS console. Obviously, you need to declare the $ if you want to use it in your app.
If you do that, you need to put .bind(document); after the document.querySelector like,

let $ = document.querySelector.bind(document);

$0

$0 selects the element currently selected by the inspector tool.

copy()

It copies the input text to clipboard. Extremely useful when generating text in the console.

inspect($(query))

Select an element to view in the Inspector tab. Allows keyboard only navigation of the nodes.

More tools here

Color Palates for Web Design

Jaden Concord — Thu, 11 Feb 2021 23:18:08 +0000

The following was generated with theme generator.

Fancy Programming Words

Jaden Concord — Thu, 11 Feb 2021 21:43:37 +0000

Cover photo by AltumCode on Unsplash

I recently discovered a few interesting Latin based words used as programming terms. Here they are,

Idempotent

Having the same result for a given input every time. This means a function that returns the same result every time with the same input. Here is an example,

// Multiply argument "a" by 2 
const fun = a => a * 2;
fun(2) // 4
fun(2) // 4

The above is Itempotent because it returns the same value when it is given the same input. This function would not be Idempotent,

let counter = 0;
// Add counter to argument "a" and increment counter
const fun = a => a + counter++;
fun(2) // 2
fun(2) // 3

Predicate

This one is simple. It just means that the output of a function will be true of false. Example,

const userLoggedIn = user => user.status === 1;

Abstraction

Abstraction is the process of simplifying the code so that you hide major functionality. Basically, it is where you make your code organized and separate from the functionality of code. It is practically the DRY (dont repeat yourself) technique.

// Less abstraction
users.push({id: result.id});
// More Abscraction
addUser(result.id);

Serialization

Simply, Serialization is where you convert data from one application so it can be read by another application. Let's say you have a Javascript application that needs to communicate to a Python application. In the Javascript application, you would Serialize the output to a JSON file, and then the Python script would read the file and parse the text.

Immutable

Immutable simply means that the state of a variable does not change. It is like a const variable or an object with properties that do not change.

Operand

An operand is basically a function with a set of math operators like a => a+b*c

Ephemeral

Used to describe things that when changed, cannot go back to the original state. Let's say you have a simple object that you modify, you can not go back to the original state of the object so it is Ephemeral. Computer RAM is also considered Ephemeral because it is temporary.

Hard Code

This is one that most people might know. It means code that when done is hard to change. They are things that require manual coding changes to modify. Generally, Hard Coding things could a bad thing because you may not be abstracting the entire application.

Now go make an application that abstracts serialization of the output from an Idempotent operation using Ephemeral states to manage results from Immutable operations and set them by Abstracting them Predicatively.

Credit to FireShip and hackr.io

Side project ideas?

Jaden Concord — Thu, 11 Feb 2021 05:22:08 +0000

I working on a couple of little side projects to test out a JS templating framework, form/popup generator, and CSS framework that I am working on. So far I have made a search engine for common JavaScript functions or solutions, a time management app, and a document editor this week. I plan to write an article about the projects I have done this week at the end of the week.

Does anyone have any good front-end app ideas that don't require a server?

How to use the github API on your personal site

Jaden Concord — Sun, 07 Feb 2021 03:09:23 +0000

I recently came across the nice Github API that I used to create a list of my repositories on my personal site.

The API is very simple and it doesn't really need to be explained. To get the repositories of a user you would make a request to:

https://api.github.com/users/<USERNAME>/repos

And you will get an array of repositories of the specified user which you can use to create a list of your repositories. Here is a simple example:

  // Needs to be inside an async function
  const response = await fetch('https://api.github.com/users/<USERNAME>/repos');
  const data = await response.json();
  var result = [];
  if (data.length)
  data.forEach(repo => {
    result.push({
      name: repo.name,
      description: repo.description || '',
      url: repo.html_url,
    })
  });

That gives you a simplified array of your repos.

You HAVE to know the new question mark syntax in ES 2020

Jaden Concord — Tue, 02 Feb 2021 06:30:36 +0000

I just discovered the Javascript feature that I have been waiting for in a video by FireShip.
You know how dangerous it is to not prevent an error to something like this,

function getDataFromClient(data){
  console.log(data.items.name);
}

If the above were a node.js application, the client sent a response as an empty array, the server would simply cause an error and stop. Dangerous!
You could solve the problem like this

data.items && data.items.name

but if you forget to do that it is super dangerous.

Now, in ES2020, there is a new feature that allows you to easily prevent this. It looks like this

data.items?.name

Watch this video to know more about it.

I made this SCSS or CSS theme generator

Jaden Concord — Sun, 17 Jan 2021 23:32:24 +0000

This app prompts you for colors, sizes, and other things to create an SCSS theme file that you can use for a site or app. It actually uses CSS variables so you can dynamically change the theme with JavaScript. You can use it here. I like to use it when I am starting an app and I take a screenshot of the palate in the top left and make the design in Inkscape. The Randomize Theme button is very nice to use to find a good color scheme to start with. Here is a sample output of a theme:

I am still working on the SCSS output but here is what the output looks like:

As you can see, it is a very long file. That is because it gathers the SCSS variables, calculates new variables, makes them into CSS variables, and finally makes SCSS variables to use the CSS variables. Also it has conditions for it to be light or dark, light with dark, dark with light themes which makes it long.

I just made this so I haven't used the SCSS result so there will definitely be lots of changes but this is one of the apps that I plan to make, next is a CSS defaults theme using this site SCSS results.

Again the demo is [here](.
The Github repo is here and I would appreciate any issues that were posted.