Dev Nuggets

  I'm using MongoDB Atlas (1) to host my NoSQL database. Creating an application with the MERN stack was very straightforward. However, after a few hours, when I tried to run the same application, Atlas displayed an SSL error message. How is this possible? What changed overnight? Something changed overnight, of course! When creating the cluster in Atlas, my IP address was configured (2), and by default, it expired after 6 hours. The error message was a bit misleading, although the problem was discovered after some investigation. Either re-whitelist your IP address or remove and re-add it to fix the error. I had a harder time finding the solution in Atlas, so I'm writing it down. Log in to Atlas, go to Network Access, and fix it there.  There is also an option to be able to access the app from any IP.  I prefer to restrict the IP. After the correction, it worked as expected. The Atlas MongoDB database is impressive (3, 4).   References & Notes MongoDB Atlas ...

  In Nugget 9 , a simple Blazor application was created using scaffolding with Entity Framework. This Nugget is about using the MVVM Design Pattern in this application.  Yes, I am squeezing this little app for all it's got! Why bother?  You might ask.  The simple answer is "Separation of Concerns".  Applying this pattern to this simple app implies subdividing it into distinct sections, each responsible for a specific aspect or concern. This design pattern offers numerous advantages, allowing different aspects of the application to be developed separately. It improves readability, maintainability, reusability, and, one of the most important, and sometimes overlooked, testability. MVVM In the  M odel- V iew- V ide M odel, the Model is an abstraction representing the data of the application.  This data could be from the database or provided by an API, or service, or a combination of sources.   The ViewModel contains properties, business logic...

  Around 2014, I was working as a contract full-stack developer. The client needed JavaScript a date range and wanted to see examples of what it looked like. For one of the examples, a jQuery, Bootstrap, and the Gijgo date/time picker was created. It had to be simple. This is the date range page, which is simple enough for a jQuery expert: It worked well during the demo, and something similar was implemented.  Today, I reviewed this range date picker, and after updating the Gijgo reference and refreshing the JavaScript a little, it all worked just fine. How would I do something similar in React? Much simpler. For a new implementation, a React Datepicker component was used.  Someone else did the hard work for me.  I reused the same project created in Nugget 7  and followed the instructions by HackerOne (1).  Keep in mind that there are many ways of doing this; I wanted to recreate the 2014 demo using React. Insanely simpler solution, even better, with less...

  The best way to add filtering to a Blazor QuickGrid is by creating an expression tree representing the predicate of a LINQ Lambda Expression Where clause. In  Nugget 9  , a simple Blazor app that supports CRUDE operations was created using scaffolding and Entity Framework.  Because the app loads a collection of items from the database and index component containing a QuickGrid component was created to display the collection of items. The above code represents the Index.razor component, which was modified after it was created.  Directives are omitted for simplicity. The component filters the collection of JobPosts by two model properties: JobPost.ApplicationDeclined , and JobPost.JobType using a checkbox and an input field.  The input field is defined in the ColumnOptions for the JobType PropertyColumn  and is bound to a component string variable, jobTypeSearch . Because this variable is bound to the input field, the variable is updated whene...

  I enjoyed myself writing Nugget 9 , but it is heavy to read.  Too many words.  I need to go back the "Nugget" concept: short, concise, and clear. 

One of my daughters is about to graduate in a few days, and she has a contract lined up already as a Game Developer! As a happy Dad, I am very proud of her accomplishments.   " Dad, how do I keep track of the employment opportunities I have applied to? " Good question; you need to keep track of who you send your resume to. Your email application outbox doesn't work well because some job applications are submitted online, and most of the time, the platform that handles applications doesn't send you a thank-you email. Plus, you could see the same job elsewhere and apply again by mistake, which is detrimental to us. You could create an Excel document and use it as a job submission database. You could search, filter, and add notes and comments after a phone call or interview. You could also make a record of any topics you might need to review before the initial contact with the potential employer based on the job description. This is practical, but not as fun. " How ...

  Why do we write blog posts? Sometimes, we write about very simple things. I think you should become a blogger if any of these situations apply to you: Learning something new. Share knowledge. You are a public speaker and would like to share your work.  An extension of Point 2. Market yourself. Need to improve writing skills. Writing is a hobby! Organize thoughts for a book. Need a Cheat-sheet. If you think of 20 other reasons, they are probably right.  So, yes, writing content for your blog is a good and fun way to connect with others; you never know if someone could benefit from your "wisdom". You'll find yourself reading your posts and looking for ways to improve them so the message comes across better.  In my case, English is not my native language, and I learned as I went, so the  write-publish-read-correct-publish-read  iteration is beneficial to improve my writing skills.  I have edited older posts to clarify the idea I wanted to convey.  ...

Creating a new React project with Vite is easy.  Vite is a fast and lean fronted build tool and development server, designed to streamline web development by leveraging native ECMAScript (ES) Modules for a faster and more efficient developer experience. To create your new app select or create a directory where this app will reside.  You will need node, at least version 16. On my computer I am running v20.11.0. Follow these steps.  I have a Windows computer and I am using the Windows Command Prompt (cmd): npm create vite@latest .  The tool will ask for a project name. Enter a project name and hit enter.  Next, we need to select the framework. Using the Up/Down arrow keys select React. Next we select the development language. Using the Up/Down arrow keys select Typescript .  That was my selection.   I could have selected JavaScript over Typescript, however, Typescript has many advantages over JavaScript including: Static Typing : errors can be caugh...