Posted on

How to add scss to your Angular project fast

scss new niece

Of course as always there is a TLDR thing somewhere down there.
I come across this from time to time and I normally forget all about it…then I just end up always using css (come on I can not be the only one)

Lets get to it, you have either built or going to build an angular project. In the past i have seen it ask and say “you wanna css, scs,s sasax and …” other options.
so i’d normally select scss and then it just worked.

TLDR COMMAND FOR ANGULAR PROJECT ALREADY BUILT
If you have already built an angular project then run the following line of code.

ng config schematics.@schematics/angular:component.style scss

This should add the style as scss in your angular.json package
for more in-depth detail you can read up on the source. on the one that has 557 votes oh wait 558.

ANOTHER THING TO NOTE
if you get the following error:
“Error Module not found: Error: Can’t resolve PATH in PATH or “didn’t return string.

Be sure to update your component’s style location cause it will still point to your component.css file


In the reference above, they also show you how to add scss to a new project by use of the following command:
TDLR COMMAND FOR NEW ANGULAR PROJECT

ng new NEWANGULARPROJECTNAME --style=scss

Ok that’s it good luck
If this solution did not work for you, please feel free to comment. I know there never is a solution for everything.

Posted on

Angular how to generate a new project in to a specific directory

bird and snow

When you are starting you just don’t know what you can do at times. I have been in a situation where I already have a file on where I want to put my new Angular project but sadly my folder structure gets messed up completely.

POST note: You will need to have installed the Angular CLI first before doing this step.

So use this command line below to create an Angular project and place said project into a specific directory of your choosing:

TLDR

ng new angular-project --directory=./new-angular-project-file

This should sort you out. In development its important to keep your work space clean especially your git repo. It doesn’t reflect well if your repo is being reviewed or checked out.

Posted on

JavaScript What is hoisting?

adorable niece

Very important concept to understand, I’ll need to start with some context.

Context of Hoisting

We need to understand the life cycle of code and there are two main phases code goes through. The Creation Phase and the Execution Phase.

When does hoisting happen?

During the Creation Phase, the program will set all the global variables and if there are var variables declared they will be initialized with the value of ‘undefined’, upon the programs Execution Phase this will assign the value officially to the variable if the var is above the invoked function.

MDN definition:

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

My understanding of hoisting is:

The process of a variable(var, let, const) declaration a default value of undefined during the creation phase. Functions on the other hand upon starting up of the program are stored in memory source

https://youtube.com/watch?v=Nt-qa_LlUH0
Been through a few tuts and this guy explains it well enough for me to understand

The above tutorial also goes through other important concepts of JavaScript functions and their behavior when invoked.

Posted on

[newbie] sticky footer css, a solution

its my mums

(AS ALWAYS THERE IS A TLDR BELOW)

The sticky footer. If you have been searching for a while then i think you know what a sticky footer is by now (if not here is a good explanation of one. The challenge is that there is no short way of doing “position stay down please” like so:

position:stay-at-the-bottom-please-thanks-k-bye

You sadly need to know what is going on and what other components/elements are invovled in order to get the position of the footer right at all times…sticky footer style kinda times.

So we now know that there is no one position solution and no position: “sticky” is not an option<insert sarcastic tone>

please note the styles, the colors are horrible.

I tried with the min-height set to 100%, but no dice for me for some reason. The sticky footer is a tricky concept to catch. You need to understand the position property and also its relationship with the absolute position.

Think of the absolute position… its relative to the other style/component overall position.

(had to add a pause when proof reading the sentence)

If this doesn’t work..i would only imagine that the scope of your relative element is not aware of the style that has the position of absolute. Its ….relative to your project and how its structured.

The margin and padding being set to zero is to make sure that the “min-height” takes on the full page. In some cases you may not want to have a scroll bar showing when the page is blank.

TLDR

Of course this is what worked and made sense to me i’m open to update this post or remove it entirely 🙂 have a great evening. (Yes this is a repost on a footer topic that i tried to cover and understand and to which i didn’t understand, so this should work i’m sure of it)

html,
body {
  margin: 0;
  padding: 0;
  
}
.wrapper {
    min-height: 100vh;
    position: relative;
    background-color: rgb(227, 228, 231);
}

.content {
    min-height: 100%;
}

.footer {
    position: absolute;
    width: 100%;
    color: rgb(42, 63, 121);
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Notes:

html, body style updates is to ensure that the wrapper class takes in the whole screen size without padding

.wrapper has that min-height: 100vh (100% of the view height of the screen/device,
position is relative, think of it as a note of where this element is

.footer position absolute, accordance to the relative positioned element
bottom and left refers to setting the element relative to the other element and
place element at the 0th bottom left px of the screen…of the element

Sadly i only have an angular sample project, but it is better than nothing and the results stay the same this uses basic css and works on IE so.. apparently flex box and sticky footer doesn’t work for IE so i could be corrected on this.


Repo for your tinkering: tony2tones github

Posted on

[newbie]Dev notes: Basic checklist when starting a feature

As always there is a TLDR. Its been a while and yes everyday i’m still learning so much about myself and yadda yadda lets get on with it.

Thankfully i am blessed to work at a company where ‘Process is King’ (although this can be a good and bad thing…but that’s another story). As part of said process when it comes to stories/features we have a definition of “Ready”, this is a super important concept. This means that all questions have answers and you know as much as you can about the task/feature and there is no blockers or dependencies (i won’t go into detail but that could be anything from does the project actually run locally to do you need an API up for said feature to have you spoke to Big Phil yet?)

Each story/feature normally has its challenges and there are always unknowns and weird surprises…normally they just eat away at your time. These are the things you and the team will need to be concerned about and the developer that will carry this feature will need to make a decision if they are ready or not.

Now for the list , this is in no particular order.
*checklist listed here is credited to my current mentor fyi.

TLDR

  1. Do you have the requirements/BRS/documentation and have you read over the functional specs for the story?
  2. Are there any dependencies?
  3. Does the project I’m working on for this story run on my machine?
  4. Do you have a high level understanding of the story?
  5. Have you thought loosely about an implementation strategy?
  6. Do you have the designs necessary
  7. Is there a chance that you may have left the fridge open?

Overall there is always a lot of things to be aware of. The above list will help in most cases perhaps your project requires more particular checks before you can be “Ready to Dev”.

Of course if you feel that you do not understand the story or feel its too much for you or something on your checklist is not met, you must speak up to your Business Analyst or Project manager. This is super important to not set yourself up for failure.*

I am not saying that this list will take care of all the checks you need, but make a list that makes sense to you. This post is just expressing my opinion based on my experience so i’m happy to adjust my posts if they are not fair or correct….or if i have to add anything else
Have a great day.

Readers contributions

If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright.

Aaren Reggis Sela

Posted on

How to merge the latest dev code to your branch

Hello and welcome back there is a TLDR section with steps below…

Ever been working hard on a feature to only realise that there have been some major updates on the Develop branch or even worse depend on a completed feature that is currently on the dev branch (well that is just worse for me in any case)

So you are working on Feat/01 branch which you have branched off develop (a while ago) , but then as you try to merge your code…boomy you get a merge conflict. This does tend to get a bit tricky depending on what sections or components of the app you are working on.

So you need to get your branch up to date with the dev code cause you need it to finish the feature..or you’ll hit some merge conflicts.
To Merge the updated code into your feat/01 branch, how you do that?

Well, via the command terminal. Here are my steps that I would take.

TLDR

// Currently on feat/01 branch
// Step one
git fetch origin // This will get the latest code from the repo
// Step two
git checkout develop // or switch to the branch with the latest code
// Step three
git pull // This will pull the latest code that is on the develop branch
// Step four
git checkout feat/01 // check into the branch you want to merge to
// Step five
git merge develop 

// this will merge develop's latest changes INTO feat/01 branch

There will also probably be some merge conflicts which should be simple to tackle depending on what tools you are using. To resolve merge conflicts I normally use the Visual Studio code text editor to sort out incoming changes(incoming from origin) and current changes(changes from your local) or git tortoise which has a whole ui for merge and resolving conflicts(I know that there are many others for sure). Just go through each conflict step by step and there you have it. you are more or less inline with Develop and you have included all your changes so you can keep on cracking forward.

Posted on

Git how to add a comment and quit VIM

This happens to me from time to time. When you are trying to merge with some local branch and there are some conflicts you want to fix on the fly then this terminal asks you to add a comment so you do and you don’t know how to exit….

Terrifying stuff I know so here is how you close that VIM terminal. After adding your comment and looking lost enter this below:

:wp

For definitions and more detail check out this source

Posted on

How to delete a branch locally

This is just a personal post on something ,I keep forgetting how to do.
So i am putting it where I know where to find it.

git branch -d <branch name>

For more information you can checkout the source

Posted on

Optimising images

My previous post I got carried away and I wrote a novel about keypresses.

Anyway, I’ll continue to keep these posts short and helpful. I do apologise if i get carried away about a point.

Ok so you want to optimise your images and quick. Go to this site and download the PNGGuantlet for your OS of choice.

Chuck your images in and watch them go down to size whilst keeping most of its quality.

wait for the green bars to finish then check the kb sizes of your images again.

The way how i came across this app was by a client. A very senior full stack developer I had to do a piece of work for him finding some assets and look it took me a while and i got lazy and just grabbed the first few.

The images I found were different sizes (i.e. 525px X 525, 1025 X 1025 and so on). I was requested to optimise the images and reduce their size. I know how to reduce their size but not optimise them.. So my code did not pass his review and he shared with me this link and told me the steps to use it and why its good. So ya have fun optimising images with PNGGauntlet

<Update>
There are loads of image optimising applications. I made it sound like this was the only one it seems, so ya there are plenty I was just recommended this one.

Posted on

JavaScript Keypresses keyup keydown keypress

As Always I try to make my blog cater for peeps that are just looking for concise answers, so if you scroll down there is a TL DR section below. If you are curious of my thoughts then keep reading.

My knowledge of keypresses consisted of the brief summary of “you press a key and you can make something happen”. Turns out there is a bit more to it.

Keypresses have three different trigger points. I’m going to put my naive understanding of them first, then what MDN says cause that is the best source of truth out there in my opinion. I also used StackOverflow.

First you have keydown

My understanding of a Keydown is the action of when the button is pressed, so as the key is pressed down you can set an action or trigger something from that point.

Unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.

from MDN

To sum keydown: Keydown will trigger for all keys pressed(odd ones being ctrl, shift. delete..etc). If you press any key thats a keydown.

Second you have keyup

My understanding of a key up is the “release” action of the keydown action. So you can set an action upon lifting your key from a pressed state.

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase “a” will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase “A” is reported as 65 by all events.

from MDN

To sum up keyup:. It trigger upon the release of a pressed key. Don’t worry MDN can be intimidating at times. It took me a while, but they are saying a keyup will trigger with a value of what key was pressed. Also, I think MDN has already moved on tooo..

Thirdly the keypress

My understanding: Keypress is the full action of just typing a key. so hit a key and let go and you have yourself a keypress buddy.

The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don’t produce a character value are modifier keys such as Alt
, Shift
, Ctrl
, or Meta

From MDN

Ok, so my understanding of a keypress was a bit off. It appears to be including all chars that set a value and not other keys like shift, control, alt…etc that don’t produce a character. According to MDN it appears that the keypress is deprecated so you would just need to be aware of that when using keypress.

I never in my life thought that someone could complicate a key press, but here we are 2020 virus is out. Try to stay inside guys ok.

TL DR

The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user releases a key.
The onKeyPress event is triggered when the user presses & releases a key (onKeyDown followed by onKeyUp).

from stackoverflow

In my defence I’m not as technical as MDN, my theory was around more towards what the stackoverflow post said.

I’ll leave you with that guys I really hope that this helps you out and helps you know that there is a bit more to a keypress than meets the eye.

On a side note. I got some positive comments on my previous post. Thanks so much for the support I’ll continue posting my findings and sharing the knowledge to help myself and others. I was so chuffed in fact i made a live sample of some javaScript and keypresses right here enjoy.