Posts

Showing posts with the label JavaScript

Creating a Responsive Image Component in Next.js with TypeScript

Image
In this tutorial, we'll create a  ResponsiveImg  component that uses the Next.js Image component for optimized  image  rendering.   Introduction The ResponsiveImg Component The ResponsiveImg component accepts properties for both mobile and desktop versions of the image. It uses the useEffect and useState hooks to determine the screen size and adjust the image properties accordingly. Here's the complete code for the ResponsiveImg component: /**  * ResponsiveImg component that renders an image which adapts to screen size.  * It uses the Next.js Image component for optimized image rendering.  *  * @component  * @param {ResponsiveImgProps} props - The properties for the ResponsiveImg component.  * @param {Object} props.mobile - The properties for the mobile version of the image.  * @param {string | StaticImport} props.mobile.src - The source of the mobile image.  * @param {number} props.mobile.width - The width of...

try...finally in JavaScript and TypeScript

Image
 In JavaScript, you can use try...finally to ensure that certain cleanup code runs regardless of whether an error occurs. This is useful for releasing resources like memory, files, or network connections. Example: Using try...finally for Cleanup Here's an example of how you might use try...finally to ensure that a file is closed after it has been read, regardless of whether an error occurs during the reading process: const fs = require ( 'fs' ); function readFile ( filePath ) {   let fileDescriptor ;   try {     fileDescriptor = fs . openSync ( filePath , 'r' );     const buffer = Buffer . alloc ( 1024 );     fs . readSync ( fileDescriptor , buffer , 0 , buffer . length , 0 );     console . log ( buffer . toString ());   }   catch ( error ) {     onsole . error ( 'Error reading file:' , error );   }   finally {     if ( fileDescriptor !== undefined ) {       fs...

Hashing password in Next JS against rainbow table attacks with a salt for login page

If you want to send a username and password to the server side in nextJs and check if it is correct to continue the identification process. In this article I will explain how and explain why it is important to add salt to a salad 😁 First I will explain why hashing passwords with a salt is an effective defense against rainbow table attacks . Here's why: Rainbow Tables Explained : A rainbow table is a precomputed table for reversing cryptographic hash functions, primarily used for cracking password hashes. Suppose an attacker has a database of hashed passwords obtained from a compromised system. If these passwords were hashed without a salt, the attacker could use a rainbow table to look up the hash values and find the corresponding plaintext passwords. Rainbow tables are feasible because they can be precomputed for all possible plaintext passwords up to a certain length and complexity. The Role of Salt : A salt is a random value that is added to the password before it is hashed. Th...

React lazy component (import component)

Image
Let's face it - there are some problems with React & Webpack. When I create a Webpack bundle - All the files (js and css) are merged. (remember files Name Must Start with Capital letter- js , css,..) It means that if I have some styles with the same name, the style will be applied on all the elements. Ex: In A component - there is an element like this: <Button className="mybutton" label="close" /> with style like this: .mybutton {color:red} In B component - there is element with the same class name <Button className="mybutton" label="open" /> So because I used the same style css class name - the Webpack bundle merged the css files of all the components, its means that we got red color to all components that use the same name. In the example component B got red color for the button. I call it a bug (not a feature 😀) In my project I created an app.js. In this file I import all the components. There, I noticed that as I mentione...

SharePoint 2013 - Get Item Url by REST API and Ajax

Hey, This time I will present code to get client-side item var  urlRequest = RoiGetItemUrl(item, listName, rootUrl);                     urlRequest.done( function  (data, textStatus, jqXHR) {                          var  path =  "" ;                         jQuery.each(data.d.results,  function  (i, result) {                             path = result.EncodedAbsUrl;                     ...

An error occurred while processing this request

Image
I recently started to develop a web form with knockout JS. The system is running on SharePoint 2010. The data given / taken  to  the form with JSON through WCF services. I had a problem, I did not want that the service will be expose to web. To prevent exposure, created casing in the SharePoint an Application Page. The WCF data services and any entity framework written in framework 4.5, and as you know that SharePoint 2010 and with the Application Page written in 3.5. This means that every reference to in the form of entity framework like linq or lambda expressions written in framework 3.5 - which created (and still creates) a lot of problems. I will present you one example of the problem we encounter - but Google unfortunately did not help. The following code in FW3.5 not working in Client Data Service if (ctx != null && ctx.UsersContext != null ) {      string username = "username" ;      v...