I was leaving some performance on the table by not utilizing a content delivery network. <\/p><\/li>\n
I was probably using the least secure method for serving images.<\/p><\/li>\n<\/ol>\n\n
So I combined S3 with CloudFront to create a more secure and performant static asset delivery workflow.<\/p>\n\n
My only regret is not taking controlled measurements of my image serving times, as once this was completed, my static assets loaded much faster. Regardless let\u2019s go through what I did.<\/p>\n\n
\n \n \n Setup\n<\/h3>\n\n
I already had an S3 bucket set up, but it is a simple process if you don't.<\/p>\n\n
Sign in to your AWS console and navigate to the S3 management screen.<\/p>\n\n
You can create a new bucket by hitting the \u201cCreate bucket\u201d button.<\/p>\n\n You can leave all the default options for the bucket. We\u2019ll take an extra step to ensure only our new distribution has access to our bucket.<\/p>\n\n After completing this, head over to the CloudFront screen in AWS and hit the \u201cCreate distribution\u201d button.<\/p>\n\n The first option is setting the origin. Clicking that input box brings down a list of your S3 buckets; I chose the one I made earlier.<\/p>\n\n There are dozens of different settings for the distribution that you can go through and customize to fit your situation, but I want to focus on the \u201cOrigin access\u201d section. I clicked the option for \u201cOrigin access control settings,\u201d which has you choose an origins access control template. I created a new one for this purpose.<\/p>\n\n Once you click the create button, you\u2019ll be taken back to the main page while the distribution starts deploying. At the top, you\u2019ll see a button to copy the bucket policy for S3. Clicking this button will copy some JSON code into your clipboard meant to be copied into your S3 permissions tab. The console will also have a convenient link to open the \u201cPermissions\u201d tab in your S3 bucket.<\/p>\n\n Scroll down to the \u201cBucket policy\u201d section, where you can hit the \u201cEdit\u201d button and copy in the JSON CloudFront provided.<\/p>\n\n Note: I had to go to this site<\/a> and copy in the JSON to better format it for S3 to accept the settings.<\/p>\n\n Once you do that, you click \u201cSave changes,\u201d and you\u2019re done. You can now serve images of Serena being fantastic in a performant and scalable way. <\/p>\n\n Just note that you\u2019ll have to go back to distribution and get the distribution URL. You just add the route to your S3 assets from there, like below, and you\u2019re golden.<\/p>\n\n An easy solution to hosting images and whatever else you want. I have some issues with it that I will get into, but so far, so good.<\/p>\n\n -George<\/p>\n\n","category":["aws","cloudfront","s3","beginners"]},{"title":"Browser Testing With Cypress","pubDate":"Sun, 17 Jul 2022 13:52:43 +0000","link":"https:\/\/dev.to\/georgeoffley\/browser-testing-with-cypress-33e6","guid":"https:\/\/dev.to\/georgeoffley\/browser-testing-with-cypress-33e6","description":" When I write code, I try to remember that everything is broken until proven otherwise. I\u2019ve been shifting my learning to browser-based platforms that I am working on and with that shift, browser tests have started to be folded into that mindset.<\/p>\n\n Cypress<\/a> is a tool for browser tests that I\u2019ve started learning, and it\u2019s been an interesting week. I\u2019ve written about browser testing before<\/a>, so this will be a bit less comprehensive and will mostly be my thoughts on the tool and how useful I think it is. Complete tutorials for creating end-to-end browser testing solutions using Cypress can be found in their docs<\/a>.<\/p>\n\n Testing has a lot of different connotations. In this context, browser tests are tests that try to use your app and tell you if something is broken. Cypress is one such tool, but there are many others. <\/p>\n\n Compared to something like Selenium, the setup was simple. Cypress advertises as an all-in-one solution for end-to-end testing. And so far, that\u2019s been true. Selenium requires a web driver and external resources to function, whereas Cypress seems to work quickly out of the box.<\/p>\n\n Their docs suggest setting up the cypress commands in your To help with your setup, you have access to their testing GUI.<\/p>\n\n This is a vast improvement over other tools I\u2019ve learned since everything can be set up in a GUI, including choosing a browser to do your testing on.<\/p>\n\n I\u2019ve only been able to try end-to-end testing, but I\u2019d like to dive a little more into component testing. More to come.<\/p>\n\n So the tests themselves are relatively simple. The scripts only need a few lines of code, as most of the setup is in the project config and support files. Another great advantage over other tools I\u2019ve tried so far.<\/p>\n\n A test might look something like this.<\/p>\n\n The above test, taken from their docs, is put into a The So we can add all the steps needed to test a part of our app. Like so.<\/p>\n\n This example, also taken from their docs, takes advantage of everything described above. It also introduces chaining, which we can use for multi-step processes.<\/p>\n\n OK, on to some of the stuff that makes Cypress a fun tool to dive into. Namely the GUI.<\/p>\n\n Browser-based engineering is still a space I\u2019ve only been in for a while, so this might be new to me, but adding a browser tool for developing your apps blows me away. Let me tell you why.<\/p>\n\n So we wrote the test above. Great. Now we need directions to tell a Cypress how to navigate our app. So we need some selectors, which are always murky to me as relying on class selectors is a brittle test that can be broken with a new release. We need something better, and it\u2019s not always clear what that \u201cbetter\u201d may be. So in comes the testing playground.<\/p>\n\n The above, also taken from their docs, demonstrates what made using Cypress enjoyable. Their testing suite gives you valuable tools like a real-time test runner, a test builder, a time machine so you can go through each testing step to see where issues might pop up, and an advanced selector playground.<\/p>\n\n This tool does a great job of helping you create robust selectors for your test. It allows you to hover over elements, highlight them, and the selector playground will provide you with their best guess for a Just a couple more things I wanted to mention. One was how easy their API makes it to creating new commands in their API<\/a> for common functionality to your testing apparatus.<\/p>\n\n For example, we created one which goes to our site, types in login info, and clicks the login button. Now we have all that functionality in a single command for use in any test we need authentication for. Before long we\u2019ll have tons of them so we can focus on testing our platform's behavior.<\/p>\n\n Another was using what they call fixtures<\/a> for injecting static data into your tests, which I love. Static data, like login credentials, names, etc, are much cleaner when you can create a JSON file and utilize the existing API to access the necessary values. I love that; it makes maintenance so much easier.<\/p>\n\n After all that, I can confidently say I enjoy writing tests using Cypress. It allows me to write tests the right (easy) way. Testing is often not something people think about. So make it easy to do, and Cypress does that. I\u2019m excited to continue learning.<\/p>\n\n -George<\/p>\n\n","category":["testing","javascript","webdev"]},{"title":"Context In React","pubDate":"Tue, 19 Apr 2022 00:44:38 +0000","link":"https:\/\/dev.to\/georgeoffley\/context-in-react-4fda","guid":"https:\/\/dev.to\/georgeoffley\/context-in-react-4fda","description":" React offers the ability to build out web applications quickly. One of the details of this strategy includes passing data to different components in the DOM<\/a>. This can consist of needed data to build features, states of a component, and anything you can think of.<\/p>\n\n One great pattern in React is how data can be passed through the different components. However, this can get messy. <\/p>\n\n An application might be broken down like below.<\/p>\n\n A collection of components. Some of these components return other components. These are called parent components, and their children are nested components. <\/p>\n\n We can pass data back and forth throughout the lifetime of each component. Working with only props, for example, lets us pass data down the tree to the components that need it. However, this can present a problem.<\/p>\n\n Using props or properties is a great way to handle data. However, the deeper the component is buried, the more you have to pass the props down. This is called prop drilling<\/a>.<\/p>\n\n Using the workflow above, we have a couple of nested components passing the Now combine this with having to scale out your context to include hundreds of bits of data or state, which need to be passed down to various components at various levels of the tree, and we\u2019ve got a problem.<\/p>\n\n Context<\/a> solves the problem by allowing us to pass down data without relying on continually passing props through components. Context in React should be used handling global data that does not have to change often. Using context to keep track of our username state improves the workflow by allowing components to use context as needed without passing it down the tree. Pictured below.<\/p>\n\n As illustrated above, we can provide the context to one component, and the children component will be able to access the context regardless of the level they are at. All without needing to have their parent components pass the data down.<\/p>\n\n So let\u2019s look at an example of context. I created a small React app and just made some barebones components. The first file we should check out is the There are some lines of note, as you\u2019ve undoubtedly seen, and then some other stuff needed for using context. The first out-of-place thing is using the React function Context works using Providers and Consumers. In this case, we are looking to provide the context to our app for consumption by the components. So we use the provider tag, which every context object has, to pass in the The We're not passing anything to the Let\u2019s look at the The header is a regular old React component. However, we use the React hook Let\u2019s look at another example. Below we have our Just another component with a nested component, The The app would look something similar to the below image. We can see the username string in the Changing the value of the state would cause a render for the other components subscribed to the context. So it could cause issues if the state is constantly changing. So context fits nicely with a global state that is not likely to change often.<\/p>\n\n The code for the above example can be found on my GitHub<\/a>.<\/p>\n\n This has been an interesting learning experience. I\u2019m happy to have gotten one of the fundamentals of React down on paper, so to speak. I hope this helps someone new coming into the React scene.<\/p>\n\n -George<\/p>\n\n","category":["javascript","react","beginners","tutorial"]},{"title":"Spiking Tailwind CSS in a React App","pubDate":"Sat, 02 Apr 2022 14:33:14 +0000","link":"https:\/\/dev.to\/georgeoffley\/spiking-tailwind-css-in-a-react-app-5198","guid":"https:\/\/dev.to\/georgeoffley\/spiking-tailwind-css-in-a-react-app-5198","description":" It\u2019s been some time since I did any frontend development, and I don\u2019t miss it. After a couple of years of learning the fundamentals, I would have loved to have some alternatives to manually writing CSS.<\/p>\n\n Now that I am diving back into it, I am happy there are tools not to replace but improve the CSS experience. In that spirit, I want to look at Tailwind CSS<\/a>.<\/p>\n\n Tailwind is different from other CSS frameworks I\u2019ve tried. The software works on a lower level to allow easy CSS styling utilizing class names. Bootstrap works similarly, but the difference is that Tailwind does not come with predefined components. It is also different because the class names are compiled into CSS code. <\/p>\n\n Tailwind is also not opinionated about how you make your designs, and thus they give you the tools you need and let you create unique components. It\u2019s the difference between designing boots on a website<\/a> and having all the materials right before you to cobble together your shoes. This alone is valuable because you can avoid falling into the Bootstrap design trap<\/a>.<\/p>\n\n Tailwind is a \u201cutility-first CSS Library,\u201d<\/a> From what I glean from their site, it means they tried to create a framework from a set of constrained utilities. This seems to translate into the following:<\/p>\n\n Tailwind also gives you ways to easily extend their utilities by utilizing config files for adding things like custom colors, fonts, etc. <\/p>\n\n I\u2019ve noticed that they seem to lean into the idea of long strings of class names in HTML over regular CSS. You\u2019ll see what I mean.<\/p>\n\n So to try this and to learn the tech better for use in my work, I created a quick React application. <\/p>\n\n After the React app creation, we can run the below commands. This will install the needed packages. The above command will create the config files we need, the After that is installed, you replace everything in your And finally, to ensure that all the template files are added to the Tailwind config, make sure the It\u2019s a bit much, but that\u2019s essentially it. You\u2019re now ready to start styling stuff.<\/p>\n\n After setting up our React project and installing Tailwind, I was ready to go. So I got rid of all the startup React stuff and started small. Pretty easy, and we get a simple heading tag.<\/p>\n\n Now let\u2019s start small and add some styling. Now I added a couple of styling classes to the JSX, and just like we were editing a CSS file, we got some results.<\/p>\n\n You may also notice the Adding these class names saved me from opening up VSCode and adding styles to a CSS file. I am already sold on Tailwind.<\/p>\n\n You can also see the core use of Tailwind in adding class names to the HTML tags. This is a small example, but tags can have tons of styles, so adding a class name into the HTML can get overwhelming quickly. This is the language they lean into that I mentioned above. <\/p>\n\n I am not a designer, but I find this setup easy to create components. So let\u2019s say I broke my app into pieces. How can I style this card component I made? Tailwind makes it simple.![\"S3](\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fslc67y31hpsodslaimj2.png\")
<\/a><\/p>\n\n<\/a><\/p>\n\n<\/a><\/p>\n\n<\/a><\/p>\n\n<\/a><\/p>\n\n<\/a><\/p>\n\n\n \n \n Conclusion\n<\/h3>\n\n
\n \n \n Introduction\n<\/h3>\n\n
\n \n \n Browser Tests\n<\/h3>\n\n
\n \n \n Cypress Setup\n<\/h3>\n\n
package.json<\/code> file for easier running. This is a good approach to test your app how you need to.<\/p>\n\n<\/a><\/p>\n\n<\/a><\/p>\n\n\n \n \n Simple Cypress Tests\n<\/h3>\n\n
<\/a><\/p>\n\ndescribe()<\/code> block. This gives us flexibility in creating testing classes and organizing our tests. Within that block is another block, the it()<\/code> block, which is our test itself. We can be as granular as we want with our tests. For example, if we want to write an it()<\/code> block for every step in an end-to-end test, we can do so with the confidence that we\u2019ll see which stage failed.<\/p>\n\ncy.visit()<\/code> is a command and assertion. So, in this example, if a website is not sending a response, we can see this test fail. So this gives us the flexibility to write out the exact behavior we expect.<\/p>\n\n<\/a><\/p>\n\n\n \n \n Testing GUI\n<\/h3>\n\n
<\/a><\/p>\n\ncy.get()<\/code> command so tests can be filled out quickly.<\/p>\n\n\n \n \n Some More Cool Stuff\n<\/h3>\n\n
\n \n \n Conclusion\n<\/h3>\n\n
\n \n \n Table Of Contents\n<\/h2>\n\n
\n
\n \n \n Introduction <\/a>\n<\/h3>\n\n
\n \n \n Data In React <\/a>\n<\/h3>\n\n
<\/a><\/p>\n\n<\/a><\/p>\n\nUsername<\/code> prop down the tree. The Page<\/code> and MainContent<\/code> props are just passing down the props used by the UserCard<\/code> component like a vertical game of telephone<\/a>.<\/p>\n\n\n \n \n Context in React <\/a>\n<\/h3>\n\n
<\/a><\/p>\n\n\n \n \n Context In Use <\/a>\n<\/h3>\n\n
App<\/code> component.<\/p>\n\n<\/a><\/p>\n\nReact.createContext()<\/code>, which we use to create a context object. We also made a provider<\/em><\/a> for our context object and wrapped our Page<\/code> component in it.<\/p>\n\nvalue<\/code> string to our nested components.<\/p>\n\nvalue<\/code> attribute is a prop that the provider accepts and can pass down the tree. Many consumers can subscribe to one provider, and we\u2019ll talk about that more. <\/p>\n\nPage<\/code> component except the Header<\/code> and MainContent<\/code> components.<\/p>\n\n<\/a><\/p>\n\nHeader<\/code> component. <\/p>\n\n<\/a><\/p>\n\nReact.createContent()<\/code> to subscribe to the UserContext<\/code> object that we import into this component from the App<\/code> component. We can now use the curly brackets to pass in the userNameContext<\/code> into the JSX being returned by the component.<\/p>\n\nMainContent<\/code> component.<\/p>\n\n<\/a><\/p>\n\nUserBox<\/code>. Let\u2019s look at what is in the UserBox<\/code> component.<\/p>\n\n<\/a><\/p>\n\nUserBox<\/code> component can do as our header did; import the context object, subscribe to the provider using the useContext<\/code> hook and pass in the context using that context object. This is cool because we\u2019re using context two levels below from where it was created without passing props through subsequent components. <\/p>\n\nheader<\/code> and the UserCard<\/code> components. I am not one for styling things effectively, so hold your judgments.<\/p>\n\n<\/a><\/p>\n\n\n \n \n Conclusion <\/a>\n<\/h3>\n\n
\n \n \n Table Of Contents\n<\/h2>\n\n
\n
\n \n \n Introduction <\/a>\n<\/h3>\n\n
\n \n \n Tailwind CSS <\/a>\n<\/h3>\n\n
\n
\n \n \n Setup <\/a>\n<\/h3>\n\n
\n<\/p>\n\nnpm install <\/span>tailwindcss\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n<\/p>\n\nnpx tailwindcss init\n<\/code><\/pre>\n\n<\/div>\n\n\n\ntailwind.config.js<\/code> and the postcss.config.js<\/code> files. The tailwind.config.js<\/code> is where any customization options will go. By default, Tailwind looks for this file at the root of a project to create any customizations. For example, if you want to add colors or fonts that Tailwind does not have built-in, they will go in that config file.<\/p>\n\nindex.css<\/code> file with the below lines.
\n<\/p>\n\n@tailwind<\/span> base<\/span>;<\/span>\n@tailwind<\/span> components<\/span>;<\/span>\n@tailwind<\/span> utilities<\/span>;<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\ntailwind.config.js<\/code> file looks like the below code.
\n<\/p>\n\nmodule<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\n content<\/span>:<\/span> [<\/span>\"<\/span>.\/src\/**\/*.{html,js}<\/span>\"<\/span>],<\/span>\n theme<\/span>:<\/span> {<\/span>\n extend<\/span>:<\/span> {},<\/span>\n },<\/span>\n plugins<\/span>:<\/span> [],<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n \n \n Using Tailwind in React <\/a>\n<\/h3>\n\n
\n<\/p>\n\n<h1<\/span> className=<\/span>\"\"<\/span>><\/span>I'm using Tailwind!<\/h1><\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<\/a><\/p>\n\n
\n<\/p>\n\n<h1<\/span> className=<\/span>\"text-red-700 text-6xl hover:text-9xl\"<\/span>><\/span>I'm using Tailwind!<\/h1><\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<\/a><\/p>\n\nhover<\/code> selector in there. Tailwind takes care of these, similar to how CSS does. You prepend the effect you want and the outcome, and it works just the same.And we can see the style change a little when we hover over the text.<\/p>\n\n<\/a><\/p>\n\n\n \n \n Something a Little More <\/a>\n<\/h3>\n\n
\n<\/p>\n\nexport<\/span> default<\/span> function<\/span> Card<\/span>()<\/span> {<\/span>\n return <\/span>(<\/span>\n <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>p-20 bg-green-100<\/span>\"<\/span>><\/span>\n <<\/span>h3<\/span> class<\/span>=<\/span>\"<\/span>text-green-300 mb-4 text-sm font-bold<\/span>\"<\/span>><\/span>\n This<\/span> is<\/span> some<\/span> cool<\/span> Tailwind<\/span> Stuff<\/span>!<\/span>\n <<\/span>