Category: Uncategorized

Movie DB 2 : ReactJS and Redemption

Posted on August 17, 2024 by - JavaScript, React, Uncategorized

test

Four years ago, when I was first learning React, I embarked on a project that excited and challenged me—a simple React app that displayed the 25 most recent movies. You can still see the screenshots and project description here. At the time, I was following a tutorial, eager to take what I had learned and push it further. I wanted to turn this app into a full-fledged movie search engine, but the road ahead was anything but smooth.

I vividly remember struggling for weeks, trying to pass a search query into the API and update the state accordingly. Despite my best efforts, I couldn’t get it to work. The app remained static, and I was left frustrated. Eventually, I threw in the towel, leaving the project unfinished—a painful reminder of my limitations at the time. It felt like I had hit a wall in my React learning journey, and it was a blow to my confidence as a developer.

But as any developer knows, the story doesn’t end with failure. It’s about persistence and growth, and that’s where my story picks up again—four years later.

A Second Chance with Modern React

Fast forward to the present. After years of honing my JavaScript skills and growing as a developer, I decided it was time to face this old project again. React had also evolved during this time, introducing powerful new features like useState and useEffect in React 16. These hooks made React more intuitive and opened up new possibilities for building dynamic, functional components. Armed with these new tools and a fresh perspective, I felt ready to tackle the challenge that had once defeated me.

Returning to the project, I was determined to do more than just implement the movie search feature. I wanted to turn this old symbol of frustration into something I could be proud of—a true reflection of how far I had come as a developer.

Overcoming the Challenge and Expanding the Scope

This time around, I approached the problem with a clearer understanding of React’s strengths—state management and reusable components. Implementing the search functionality, which had once been my stumbling block, felt almost natural with useState and useEffect. I was able to fetch search results, update the UI dynamically, and even handle more complex requirements like debounced API calls to prevent excessive requests.

But I didn’t stop there. I added features that I hadn’t even imagined four years ago:

  • Search Pagination: Users can now load more search results without refreshing the page.
  • Favorites List: Users can favorite movies and add them to a personalized list.
  • Movie Details Modal: I created a modal that displays detailed movie information, allowing users to cycle through images.
  • React Fragments: I used React Fragments to clean up the DOM structure, making the code more maintainable.

These additions not only enhanced the app’s functionality but also gave me a deeper appreciation for what React excels at. State management became a breeze, and the reusability of components made my codebase more elegant and scalable. What once felt like an insurmountable obstacle now seemed like a perfect playground for experimenting and growing as a developer.

Reflecting on the Journey

Looking back, this project represents more than just a technical achievement. It’s a testament to the power of persistence and the importance of never giving up. Four years ago, I wasn’t ready to solve the problem in front of me—but that didn’t mean I would never be ready. By coming back to this project, I was able to redeem myself and confront the doubts that had lingered in the back of my mind.

The experience reinforced an essential lesson for any developer: Growth takes time. You might not always succeed on the first try, and that’s okay. What matters is the willingness to return, armed with new knowledge, and face the challenge once more.

This project, once a symbol of not being good enough, has now become a source of pride. It’s a reminder that with perseverance, learning, and the right tools, even the most daunting obstacles can be overcome.

 

View the new and improved Movie DB app Searchflix here.

How to overcome Imposter Syndrome

Posted on February 6, 2020 by - Uncategorized

test

What is Imposter Syndrome?

Imposter Syndrome is defined as “the persistent inability to believe that one’s success is deserved or has been legitimately achieved as a result of one’s own efforts or skills.” The term was coined by American psychologists Pauline Clance and Suzanne Imes, who published an article called “The Imposter Phenomenon in High Achieving Women: Dynamics and Therapeutic Intervention“ in the 1978 journal Psychotherapy: Theory, Research & Practice. In the study it was discovered that high achieving women sometimes struggled with believing their success was deserved even though it certainly was and in most cases they were deserving of more.

Imposter Syndrome however is equal opportunity, affecting both men and women and people of all walks of life. Still found most common in women in academia, i’ve noticed it abundantly amongst those in creative and tech fields where perfection is expected and people are constantly measuring themselves up against their peers.

 

Why Imposter Syndrome?

In my opinion, Imposter Syndrome is a side-effect of ambition. It is those people who have reached for something they felt was beyond their grasp and got it and now they’re feeling like “now what?”. They got that job or promotion, scholarship or award and now they feel the pressure of the new set of expectations. Instead of feeling deserving of these things people feel like they are frauds or imposters and they will be found out at any moment and that can lead to  overwhelming anxiety. It is a bit of an odd cycle because it was their confidence in themselves and ambitious nature that lead to them pushing themselves to attempt something they felt was out of reach but now after receiving it that feeling of sureness is not there.

How to overcome?

Overcoming Imposter Syndrome isn’t just a quick solution, there are many more factors that go into it however there is one sure way to get on the path to no longer feeling undeserving or like a fraud:

Trust Yourself. You’ve made it this far for a reason. All of the steps you’ve taken either consciously or subconsciously have lead you to be successful.

Don’t Compare. Don’t compare yourself to others. The reason you’ve made it to this point is because you are you. There will always be someone smarter or more experienced but there will never be another you. Take that and run with it.

Reflect. Whenever you’re feeling self doubt take a look back at your accomplishments. Think about all of the little wins. I’m sure when you look through your own highlight reel objectively you’ll see that you have been making waves for quite some time and are quite talented. It is difficult to see the forest from the tree’s sometimes but when you look back at your track record that should ground you in the reality that you are awesome and talented and more than qualified for the success you’ve received.

 

DEPLOY YOUR WP ENGINE HOSTED APPLICATION WITH THE EASE OF GIT

Posted on October 15, 2019 by - Uncategorized

test

***This is the process that works for me, Feel free to make any changes you see fit.

**Before this process I would suggest copying the live site down to your local using duplicator pro. To make sure it works make sure you make these changes :
Packages > Basic Settings > Archive Engine > Change to Dup Archive

Packages > Advanced Settings > Installer Name > change to installer.ph1

-Copy files into root folder and change .ph1 back to .php

STEP 1: ADD YOUR SSH KEY TO USER PORTAL

The first step to enabling git on your WP Engine site is to add your SSH Key to the User Portal. SSH Keys cast aside traditional username and password and opt instead for a public and private key pair for authentication.

GENERATE SSH KEY PAIR

If you don’t already have an SSH key, use the steps below to generate your public/private key pair:

  • Open a Terminal window (on Mac you can use the Spotlight utility and type “Terminal”), or Git Bash for Windows.
  • Use ssh-keygen to generate a new key as shown below

ssh-keygen -t rsa -b 4096 -C “your_email@example.com”

  • Type a secure passphrase when prompted

Doing this will generate your public/private key pair. In the output you should see text that indicates where your public key has been saved. Navigate in Terminal to this location and copy the text of your id_rsa.pub file.

ADD SSH KEY TO USER PORTAL

Now that you have your SSH public key copied, navigate to your User Portal. Click the environment to which you would like to connect to get to the Overview page for that environment. Then click Git push from the left-hand navigation.

**Whatever you make your developer name will be used on all projects so it’d be best to give it a generic name**

Here, you will be able to add the public key to your User Portal. Paste the contents of your public key in the box and create a developer name, then click the Add Developer button. Please note: Your key will be effectively published approximately 30-45 minutes after saving. In the meantime you will see an error if you try to connect to git in the following steps.

Be sure to add the public key for all environments in your site for which you wish to use git. After you have added the key to one environment, you will see a banner when adding it to other environments indicating the key is already in use. Click yes in the banner to add the existing key to your other environment(s).

STEP 2: SETUP .GITIGNORE FILE

**.gitignore will be in theme folde,r move it to the root folder**

The next step is to configure a .gitignore file on your local machine, which will define which files and folders should never be edited and pushed via git. Below we have provided two templates for your .gitignore file, to which you are free to add any of your own site-based exclusions if needed.

 

Download the starter .gitignore template of your choice, add any other files that should be ignored, and move it into the folder on your local machine where you will be managing your git repository. Place it in the root directory of your local copy of your website.

 

STEP 3: CONFIRM GIT ACCESS

If it has been at least 30 minutes since adding your SSH public key to User Portal, you may now test to confirm your user has access to git for your environment. Copy the command below into your Terminal, Git Bash, or PuTTY window:

ssh git@git.wpengine.com info

If you have never connected to git on WP Engine before, you will be prompted to verify host authenticity before connecting.

ssh git@git.wpengine.com info

The authenticity of host ‘git.wpengine.com (<no hostip for proxy command>)’ can’t be established.

ECDSA key fingerprint is SHA256:Jgp8bPftGbM0rzQaeA7KTBrZa1UfEN1nqQMLIwu5i18.

Are you sure you want to continue connecting (yes/no)?

The WP Engine host fingerprints are:

  • RSA 19:17:ee:d2:1d:8d:c9:3e:dc:3e:0d:21:a7:c6:52:fc
  • ECDSA 0c:4b:07:92:dd:e0:be:50:90:7d:0d:c3:30:56:fa:9a
  • ECDSA SHA256 Jgp8bPftGbM0rzQaeA7KTBrZa1UfEN1nqQMLIwu5i18

If the host fingerprint matches the above, type yes to continue connecting. You will receive a message indicating git.wpengine.com was added to your known hosts. This does not indicate a successful connection. It simply means your local machine will remember that git.wpengine.com is an accepted host with a valid fingerprint.

Warning: Permanently added ‘git.wpengine.com,’ (RSA) to the list of known hosts.

If your key is recognized by the git service on WP Engine, you will see a message showing a list environments to which your user has access:

Please note: If you have added your public key to your production, staging, and development environments within a site you should see the environment name for each listed here (the “staging/yourinstall” entry for each environment refers to the legacy 1-Click Staging tool).  

If not, you will see an error:

git@git.wpengine.com: Permission denied (publickey).

This error indicates that the git service does not recognize the key. This could mean you haven’t waited long enough for the key to be fully added (30-45 minutes), or that you are connecting with an incorrect key. If you have waited longer than 30-45 minutes, try creating an SSH config file to ensure your computer presents the right key to git.wpengine.com.

 

STEP 4: MAKE THE FIRST COMMIT

If your local copy of your site has not been used as a git repository before, you will need to make it into a repository by using the git init command.

cd ~/path/to/localcopy

git init .

Now that your copy is setup as a git repository, you can make your first commit. This will add all modified and new files (other than those in your .gitignore file) to git to be tracked. Since this is a new copy of your website that we’ve made into a git repository, all files will be “new” to git.

git add . –all

git commit -m ‘name of my first commit’

*If this doesnt work try using quotes “ “ instead

Note: At this point, nothing has changed on the front-end of your WP Engine environments. First we will need to setup remotes so we can use the git push command to deploy files.

 

STEP 5: ADD REMOTES

The next step is to map your local repository to the remote endpoints where you will deploy file changes on WP Engine. If you added your key to production, staging, and development environments within your site in the first step, you will need to add a remote for each of these environments.

cd ~/path/to/localcopy

 

git remote add work-env git@git.wpengine.com:production/work-env.git

 

**The steps for adding production env and staging are the same. The only thing that changes is the name of the env. Ex. deepwaterriser and deepwaterstage. This info can be found on the “git push” page of the project under git push overview. 

In the above commands be sure to replace “site-work-env”  with the User Portal names of each of these environments within your site. You may also name the “work-env” remote whatever you prefer–we suggest naming them according to their role in your site to avoid confusion (e.g. mysitename-production).

 

To confirm the remotes were successfully added, use the following command:

git remote -v

This will list all the remotes that were successfully added. Now that the remote endpoints for git have been established, you can perform a git push to deploy code changes.

 

STEP 6: DEPLOY WITH GIT PUSH

Last, it is time to deploy using the git push command. To deploy, type git push, followed by the name of the remote you would like to push, and then the name of the local branch you wish to push.

git push work-env master

The above command will push the local “master” branch to your remote endpoint named “production.” If you named the remote endpoint something else, be sure to replace “production” with that name instead (e.g. git push mysitename-production master).

And that’s it! WP Engine takes care of the rest once we receive your git push, syncing the changes to the applicable environment. Be sure to pay attention to your git push output, as it will indicate whether the push was successful or if it encountered any errors.

 

 

How To Handle Being The New Guy/Girl

Posted on December 8, 2018 by - Uncategorized

test

Everyone at one point or another has been “The New Guy/Girl” at a job. According to the U.S. Bureau of Labor Statistics, the average baby boomer held 11 jobs between ages 18 and 46. Younger generations move around even more; today an 18-year-old will have had more than five jobs by age 24. This affords us many opportunities to meet new people, and be challenged with new tasks.

All of this change can be a bit of an uncomfortable experience. However, there are ways to ease being a newcomer in the workplace.

LEARN EVERYONE’S NAME

This is the most important thing. Dale Carnegie wrote in his book How to Win Friends and Influence People that “A person’s name is to that person, the sweetest, most important sound in any language.” After meeting people, make little notes to help you learn their names. Of course, you will not know everyone’s name on day one, but this is a good start in your process of assimilating into the workplace.

LEARN THE COMPANY CULTURE

Is it laid-back, is it uptight, do your coworkers go out to lunch together or do people eat together in the break room? It is important when you are new to learn how things are done on a social level. Engage with your coworkers and find out what things are done in the office to build rapport. If there is a fantasy football team, participate; if everyone likes to go to happy hour after work, join in. These little instances of being social will help assuage whatever anxieties you have about fitting in.

DON’T BE AFRAID TO ASK QUESTIONS

You will not know everything right away, and your coworkers will be more than happy to assist you in any way. After all, they were once in your shoes and undoubtedly still remember what it is like to be new. Also, it is better to ask a question and be informed than to wonder what the correct course of action is and do the wrong thing. Asking questions shows that you are eager to learn and to become part of the team.

In conclusion, starting a new job should be an exciting time. Take on any challenges that might arise and meet them head-on. Whatever nervousness you have will fade away as the more comfortable you become with your fellow employees and your environment. The best way to do this is to be both a little observant and a little outgoing. Listen, learn and be unafraid. Everything else will fall into place.

4 Reasons Things Become Popular

Posted on March 14, 2018 by - Uncategorized

test

In this digital age where videos and ideas go viral daily (if not hourly), it seems like capturing lightning in a bottle to create one of those things. A completely random occurrence. However, it is not. There is a science behind why things go viral or become popular.

SOCIAL CURRENCY

People share videos and ideas that they believe will shine a positive light on themselves. That is the reason people will discuss a cool new movie that they saw on opening night over sharing a very sad or embarrassing story.

Telling people that you’ve seen the new superhero movie or ate at the new trendy restaurant makes you look like an insider. A VIP. A more interesting person. So having content that gives people this feeling of social currency and makes them want to share the experience results in more word of mouth, more shared links and views.

REMARKABILITY

By definition, something that is remarkable is “worthy of attention; striking,” so by seeing something you deem remarkable, your natural inclination will be to give it your attention. This is a tactic used over and over again in infomercials, whether it is showing a vacuum cleaner with the strength to pick up a bowling ball, or a cleaning solution that can clean red wine out of the carpet. You see this remarkable feat and before you know it you are online searching for this product or dialing the 1-800 number to purchase.

TRIGGERS

Triggers are a powerful source of influence in the subconscious mind. For example, any time you hear the word “peanut butter” you naturally think of jelly, which could cause you to think about a peanut butter and jelly sandwich and then maybe some childhood memories. This set of thoughts all triggered by a simple word. The more triggers associated with your product or idea, the more your product will be at the top of the mind and tip of the tongue.

Another example, Oreos have comfortably positioned themselves next to milk, and even dubbed themselves “Milk’s Favorite Cookie.” It is now to the point that it’s hard to imagine one without the other. The same can be said about Coca-Cola’s use of polar bears during their Christmas time commercials. They’ve taken a holiday and have positioned their product to be associated with it.

PRACTICALITY

Perhaps the number one reason things go viral or become popular is simply practicality. This practical news/info/product is anything that you can actually use, and that will improve upon something in your daily life. Someone shares with you a news article that you can apply or a LifeHacker video that addresses a problem that you have; these have a greater value because you’re putting them to use and are most likely to share the experience with someone else.

While there are a lot more factors that go into a product, video or idea going viral, these are four key components. Being able to recognize these contributing factors and positively utilize them could do wonders for your brand or product.

It can be said that this new age viral marketing has taken the randomness out of an idea or product becoming popular and “going viral.” It is possible for individuals as well as companies to create content that is infectious just by applying some ancient marketing techniques and bringing them into the 21st century. Using the internet and social media as your platform to reach customers, as well as utilizing the importance of word of mouth, you can spread your ideas globally without having to leave your home or office. It is truly a gilded age of marketing in which we live. Take advantage!

The Importance Of Web Accessibility

Posted on February 13, 2018 by - Uncategorized

test

In the web community, we love our buzzwords, acronyms and frameworks, but one term in particular being constantly discussed is “web accessibility.”

Often, accessibility is lumped in with SEO practices and treated as a way to improve your Google search ranking (If you ain’t first, you’re last, amirite?). However, accessibility should be a main focus on its own. Sure it can improve your SEO, but the greater benefit far exceeds it.

But first, what exactly is web accessibility?

Web accessibility is a way of designing and developing your website so that it can be properly accessed and used by all people, especially individuals with disabilities. The 4 major disability categories are:

  • Visually Impaired (blindness, low-vision, color-blind)
  • Hearing Impaired (deafness, hard of hearing)
  • Lack of Motor skills (inability to use the mouse, limited motor control, limited motor response time)
  • Cognitive (learning disabilities, distractibility, inability to focus on large amounts of information)

Each of these people should be able to access and use your website in a meaningful way.

Now that you understand what web accessibility is, you can easily see why it is so important.

First and foremost, it is the right thing to do morally. Furthermore, if you are a school, university or government entity, it is the law that your website be accessible under the Americans with Disabilities Act.

But as technology evolves and the use of the web becomes more ubiquitous in our daily lives, the laws regarding ADA compliance have also changed. It has been required for some time through the Americans with Disabilities Act that public places (businesses, stores, airports, etc.) be accessible to people with disabilities.

Well now that we live in an age where there are businesses that exist solely online without a brick and mortar location, can they also be considered a “place of public accommodation”? And are they subject to the same accessibility requirements?

The answer is “Yes.” While there have been a number of court cases involving this very issue, simply put, it is possible for a business that exists online to be sued for discrimination and/or violation of the ADA if their website is not accessible and available to be used by people with disabilities the same as it would be for those who are not disabled.

Although there is currently still much debate regarding the applicability of the ADA to the Internet, one thing is for sure: companies and organizations providing services via the Internet would be well advised to review the accessibility of their websites.

How do I make my website web accessible?

Without going deep into the HTML/back-end of adjustments you could make, here are some easy tips you can apply on your own:

  1. Avoid link titles like “Click Here Now!” Screen readers have been trained to use caution and avoid that type of link to prevent adware/malware situations.
  2. Provide closed captioning options on all videos for the hearing impaired.
  3. Make sure your buttons and menus are large enough to allow those who have trouble using a mouse, or individuals who use a mouth-stick stylus, to access everything on your site with relative ease.

These simple considerations can go a long way in making your site enjoyable to all who wish to visit it.

My Experience Working With Futures Fund

Posted on December 2, 2017 by - Uncategorized

test

Today (at the time of this writing) it is December 2, 2017, the date of our Future’s Fund Student Showcase. I must say, seeing these young people on stage articulating their vision and the things that they’ve learned in their time with Future’s Fund is amazing and overwhelming. I’ve never taught students before joining the FF Instructor team. Seeing MY students that I’ve spent several saturdays instructing standing tall and speaking with confidence was unbelievable. That feeling is worth more than money. To help the youth, to help the community and to have a hand in crafting the future generations is huge to me.

This Fall 2017 semester was my 2nd semester working with Futures Fund. The experience has been extremely rewarding, although not without its frustrations. The main frustration being getting the kids to believe in themselves enough they they are confident they can do the work. Frontend web development (HTML/CSS/Javascript) isn’t the most fun topic to be taught. It can feel a lot like learning math. There are variables and functions in coding just like in algebra and that can cause kids to sort of space out. This is relatively a very small issue and it provides me as an instructor the opportunity to be creative and think of new ways to keep student engaged.

Also, I would be remiss if I did not speak on the incredibly talented staff and other instructors I get to work alongside. These are some of Baton Rouge’s most talented developers. I enjoy being able to work in an environment where I can learn from everyone around me. I learn from both my peers as well as the student’s that I am instructing.

I would like to wrap this short blog up by saying the Walls Project/Future’s Fund is taking all the necessary steps to change this city for the better and this is just the beginning. As the program grows so will their positive influence. I am thankful for the opportunity to be apart of such a program that is so innovative and forward thinking.

Check out the Futures Fund here.

 

Slanted Lines Image Grid – ExpressionEngine2

Posted on January 23, 2017 by - Uncategorized

test

SLANTED LINES

The slanted lines design element is elegant and like most elegant things it is difficult and painstaking to make (at least to me, at the time it was). Slanted lines add the feeling of movement to a website. A User Experience motif that is very useful in breaking up the boring boxy look of some websites.

The issue : Naturally html DIVs are square. The image assets themselves are also square (which is needed for the site to be responsive). (The div tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use div elements to group together HTML elements and apply CSS styles to many elements at once.)

The fix : After many hours of banging my head against a wall, googling slanted divs, and much soul searching I stumbled upon a fix that could satisfy the design element as well as keep the functionality of a site that can scale from desktop to mobile without breaking the layout. I created a html figure element and put the slant on it using transform css element and skew(-3deg). Which then slanted everything inside the figure including the image. I then added the transform element to the image and reversed the skew(3deg) and increased the image size to over 100% to fill the figure. In doing this the figure holding the image is slanted while the image inside of it is not. *seen below

Here is an example of the code :

Here is an example of the finished product :

EXPRESSIONENGINE TEMPLATE GRID

ExpressionEngine has an incredible grid functionality built into that helped managing the Employee page. Here is a simplified version of the grid that I made which allowed us to create new entries easily.

 

In this code snippet, I open with the employee grid. Then create a employee row that spans 12 columns. Then there is an h2 which will hold our employee department. Next I create a panel that will hold all of the employees. Inside the panel I call all of the employee info; their image, name and position which was all inserted into the back end of the site. The backend then looks like the image below when inserting employees and departments.

Create a row for the Department, then select all Employees from the relationship grid.

I could go on and on about the excellent things I learned on this project but I will keep it concise. Thanks for reading!