g-marcin-journal

  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 assignmen...

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 DO...

fig 1.1 redux-principles; <source: Tomasz Ducin presentation on frontend architecture>        Hi, in this blog post I’d like to introduce you to redux which is complex state management tool for web applications. I will describe it from a react point of view but it may be used with other frontend frameworks as well. Redux is recommended to be implemented using redux-toolkit - a set of utilities which facilitate developer experience during redux logic implementation. One of redux-toolkit authors is Marc Ericsson (that guy with simpson avatar) To begin with we need to install three packages: react-redux, @types/react-redux and @reduxjs/toolkit. The next step is to create store. Store instance is initialized with configureStore({reducer:{<import your 1st reducer and put its name here!>}) utility. It is also a good location to declare types for rootState(may be called App state) which is main representation of the application state and dispatch....

     fig 1.1 react-context scheme ---------------------------------------------------------------------      One of the way of sharing/transporting data between react components is context . In comparison to props drilling it doesn’t require you to pass the data through all of components until you reach the desired one. Context allow you to describe the data in single place and get it in another. Lets look into how we can apply context to our react app… At first it is good to create /contexts folder in as a subfolder to /src folder. This will be location of all of the future contexts as there can be more than one context per app. The next step is to create the .jsx / .tsx file and create an instance of context by assigning a createContext() function call to a variable. createContext function require to pass defult value of the context which will be used in case user will not specify the context value.. Please be advised that it should be done ou...

fig 1.1 smart-dumb scheme In this post I want to take a look at organization of components in web applications. During designing new parts of web application we may follow simple concept  of  smart and dumb  components. The aliases for above are  fat and skinny  components or  presentational and container  components. Smart componetns contain the core logic of the application including querying database, fetching external resources or utilizing third-party libraries. It does not care about redux. This information is often contained within state and passed to the other parts of application via  props drilling  or by the means of  context . There are few smart components within application. They mostly come as a single instances across the app. On the other hand – dumb components recieve and display data recieved from smart component. They may contain some logic including state but it has only applied in the context of dumb component eg. I...

  fig 1.1 git rebase scheme<atlassian.com> This post is about git rebase command. Rebase along with merge is a way to join main branch and feature branch. Merge is about forward moving change record. On the other hand rebase comes with amazing history re-writing features. In simple words rebase operation is about moving or combining a sequence of commits to a new base commit. To rebase current branch simply type rebase and put a commit_id as an argument. #git rebase <base commit id> . Changing a base of your branch looks as if you started this branch from totally different commit than origin. Under the hood git creates whole new commits and apply them to base commit specified within command. Let’s make it clear the branch starts from a different commit looks the same but contains brand new commits. It may look senseless but rebase have crutial meaning if it comes to maintain a linear commits history within your repo. One good example of git rebase application is the fo...

fig 1.1 i18next ecosystem scheme --------------------------------------------------------   i18next   is a library used for internationalization of webapp. There is a variety of library variants for major frontend frameworks. It may be included into a project by installing appropriate package(eg.  npm i react-i18next ) and creating langs folder. Within the langs folder we should include separate  language definitions  (eg. pl.ts). i18next object need to be  initialized  in index.ts file(src/common/i18next/index.ts)Within i18next  config  we can pass settings such as  fallback language (language to be used in case of missing translation). Language definitions  are recorded in form of nested objects with translation dictionary (key-value pairs) . They are exported to the components which require to be translated. Translation is done by use  translation function . After importing the instance of use translation funciton is passed ...

fig 1.1 polymorphism-example   ----------------------------------------------------------------------- In the next paragraph Id like to make a note about  polymorphism  in React. geekr polys – many and geek morfe – shape. It is a strategy/paradigm which assume components to be designed in a way that allows to use different html tags. Each html tag holds its specific  semantics  and it is important to use apropriate tags for intended purpose. It is necessary from SEO and acessibility – a11y/screen readers point of view. Lets look at an example. Navbar usually contain buttons and links which look exactly same. In html semantic rules button is an element which triggers a script/function when pressed. On the other hand a link or an anchor tag is a piece of text which onClick navigates the user to the whole new html page with adress specified in href attribute of anchor tag. Over-and-out g-marcin

fig 1.1 ref-forwarding scheme <https://dmitripavlutin.com/react-forwardref/> -----------------------------------------------------------------------   Ref forwarding…   it is a technique for automatically passing a ref through a component to one of its children. It may be used especially in   reusable component libraries.   Example of application: focus input of custom component on page loaded. Create a ref within App component. pass a ref as a prop to custom component recieve ref within custom component as additional argument eg function CustomComponent({…}, ref) assign received ref as ref attribute in primitive input node. Edit export instruction – wrap it around  React.forwardRef ( ) function eg export default React.forwardRef(CustomComponent)

  fig 1.1 seo keywords                     --------------------------------------------------------------------- To begin with  SEO . It is a short form for Search Engine Optimisation. It is name of actions taken to improve website  visibility and ranking  within search engine result pages. The more markup is serchenigine-friendly and easy to understand the better ranking of the page. There are two types of SEO strategies.  On-page  SEO is about optimization of webpage contents and elements. It involves content, structure and html markup of a website.  Off-page  SEO strategy is realised by improvement of page reputation and authority by link building and other techniques which happen outside an app. The names of basic SEO techniques are: keyword research, optimizing title tags and meta description. Actions to improve SEO: creating quality content, continously improving websites performanc...

  fig 1.1  node process lifecycle including blocking code ----------------------------------------------------------------------- Blocking code  is an operation in javascript/node that takes long time and thus make other tasks unable to process while it is carried out. We may take care of blocking code with async functions (it immediately returns a promise and asynchronously perform operation and enable other tasks to happen or child processes(not appropriate if there is a possibility of user creating numerous child processes. .then method lets promise to resolve – you provide block of code to be executed when long running process signalized with particular Promise ends and value is provided. .catch method is used to handle any errors thrown by long-running process. In the last paragraph I want to write about api testing with  jest (testing framework) and  supertest (integration tests). To install both tools type following commands prefix npm i :  jest, sup...

fig. 2 SSR diagram ----------------------------------------------------------------------- Server side rendering  – SSR is an approach to web applications in which html pages are rendered on server side and the information ready to display is sent to the client. The drawbacks of pure SSR approach are: rendering time, frontend app performance and problems with  SEO  – search engine optimizations.  Isomorphic rendering  – only first html is taken from server in this case SSR improves performance and SEO.

  fig 1.1 webapp architecture examples In todays blog post I’d like to mention  microfrontends architecture . Microfrontends is application of basic OOP paradigm of encapsulation in frontend applications. It inctroduces multiple independent components with own markup, logic and styles, and designated to single task. It is approach opposite to monolith applications. Microfrontends may help to divide maintenance and development of application to diferent groups, delegate the responsibility and make deploys of each developed functionality independent.Finally each microfrontend is tech-agnosic and may be architected in different tech. The drawbacks of microfrontends solution is possibility of  duplication of dependencies . According to chat GPT there are three possible consequences of duplication of dependencies. Firstly increased bundle size due to duplicated files. Secondly maintenance overhead during updates of multiple dependencies. Finally it may lead to inonsistencies i...

  fig 1.1 enviroments example diagram ----------------------------------------------------------------------- Environment  is a single deploy with determined config. Basic examples of environments are development environment, staging environment, testing environment and production environment. SPA config is everything that is likely to vary between deploys. Information such as backend-API keys, Analitics-API(eg. datadog) keys, error reporting-API(eg. Sentry) keys, database url or json web token secret. Eg analytics are not required during development so it is disabled in development config file. There are three ways to manage config in frontend application. The first is  injection during buildtime . Each environment is deployed on separate container as separate docker image. All environmental variables are injected to appropriate image during buildtime. This kind approach increase safety of passed information as potential hacker do not know what kind of environments exist...

  fig 1.1 example of css-in-js solution CSS have a way to use variables. They have access to the DOM. The  scope  of the variable is a selector under which it was created. In this way css variables created using html{} selector will be scoped globally. Exactly same effect is possible to obtain using  :root{}  pseudoselector. There is another name for this feature. It is called css  custom properties . All custom properties are written in format: eg.  –color-theme: …value…  – css variables need to be prefixed with double dash. CSS variables may be accessed using  var()  function. Var function signature goes as follows var(css_variable, default_value):value. There are several  component libraries / UI frameworks  available out there such ass bootstrap, tailwind or mui. They provide low-level components for building web application. Using existing component library may reduce applications time of delivery but in this case it is a ...

  fig 1.1  API-design-node.js-v4 course app flowchart I’ve done via lucid charts. ----------------------------------------------------------------------- lucid chart url :  https://lucid.app/lucidspark/2c182164-3fb8-448c-b955-0c82599bb337/edit?viewport_loc=-483%2C-134%2C6144%2C3074%2C0_0&invitationId=inv_a6b0d9db-2a17-49be-bd71-66a123b90732 --------------------------------------------------------------------- I made revision of API design course v4 from frontend masters. Code was written in node js with  express  js framework. Final app have server app listening on port 3001. Two unprotected routers to register(create new user) and sign in. All other routes defined within  router  with \api prefix. Router has protect middleware which ensures that user who is trying to communicate on /api/… routes holds valid token Token  is created for each user during registration. Jsonwebtoken library( JWT ) provides means to combine user name, password and ...

fig 1.1 error handling in express   I would like to dedicate this post to  error handling   in express js and node js based application. Errors without handlers stop the servers runtime and crash the application. It blocks the runtime of the API. Error handlers role is to   prevent server from crashing   and return explicit   error message   and   status code . The first solution is to pass error handler as a  middleware . It will catch all  synchronous  errors thrown inside apps middlewares and handlers. app.get("/", () => { throw new Error("message") // error thrown within "/" route handler. }); Thus a handler is added to the  bottom  of the router stack and collects  all the errors which have been thrown before . Each time the error is thrown – error handler middleware is triggered. The structure of error handler is same as of a middleware except for  err  and  next  parameters are added. a...

fig 1.1 js logo and python logo  ---------------------------------------------------------------------- Today i took a ride with a time machine. Back to autumn last year where i started to learn programming in python. I made revision of python knowledge. Nearly whole day i was reading a book „Automate boring stuff with python” by Al Sweigart publish by No Starch press(known to publish another great book „Eloquent JavaScript” by Marijin Haverbeke.) Decied to cover whole book and improve python skills. My first experience with algorithm exercises and solving cs problems was done with python. Mainly i was using HackerRank.com service with great unit tests written for each and every task. Math operators, assignment operators, control flow statements such as if/elif/else conditional statements. While and for loops with continue and break instructions. Function definitions and signatures. Basic data structures – string, boolean, number, float. Copying primitive data structures. Complex d...

  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  `${ENDPO...

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 directl...