Forem: Julian Gaston

I posted this over a year ago, and unfortunately, it's still relevant. Please take time to consider your mental health and take a minute to appreciate the things you have accomplished.

Julian Gaston — Thu, 16 Oct 2025 20:13:24 +0000

Julian Gaston

Jun 19 '24

Developer Mental Health Tips

#webdev #mentalhealth #beginners #productivity

Comments 17

3 min read

You're loved by someone somewhere. ❤️

Julian Gaston — Thu, 05 Dec 2024 18:41:52 +0000

Developer Mental Health Tips

Julian Gaston ・ Jun 19 '24

#webdev #mentalhealth #beginners #productivity

Trying out Boost!!

Julian Gaston — Tue, 03 Dec 2024 07:53:23 +0000

A Guide To Using Nivo with ReactJS

Julian Gaston ・ Dec 11 '23

#webdev #javascript #react #beginners

Neurodiversity and Developers 🧠 --> 💻

Julian Gaston — Thu, 21 Nov 2024 23:16:47 +0000

If you enjoy the article consider buying me a coffee ☕

Neurodiverse "Techies" 🙋

The tech industry is, by its nature, innovative and creative. A big part of cultivating this dynamic is drawn from the ethos of neurodiversity – the concept that people with different neurological conditions are valuable and unique. However, as the tech sector continues to embrace diversity of cognitive experience, it is important to consider what this means for neurodiverse developers.

Challenges We Face 🔥

Neurodiversity covers a wide range of conditions including autism spectrum disorder (ASD), attention-deficit hyperactivity disorder (ADHD), dyslexia, etc. Author Anne K dreamed of being a novelist, but her dyslexia made reading difficult. Thankfully, Neils Bohr taught her another way to write – ‘thinking with the hands’ as it’s known in ASD circles. This variety fuels innovation and different ways of thinking (for example, someone on the autistic spectrum may excel in detail-oriented work). However, people can’t be dumped into preset categories and expected to act a certain way, as that’s an easy way to create fail-prone systems. Neurodiversity comes with its own set of challenges: difficulties with conventional human interaction (writing, speaking, or communicating in teams), requires accommodation in the way the workplace operates.

A Little Paradox 🔍

The same developers that are creating tools to help with mental health are plagued by mental illness themselves: anxiety, depression, and burnout being particularly common. The pace and pressure of work in the tech industry, followed by long working hours and a constant expectation to perform at a high level, can be especially hard on mental health, and for developers who come to work with a neurodiverse condition, these stressors may impact both their mental health and performance on the job.

Building Blocks ✅

Providing a welcoming work environment could ease these problems, for instance by introducing flexible working hours and considering specific needs on a case-by-case basis, or by providing a culture where communication is encouraged and built around neurodiverse feedback. Access to mental health services, as well as confidentiality, might also enable the addressing of such problems.

Importance of Self-Esteem 🌟

To build their self-esteem, neurodiverse developers need to feel that someone recognizes their contributions and sees their potential. The process of improving a neurodiverse developer’s confidence through continuous education and training, mentorship programmes and positive reinforcement helps companies shape a culture that welcomes diversity in the workplace. By encouraging neurodiverse employees to take pride in their unique skills, they develop a real sense of belonging, which can significantly improve their confidence.

Tools and Awareness 🔈

Neurodiverse teams require neurodiverse managers to succeed – and managers can become skilled at inspiring and harnessing diverse talents by receiving neurodiversity awareness training and undertaking inclusive leadership training. Tools such as tailored guides for feedback systems, personalized workspaces, and individual development approaches can help them execute their managerial role.
One way to achieve this is through the promotion of openness about neurodiversity and mental health. This can take place through training workshops, initiatives for advocacy and the disclosure of success stories from neurodiverse individuals. Raising awareness of the barriers that neurodiverse individuals face in the tech sector, in any field, and dispelling myths about neurodiversity and mental health challenges enriches the environment of the sector with a wider range of ideas and possible solutions, to the benefit of all.

Conclusion 💣

It’s good to recognize neurodiversity as a strength across the tech industry. Neurodiversity can lead to greater innovation and enrich workplace dynamics. If companies knew how to cope with the challenges of neurodiverse developers, they could utilize productive teams and create an enhanced workplace environment. If tech companies were to become more inclusive of these qualities, it would lead to a well rounded approach in technological development and, ultimately, cultural/ workplace progression.

For general mental health tips, that are related to this --> Developer Mental Health Tips

Big O Short Explanation

Julian Gaston — Thu, 20 Jun 2024 06:23:16 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Big O notation is indispensable when analyzing algorithms, because it offers a common, accepted way of measuring and comparing efficiency. Big O tells you how an algorithm grows with an increase in input size, helping you to optimize code to improve performance. This enabled developer to effectively analyze their code.

Additional Context

No additional context.

Developer Mental Health Tips

Julian Gaston — Wed, 19 Jun 2024 15:39:39 +0000

Introduction

Starting out as a web developer can be exciting, daunting and exhausting. Whether it’s a night of coding into the early hours, or an unexpected bug that takes you back to the drawing board, the mental stimulation involved in your work can be an intense experience. But it needn’t take a toll on your mental wellbeing. In this guide, we explore some ways to retain a lightness of touch, and a sense of humour, navigating the chaos.❤️

If you enjoy the article consider buying me a coffee ☕

Strategies for maintaining mental health

Strive for balance. If you’re a seasoned developer, perhaps you can bang out some awesome code for a few straight hours. Give it a shot, but learn to feel when it’s time for a break. The Pomodoro Technique is a great combination of purposeful work (25 minutes of hardcore coding) followed by a short and purposeful break to recharge and refresh your mind (5 minutes). That sounds great, but what if you’re just building your skills or angling to move into development from another department? As you start learning, try to dedicate just a few minutes of daily downtime to coding. And finally, get away from your keyboard. Make sure you’re devoting time to discrete, non-code related activities each week that you can look forward to and contribute towards chipping away at burnout. After all, the best developer in the world probably needs a drum set at home to unwind from looking at screens too!🎵

Cultivating a healthy mindset

Build yourself a harmony surround-sound system. Get buddy-buddies and buddy-buddy communities. Check out online forums and be present at meetups, so you can have a ‘chit-chat’ with other developers and console yourself with the knowledge that you are not alone in the code world. Rant about your frustrations, and laugh together with fellow-coder buddies as you recount the silly bughunters inhabiting your debugging memories and nightmares.🧠

Laughing through the bugs: a guide to staying sane as a web developer

Laughter is your sidekick. The next time a bug makes you go ‘WTF?’ laugh about it. It sounds cliché, but a good hearty laugh relieves stress. Create an AI-bug meme collection, follow funny programming social media accounts (eg, the bingo-card-creator using their platform to spit out programming jokes), or email a colleague about the funniest bugs that happened to you during the week.😆

Embracing the chaos: a web developer's guide to staying grounded

Learn to love the messiness and the mistakes. Coding is fundamentally iterative, and accepting that and not fighting the trial-and-error nature of it can lead to less stress and, ultimately, more resilience. Focus on the process, not the output, and celebrate each small win along the way. There isn't a single developer who didn't make a ton of mistakes along the way: every mistake is a practice move.🏃

Conclusion

Alongside the time pressure of development work, prioritizing and maintaining sound mental hygiene is also about maintaining sanity. Through applying some of these strategies, you can develop your grit outlook, maintain or restore your equanimity, and even develop an amused detachment to invariably hectic situations. Enjoy the ride as much as the destination. Happy coding.💻

For Neurodiversity Awareness check out --> Developer Mental Health Tips

Highcharts and React

Julian Gaston — Tue, 18 Jun 2024 06:24:58 +0000

Introduction

React has drastically simplified front-end development and now it’s widely used, and for good reason. It’s a flexible and lightweight framework that’s easy to learn. Combining React with powerful libraries such as Highcharts is a perfect fit, given the power of data visualisation and React’s ease of use. This article covers how to integrate Highcharts data visualisation library with React, from building simple components to accessing the more advanced functionalities, as well as providing tips on testing your components.

Useful Links

API Reference: https://api.highcharts.com/highcharts/chart
Another Great Article: https://medium.com/@Mahdi_Haris/highcharts-implementation-in-react-project-2c09349a6329

Introduction to React and Highcharts integration

Highcharts (a pure JavaScript charting library with more chart types than you could shake a stick at) has been embedded easily into the application thanks to the modern CSS and JavaScript frameworks such as React. The charts are encapsulated in React components, so they’re easy to keep up to date and under control.

Building a basic Highcharts component in React

We’ll start by showing how to build a simple line chart using Highcharts in a React application. First, install the necessary packages as dependencies via npm: npm install highcharts react-highcharts –save.

Then, import these packages in to a React component and bootstrap a basic chart:

import React from ‘react’; 
import Highcharts from ‘highcharts’; 
import HighchartsReact from ‘highcharts-react-official’; 

const LineChart = () => { 

const options = { title: { text: ‘Simple Line Chart’ }, series: [{ name: ‘Sample’, data: [1, 2, 3, 4, 5] }] }; 

return <HighchartsReact highcharts={Highcharts} options={options} />;

} 

export default LineChart;

This little bit of code will render a simple line chart for you inside your React application.

Using Highcharts APIs in React for dynamic data visualization

With React’s state and lifecycle methods — think, as an example, of events such as mounting and unmounting (or, just as important, updating) — you can hook Highcharts APIs to dynamically create charts. For instance, if you were to get data from an API and plot it in the chart, your React code might look like this:

import React from ‘react’; 
import useEffect, useState from ‘react’; 
import Highcharts from ‘highcharts’; 
import HighchartsReact from ‘highcharts-react-official’; 

const DynamicChart = () => {  const [data, setData] = useState([]);  

useEffect(() => {  fetch("https://api.example.com/data").then(response => response.json()) .then(data => setData(data));  
}); 

const options = { series: [{ data }] }; return <HighchartsReact highcharts={Highcharts} options={options} />; }

export default DynamicChart;

And that would be it; your chart is now updated when new data comes in.

Testing Highcharts components in React applications

Testing is a vital component of any application; for the Highcharts integrated React components, you can use testing tools such as Jest and React Testing Library. Here is a basic test to determine whether your chart is being rendered as intended:
JSX tested components.

import React from ‘react’; 
import { render } from ‘@testing-library/react’; 
import LineChart from ‘./LineChart’; 

test(‘renders line chart’, () => {  

const { container } = render(<LineChart />);  
expect(container.querySelector(‘.highcharts-container’)).toBeInTheDocument(); 

});

Such tests maintain the integrity of your charts in an application.

Best practices for integrating Highcharts with React

It might be a bit verbose but, following recommended practices for integrating Highcharts with React will result in good performance and maintainability. Isolate chart configurations: Try to keep Highcharts configurations in separate files if possible, to make it easier to manage them latter.Use React hooks for dynamic data: It’s a good idea to use useEffect and useState hook to manage and render data in a dynamic way. Avoid unnecessary re-renders: Using React.memo is a common way to prevent unnecessary re-renders of the chart.Keep your theme consistent: It’s a good idea to keep your theme consistent across the application.

Conclusion

With React, you can enrich your Highcharts solutions with modern JavaScript features and create powerful data visualisations that adapt to the web page, settings and user behavior.

Side Note and Referral

You're one stop shop for all things web is CloudRock Solutions: Web Design, SEO, Analytics, Website Management has got you covered, end-to-end. CloudRock Solutions is a multi-service, Texas based, web design agency that offers free, quick and easy consultations.

Window Object and JS

Julian Gaston — Tue, 18 Jun 2024 06:00:18 +0000

Introduction

For anyone doing web development, the window object of JavaScript is that omni-present thing. In the browser, there is a global object which is called window and everything else is attached to this one ambient entity. It’s the very thing that you, as a programmer, will be hanging everything else on, and grasping its structure, its properties, and its life-cycle, is critical for creating engaging, and safe, apps for the web.

Cover Image

I got the cover image online and the link to more in depth coverage of the window object is here. This article is mostly an overview for a proper introduction.

Understanding the structure and properties of the window object

The window object stands in for a browser window (or frame) and holds a set of properties and methods that help you interact with the browser. Some of them, like the document property (which represents the DOM document for the window) or the navigator property (a single object returning information about the browser), are often of great use. Probably even more often used are the many methods of the Window object, such as alert(), setTimeout(), addEventListener(), and many more.

Generation and lifecycle of the window object

The window object is generated implicitly when a browser loads a new web page. Its lifecycle starts with the initialization of a new browsing context and ends when the context is closed. During its lifecycle, the window object provides various event handlers like onload, onresize, and onunload to manage user interactions and window events.

Utilizing the window object for interactive web development

Interactive web development requires extensive use of the window object to perform tasks related to user-push actions, such as dynamically updating content, running asynchronous operations and handling user input. For example, the setTimeout() function allows you to run a code snippet after a specific amount of time, while resize events can keep a page’s layout responsive to changes in the size of a browser window to accommodate different device sizes and provide a smoother user experience.

Security implications of the window object in web applications

As useful the window object is, it also introduces a host of security threats. Improperly handled window properties can lead to cross-site scripting (XSS) and clickjacking vulnerabilities. Developers must sanitise user inputs and third-party scripts with great care to avoid such problems.

Best practices for utilizing the window object in JavaScript

To use the window well, best practices dictate not using global variables attached to the window object for the sake of avoiding name collision and security, or using event handlers sparingly for interacting with users, or using modern JavaScript frameworks to better encapsulate window interactions by avoiding direct manipulation of the object.

Conclusion

The window object lies at the very heart of client-side web development. Understanding its innate structure, lifecycle and best practices will help develop robust, interactive and secure web applications. Managing client-side data with the window object carefully can help to create richer user experiences while maintaining the highest security standards.

DocBot - Coze AI Bot Challenge

Julian Gaston — Thu, 18 Apr 2024 04:57:09 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

What I Built

I have built DocBot using the seamless Coze platform. The DocBot is meant to collect patient information prior to the patient entering the physicians office or while there. The patient can update their medical records, add new medications, update addresses and name changes. DocBot caters to the patient and provides a positive interaction in the form of friendly dialogue. I will be adding more information as DocBot will have continued development. Feedback is appreciated :)

Demo

Your Configuration

This is my current configuration, as continued development occurs, I will be updating this to cater to more functionalities.

Bot Plugins and Configuration

Bot Prompts

Journey

I have a history in the medical field. I worked as a medical scribe for a little while at a geriatric medical clinic. I learned a ton doing this job and fell in love with the medicine ever since. The job was inspiring but the patient experience was priceless. Although I enjoyed being a medical scribe at the time I had wish their was a way to automate some of my more mundane tasks. This is the niche that DocBot hopes to hit! This was years ago and I didn't know much about "bot development" to say the least.

With Coze you don't really have to know anything about how to develop your typical chat interface type of bot. I learned a significant amount about prompt building and the basics of bot development.

I will continue to develop this bot and integrate this with more tools to provide a seamless experience for the patient and the provider alike.

Thank you for considering DocBot for the Coze AI Bot Challenge!

Knowi React and the Shadow DOM

Julian Gaston — Thu, 18 Apr 2024 02:01:44 +0000

Introduction

Knowi is a chart visualization library that uses highcharts as it's source of truth. Knowi is pretty great because of the integrated ability to globally manage charts with little to no effort. The project I currently work on uses Knowi. This has been a great experience and Knowi has been amazing to work with.

Knowi did not have previous shadow DOM compatibility for specifically rendering a chart. After great efforts and collaboration from their team, they now support it. This demo is what I know about the syntax in its current state. This may not be applicable for future versions.

This tutorial is intended for people who Know how to start a project and run a React application.

Getting Started with Knowi Shadow DOM

For sanity purposes, I suggest using this package from @griffadev , known as queery-selector-shadow-dom.

npm i query-selector-shadow-dom

Now that our 🏃"shadow Dom div locator"💥 has been installed, let's construct a straightforward chart. Open a new file and name it KnowiTrialComp.jsx:

import React, { useEffect } from "react";
import { querySelectorDeep } from "query-selector-shadow-dom";

function KnowiTrialComp() {

  const Knowi = window?.Knowi;
  const knowiStyle = {
    height: "100%", //can also use 30vh, make sure that the parent div height is clearly defined somewhere or it will not work. 
    width: "100%",
  };
  const knowiRSSIShadowDiv = querySelectorDeep("#knowi-div");

  useEffect(() => {
    if (knowiRSSIShadowDiv) {
      Knowi?.render(null, {
        container: knowiRSSIShadowDiv,
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });
    }
  }, [Knowi, knowiRSSIShadowDiv]);

  return <div id={`knowi-div`} style={knowiStyle}></div>;
};

export default KnowiTrialComp;

Knowi Specs

Their are a couple of key lines in this sample code that are important to address.

For starters, this line grabs our Shadow DOM div and creates an object that references the element.

  const knowiRSSIShadowDiv = querySelectorDeep("#knowi-div");

Then we pass this object into our Knowi JS API. The typical syntax for a Knowi widget using their JS API is as follows.

Knowi?.render('#knowi-div', {
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });

Since we are using Knowi within a Shadow DOM we have to pass in our element as Knowi will not be able to find it on its own. You may be wondering what the difference here is. In the first implementation we are passing a string literal, the second we are passing in an object. In order to make this functionality work we have to add the container field, pass in our predefined object, and make our first parameter null, as seen here. This is because Knowi in the non-shadow-dom implementation, looks for your string literal using document.querySelector, this is insufficient for locating a Shadow DOM div by itself.

Knowi?.render(null, {
        container: knowiRSSIShadowDiv,
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });

Conclusion

Using Knowi can be tricky at times and using Knowi with the Shadow DOM can be even trickier!! Hopefully this brief tutorial can help you navigate your way through data visualization using Knowi and the beloved Shadow DOM.

A Guide To Using Nivo with ReactJS

Julian Gaston — Mon, 11 Dec 2023 05:10:26 +0000

Introduction

So, you're looking to bring life to your ReactJS application with compelling data visualizations? Look no further! This guide is your ticket to exploring Nivo, a robust React library designed for creating visually stunning charts and graphs. Let's infuse your production code with the magic of data visualization.

If you enjoy the article consider buying me a coffee ☕

Getting Started with Nivo and ReactJS

Start by installing Nivo into your React project. Open your terminal and run:

npm install @nivo/core @nivo/bar

Now that Nivo has been installed, let's construct a straightforward bar chart component. Open your BarChart.js file:

import React from 'react';
import { ResponsiveBar } from '@nivo/bar';

const BarChart = ({ data }) => {
  return (
    <div style={{ height: '400px' }}>
      <ResponsiveBar
        // ... (chart configuration)
      />
    </div>
  );
};

export default BarChart;

Building a Bar Chart Component

Customize your BarChart component with your data and preferences. This simple example provides a foundation for more intricate visualizations. Below is how you would go about implementing it within your parent component.

import React from 'react';
import BarChart from './BarChart';

const App = () => {
  const data = [
    { category: 'A', value: 10 },
    { category: 'B', value: 20 },
    { category: 'C', value: 15 },
    // Add more data as needed
  ];

  return (
    <div>
      <h1>Super Cool Nivo Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;

And there you have it! You've seamlessly integrated a visually appealing bar chart into your ReactJS application using Nivo.

Nivo's Expectations for Time Series Data

Nivo requires time series data in a specific format where each row represents a timestamp and various measures associated with that timestamp. For instance, a time series line chart might expect data like:

[
  { "Timestamp": "2023-01-01T00:00:00Z", "Value": 10 },
  { "Timestamp": "2023-01-01T01:00:00Z", "Value": 20 },
  { "Timestamp": "2023-01-01T02:00:00Z", "Value": 15 }
]

Utility Functions for Different Time Formats

Let's create utility functions to accommodate different time formats commonly encountered in APIs, such as ISO 8601 and Unix timestamps.

// Utility function to convert data into Nivo-friendly format for a line chart
const formatTimeSeriesData = (apiData, timeKey, valueKey) => {
  return apiData.map(item => ({
    [timeKey]: new Date(item.timestamp).toISOString(), // Convert to ISO 8601
    [valueKey]: item.value
  }));
};

// Utility function for APIs returning Unix timestamps
const formatUnixTimeSeriesData = (apiData, timeKey, valueKey) => {
  return apiData.map(item => ({
    [timeKey]: new Date(item.timestamp * 1000).toISOString(), // Convert to ISO 8601
    [valueKey]: item.value
  }));
};

Example Usage with Different Time Formats

Assuming your mock API returns time series data with different time formats:

[
  { "timestamp": "2023-01-01T00:00:00Z", "value": 10 },
  { "timestamp": 1641081600, "value": 20 } // Unix timestamp
]

You can use the utility functions as follows:

// Example usage for a line chart with ISO 8601 timestamp
const apiData = [
  { "timestamp": "2023-01-01T00:00:00Z", "value": 10 },
  { "timestamp": 1641081600, "value": 20 } // Unix timestamp
];

const nivoFormattedData = formatTimeSeriesData(apiData, "Timestamp", "Value");

console.log(nivoFormattedData);

Bonus Tips: Making It Pop!✨

Customize your chart further with your own styles using Nivo's abundance of options:

// Example: Customizing bar colors
colors={{ scheme: 'set1' }}

Make your chart dynamic by fetching data from an API or your server. Use state and hooks to keep your UI reactive and fresh:

import { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from your API
    // Update state with the fetched data
  }, []);

  return (
    <div>
      <h1>Dynamic Nivo Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

Side Note

If you don't have a readily available API for your needs you can use DummyJSON. This provides a free API to use that returns dummy data. I have used it before in side projects and can say its great for generating dummy data.

Conclusion

With Nivo and ReactJS, the world of data visualization is at your fingertips. Experiment, customize, and turn your data into a visual masterpiece that captivates your users. Happy charting! 📊✨

Side Note and Referral

Functional Programming in JavaScript

Julian Gaston — Wed, 06 Dec 2023 06:08:25 +0000

Brief Introduction

JavaScript, known for its flexibility, allows us to embrace functional programming, a paradigm that emphasizes the use of functions as the primary building blocks of a program. Let's dive into the core concepts and practices of functional programming.

1. Functions as First-Class Citizens

In JavaScript, functions are first-class citizens, enabling them to be assigned to variables, passed as arguments, or returned from other functions.

// Assigning a function to a variable
const greet = (name) => `Hello, ${name}!`;

// Passing a function as an argument
const sayHello = (func, name) => func(name);

console.log(sayHello(greet, 'Alice')); // Output: Hello, Alice!

2. Embracing Higher-Order Functions

Higher-order functions take other functions as arguments or return them, allowing for powerful abstractions and composability.

// Higher-order function example
const multiplier = (factor) => (number) => number * factor;

const double = multiplier(2);
console.log(double(5)); // Output: 10

const triple = multiplier(3);
console.log(triple(5)); // Output: 15

3. Immutability and Pure Functions

Favoring immutability and pure functions, which produce the same output for the same inputs without side effects, enhances code predictability and readability.

// Pure function example
const add = (x, y) => x + y;

// Immutable array manipulation
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6]

4. Leveraging `map`, `filter`, and `reduce`

Functional programming encourages using higher-order functions like map, filter, and reduce instead of traditional loops for data transformation and processing.

// Using map
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6]

// Using filter
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2]

// Using reduce
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6

Conclusion

Functional programming in JavaScript offers a paradigm shift, fostering cleaner, more maintainable code by emphasizing higher-order functions, immutability, and pure functions. Incorporating these principles into your codebase unlocks its potential for scalability and readability.

If you are not already, start leveraging these functional programming concepts in your projects to enhance your code quality!

Forem: Julian Gaston

I posted this over a year ago, and unfortunately, it's still relevant. Please take time to consider your mental health and take a minute to appreciate the things you have accomplished.

Developer Mental Health Tips

You're loved by someone somewhere. ❤️

Developer Mental Health Tips

Julian Gaston ・ Jun 19 '24

Trying out Boost!!

A Guide To Using Nivo with ReactJS

Julian Gaston ・ Dec 11 '23

Neurodiversity and Developers 🧠 --> 💻

Neurodiverse "Techies" 🙋

Challenges We Face 🔥

A Little Paradox 🔍

Building Blocks ✅

Importance of Self-Esteem 🌟

Tools and Awareness 🔈

Conclusion 💣

For general mental health tips, that are related to this --> Developer Mental Health Tips

Big O Short Explanation

Explainer

Additional Context

Developer Mental Health Tips

Introduction

Strategies for maintaining mental health

Cultivating a healthy mindset

Laughing through the bugs: a guide to staying sane as a web developer

Embracing the chaos: a web developer's guide to staying grounded

Conclusion

For Neurodiversity Awareness check out --> Developer Mental Health Tips

Highcharts and React

Introduction

Useful Links

Introduction to React and Highcharts integration

Building a basic Highcharts component in React

Using Highcharts APIs in React for dynamic data visualization

Testing Highcharts components in React applications

Best practices for integrating Highcharts with React

Conclusion

Side Note and Referral

Window Object and JS

Introduction

Cover Image

Understanding the structure and properties of the window object

Generation and lifecycle of the window object

Utilizing the window object for interactive web development

Security implications of the window object in web applications

Best practices for utilizing the window object in JavaScript

Conclusion

DocBot - Coze AI Bot Challenge

What I Built

Demo

Your Configuration

Bot Plugins and Configuration

Bot Prompts

Journey

Knowi React and the Shadow DOM

Introduction

Getting Started with Knowi Shadow DOM

Knowi Specs

Conclusion

A Guide To Using Nivo with ReactJS

Introduction

Getting Started with Nivo and ReactJS

Building a Bar Chart Component

Nivo's Expectations for Time Series Data

Utility Functions for Different Time Formats

Example Usage with Different Time Formats

Bonus Tips: Making It Pop!✨

Side Note

Conclusion

Side Note and Referral

Functional Programming in JavaScript

Brief Introduction

1. Functions as First-Class Citizens

2. Embracing Higher-Order Functions

3. Immutability and Pure Functions

4. Leveraging map, filter, and reduce

Conclusion

4. Leveraging `map`, `filter`, and `reduce`