[WP] 13.02.2023 | react-intro

 

fig 1.1 My react term notes in form of wall of term-bricks

-----------------------------------------------------------------------

Another day of oportunities and solving problems is gone. This day had to side plots revolving around the main plot. Once again i commited to develop front-end dev/web-dev skills. First chapter of this story was mainly filled with joy of react course exercise – word game. Basically re-writing myWordle1.0 project formerly developed in html/css/vanilla js environment. Sound review of react specifics and good mentoring from front-end dev Josh Comeau. I repeated all of the material i was working on in first two modules of a course. Part one – React Fundamentals and part two – Working with state, Part three – wordGameExercise make use of this knowledge.


The second part was doing PP tasks. This time i have prepared styling for login/register and password reset forms. I used grid layout for that. CSS styles was written using preprocessor(SASS) and making good use of modules.css feature. I took care of stylesheets so it is readable and maintainable using BEM convention. Ive managed to finish task and commit it into separate branch create & merge pull request to main branch and check auto-deploy on netlify. During testing i have noticed small mistakes in text eg on pass reset page there was login text on the button instead of reset password. Second bug which is required to be fixed is absolutle no responsive design of newly added forms.


Before jumping into PP job from 5 pm to 6 pm i took part in special meeting for Figma views design. It was great experience to take in design side of a PP page. It turned out that some of the views and vision is ready. As per Bartek the project design will be supported by Olga who is claimed to have considerable figma skills.


To sum up i can once again bring several React terms which i was studying today: props-drilling, context, links, css-modules, conditional-rendering(winning/loosing banner), component design, app scaffolding, providing key for mapped objects, object mapping, design with use of helpers(word checking function), working with ENVIROMENT_CONSTANT – NUM_OF_ALLOWED_GUESSES(this solution allows to improve maintainability of application by making it easier to change number of possible guesses in ) , working with external library solutions(range function from lodash), design of visualKeyboard, using handlers with arguments(arrow function), lilifting react state up, working with local data(array of five-letter words)


Exhausted but happy

g-marcin


Komentarze

Prześlij komentarz

Popularne posty z tego bloga

[WP] 23.06.2023 | subjects

Obraz
  fig 1.1 BehaviorSubject abstraction marble diagram       It is high time to write another part of angular basics revision. Last time i mentioned Subject object. It is also worth to describe other ‚special’ cases of Subject. The first is behavior subject. It is part of powerful tool for reactive programming called rxjs . When writing angular version of exchange app or mars-rover-photos app I was using behavior subject in following way. Start with declaring behavioral subject private field within your service. The following example ilustrates this step: private myDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>( null );     it will declare new private field with myDataSubject name and BehaviorSubject type. The value within <> braces is called type parameter and is a part of TypeScript generic types. In this case it would describe the type of values emited by this subject. on the right side of the assignment statement we can see basic javas
Czytaj więcej

15.07.2024 | simplicity

Another subject from the set of 97 things that every programer should know is simplicity. The most important thing designing software is to provide client with the functionality tailored to their real needs. Managers dont care about tools applied to obtain requested outcome as long as it gets the job done quickly and satisfy the requieements. On the other hand developers mostly need challenge and constant growth. As a consequence nowadays applications tend to be over-engineered and stuffed with additional libraries, frameworks with tons of configuration. Today ive also watched a youtube video of primagean. It was a comment on article titled "Radical simplicity". It is a reason why id written previous paragraph. The article was about technical overhead that is tend to be introduced within the aplications recently. The one good thought was that nowadays applications are able to do more stuff. The main thought was to use the bare minimum and be careful about introducing new d
Czytaj więcej

[WP] 05.06.2023 | angular-intro

Obraz
fig 1.1 angular application structure overview      Recently I have been re-writing one of my side projects using another js framework. Originaly written in react, after several days and long hours of scrolling and prompting it was re-shaped to Angular version . In this blog post I want to summarize the stuff I have learned about javascript frontend framework developed by Google . There are only class components. No function component nor hooks available in angular. Moreover it requires developer to use typescript straightaway without support for vanillla js which make it less available for beginners. Angular has no dedicated syntax such as jsx/tsx which enables to combine template, controller and styles within single file. It divides the responsibilities to separate view-template.html file and component.ts file which contains logic. It is a good moment to mention that re-renders of the ui uses diferent technique under the hood. Angular utilizes incremental DOM mechanism a
Czytaj więcej