g-marcin-journal

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 to t variable. Whenever translated text is required new rec

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 performance and user experiences. SEO is ogoing process and need constant improvement. Ref forwarding…  it is

  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, supertest, @types/jest, @types/s

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 if two differen

  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. The second p

  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 trade-off for unique identity of developed project. Reading

  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 JWT_SECRET into unique token. Token is

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. app.use((err, req, res, next) => { // block of code to

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 data