g-marcin-journal

  fig 1.1 ajax requests scheme  ----------------------------------------------------------------------- This day was especially hard step in my journey.Amount of time spent on a single exercise involving network communications using  http protocol  and ajax(older  XMLHttpRequest  or more recent  fetch()  interface) and basic display of received information shows how much I have ahead of me to learn. Anyway I am going to roll my sleeves up and continue in my strive! All surroundings were described. The exercise was mainly about fetching data and  conditionaly render  it on a screen. Peace of cake u say. It may be… but to be honest I had some probles in getting the requested outcome. I was given pre made  index page  and  API response  specifics. The  endpoint  was given. User input in search bar was to be passed to API via query params with GET request URL. Final url passed to fetch had form of  `${ENDPOINT}?searchTerm=${searchTerm}` . I used fetch method as await expression within asyn

fig 1.1 pierwszy project home page Today i was working on PP – side project react app. Firstly I extended  Dark Mode functionality  to l ogin, registry and password reset forms.  When working on the problem I have met some issues connected with component styling. Scss file of a login component was not responding to style changes. Moreover had a problem with register form. I couldnt apply  theme variables  to bacground property because whole login form route background was painted black instead of black background with grey login form on top of it(in dark mode). After long trials to approach this problem it turned out to be matter of  css classes conflict  between login, register and password resset forms. When i was writing above mentioned components I reused parts of login code/styles within registry component and password reset component. Only in case of register form I used  css.modules  style import method. Other two were imported directly. Consequently some of css classes were def

  fig 1.1 Promise handling flow ----------------------------------------------------------------------- Data fetching is a topic which I thoroughly revised recently. Back in the past http requests were made with  XMLHttpRequest  objects (XHR).  Fetch  is most recent way to do http requests. It is a  promise-based  so the value returned from fetch function is a  Promise . Promises let user to start long running asynchronous function and returns immediately a promise so that the runtime may handle other functionalities. Response is an object of fulfiled promise returned by fetch request. It contains field such as headers, status and other network information such as eg body of the response. The promise may be rejected in two ways. Explicitly rejected with rejecting callback(2nd argument of Promise constructors cb function). Implicitly rejected when error is thrown Async/await  is relatively new syntax which allows to handle asynchronous operations in more synchronous-looking way. More ov

fig 1.1 example tsconfig contents ----------------------------------------------------------------------   To   create   typescript project type: npx tsc –init. It basically creates tsconfig.json file within your project folder. Basic tsconfig.json file contents will be as follows: There are some settings such as no ts lint inside eslintrc.json config file.  Unary +  is an trick done in javascript. if we add + to single string it will be coerced into a number. Good example of using TS is to type API responses. With well-defined API response types TS will make sure that the form of the reponses recieved from the API will be always in the same form or TS will throw an error. When people with C languages use interfaces they tend to use capital I before the name of the interface –  interface Isomething {…}  . To make repetition of TS i reviewed an exercise of migration of app from JS to TS from Frontend Masters Intro to React Course. It was about adjusting simple pet-adoption react SPA fro

  fig 1.1 redux data flow ----------------------------------------------------------------------- In this post I am going to make a quick revision of past several days as I didnt update daily. I have decided to familiarise with  state management libraries  in react. As short intro it is worth mentioning that nowadays each of frontend frameworks have their own implementation of state management library. For react it is  redux , for Angular:  NgRx  and for Vue it is  Pinia . To begin with redux is a  state container  – a way to globally manage state within react app. It provides a way to maintain consistent state between client, server and native environments. Redux-managed state has also one great feature. Redux comes with a so called:  time traveling debugger  – a tool which allows to  track state changes.  Consequently it facilitates debugging process. This tool comes with  redux dev tools  addon nowadays available for main browsers. Use of redux lets web apps to be scaled more easily

fig 1.1  JWT structure  ---------------------------------------------------------------------- For the last two days i was rather working on stuff other than react. In this post i will list these things. I will start from short info that  localhost  is an alias for local adress  127.0.0.1 . O-ther thing is about form submit handling. In php form submitted data is wirtten in  form-url endcoded  format. It is similar to JSON( application/json ). For some time i was dwelling for a way to make  react app routes private/public  and grant access depending on if User has valid  token  within his local storage. Adittionaly all r equests need to contain token  as a value of authentication field of header to be successfully procesed. Current PP frontend react app views would divide as this.  Public  routes : home route, login route, register route, password reset route.  Private  routes: search, my Competences, User Roles, User profile. Solution divides into two part client-side solution and ser

  fig 1.1 three variants of useEffect() hook --------------------------------------------------------------------- Another post to sum up things that I have done. Currently I’m working on  side effects  handling in react. Because of characteristics of React it offers kinda sophisticated way to solve side effects in comparison to Vanilla JS ways.  useEffect (()=>{//useEffect logic return()=>{} //clean-up function,[]) is a hook that is responsible for that role. So far i realized that useEffects come in several variants. It may trigger on single componentDidMount event , event which is repeated on each re-render of the component or event which is repeated only in case specified pieces of state change. Dependency array  useEffect(cb,  [ ] ) is a location of effect dependencies. No dependencies defined – effect is done once, any deps – effect runs on change of given state and no deps array defined – effect runs on each re-render. If there are any pieces of state used within useEffect

  fig 1.1 useRef hook signature ----------------------------------------------------------------------- Looking back on a coworking session held together with a bunch of my friends today I have one observation. It is a great chance to improve your communication skills, review your beliefs about variety of things and get your job done. Teamwork if balanced and performed in favourable environment is potential. I started to learn about side effects in react. At first short revision of  useRef hook . useRef hook let us create a reference object with current property and assign it to a variable. The main reason of useRef hook existence is to refer DOM objects. It is done by assigning useRefVariable to ref property of html tag in jsx markup.(<input  ref={useRefVariable} ). The element may be accessed afterwards by calling  useRefVariable.current  property. Initial value is set to null. Side effects set contains fields such as: 1.Making network requests, 2. Managing timeouts/intervals, 3.

  fig 1.1 webpack bundling process scheme ---------------------------------------------------------------------- The time has come to review course notes. Before deployment of web application it need to be processed in producion build. create-react-app webpack commad is an easy way to prepare for development in react Another one is to use vercels framework Next js . Build is a further bundling of resources and dependencies removing unnecesary files/modules/packages, tree shaking and uglifying. Bundlers such as  Webpack, Rollup, Vite, Browserify  are responsible for bundling up application. At first bundlers need to be configurated via establishing and adjusting eg webpack.config or vite.config file Transpiling is a proces of reducing more abstract variant of language(eg JSX or TS) to simple form(eg JS). Codebase is set of code connected with one particular project or app. It may be that codebase is represented by single github repository. ./dist folder where transpiled ts to js files a

  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 mak

fig 1.1 react state lifecycle  -------------------------------------------------------------------- Hello and welcome back in another blog post about my front-end/UI programming journey. Recently I started to process second module of The Joy of React course. It describes use of basic react state control method – useState. State   variables   and state   setters   are declared within component function before it returns. useState allows to define   default   value for state variable – it will be assigned during   first render of the component (ComponentDidMount). After that each call to setState method will trigger react re render of the component. Module 2 also explains how to pass functions together with arguments usings JSX markup. It is possible to achieve by  wrapping handler in arrow function  eg. onClick = ()=>{handler(arg1, arg2)} Updating state is asynchronous / state arrays and objects shouldnt be mutated. The solution for this problem is declaring new variable/copying an a

  fig 1.1 simple hamburger menu ----------------------------------------------------------------------- Today I re-applied menu from Sunny Vibes to pierwszyfront. Now netlify build of our project is ready to use on small size screens eg 320px. I took me most of my daytime but efforts were finished and commited to pierwszyfront github repository on separate branch and merged with main. This task took a lot of effort to adjust stylesheets. At the end i made a lot of shortcuts by for example copying fuctions between components. I also created one additional stylesheet for hamburger component. What i missed to use was  module.css  webpack way to import styles into the components as webpack allows to import css modules and svg files. After weekly meeting for pierwszyprojekt i finish additional task about styling a login form. Other forms for registration and password reset will be done soon. I can honestly say that my basic skills of html and css significantly improved. I smoothly apply gri

  I recently learned new solution when passing pictures to some kind of component in react. If we have an Array with bunch of objects. One of the object properties represents img link. What is worth noticing is that all links are very similar to each other . If only number of picture is changing we can past full link into the component and dynamically change id number inside the string with template strings(„ and ${}).The array holding objects to present can include only id numbers of the pictures. To be honest it significantly reduce clutter in data structure(short part instead of full repetable link)Lets look at the example: ‚https://josh-bundler.com/img/avatars/004.png’ in this case only 004 is changing to 005 and so on… ` https://josh-bundler.com/img/avatars/${id}.png ` simply put the link inside backtics and make a id dynamic with ${}. Exploring new things g-marcin –Edit: Exploring helper libraries of JS such as  lodash ,  date-fns ,  validator.js ,  react-number-format  etc will

Today I commenced ‚Joy of React’  course . First module about fundamentals was like a revision to me. I solved easy tasks given and explained on the way without greater problem. The most interesting topics were: basics of react, jsx,  mapping   arrays,   props , props. children ,   destructurizing   props, types of react   renderers . The most interesting part of first module was  dividing/cutting pages into components . The task was first to cut site into the components and name them apropriately. After finished part a video of course tutor explaining his approach to the problem was displayed. It was great exercise. Moreover huge oportunity to see some signs of how these problems tend to be solved in real-life examples using specific language of industry. I  rewritten all notes  which i did during learning to my A4 paper notebook. Refreshment on react topic was also an opportunity for me to revise Sii course notes on react subject. Looking for the daybreak g-marcin

  Today i have been reading about   design patterns . A lot of effort was put into revise basic   OOP terms/concepts . Encapsulation(behavior reuse), inheritance, polymorphism, abstraction overriding, overloading, adding new instance variables.   Contract  – rules for methods overriding, function   signature ,   access levels (default, public, private, protected). I learned that   only methods may be overriden . On the other hand instance variables may be   re-assigned   but it happens rarely. inner class is a class defined within another class; ( non-public class ). End of inheritance line may be explicitly stated with  final keyword(java) Polymorphic arrays , return values and arguments was a piece of great discovery to me. Basically polimorphism is possible because  subtypes inherit types of all supertypes  – ergo every time supertype was used as a reference somewhere in code one of its subtypes may be placed there instead of parent. Defining  super class  developer specifies contra

  Yppieyayey ! my first blog generated with little help of WP has come into life. This is a test blog message. My intention is to publish effects of my ups and downs, achievments, challenges and other mysteries met during learning web-development including front-end . So fasten your seatbelts, stay tuned we’re going into adventure. Greetings g-marci n