Why do sites have Cookie Banners?
20 |21 | If you have browsed around enough on the internet, you'll see that 22 | many sites have a banner that pops up explaining the use of cookies 23 | on their site. It seems annoying, but did you know that there are 24 | laws in the EU trying to protect citizens from having their 25 | information gathered without their consent? 26 |
27 | 28 |29 | I've always worked on internal applications for companies or sites 30 | used only by the US, which means I never really took the time to 31 | understand the purpose of these banners. But since I've recently 32 | been working on my 33 | https://icongeneratorai.com 36 | SaaS product, and I've had many users from the EU try to generate 37 | icons, I decided it was time to add in a cookie banner. 38 |
39 | 40 |When do you need a cookie banner?
41 | 42 |43 | If your application uses cookies to track a user, such as using 44 | google analytics, you will need a cookie banner. You should never 45 | inject the google analytics scripts without the user's consent, 46 | which means your "accept all cookies" button should do that google 47 | analytics setup. If the user denies those cookies, you should never 48 | inject those scripts either. You also need to provide a page that 49 | allows users to change their preferences at any time and also a way 50 | for them to clear those cookies from their browser when they decide 51 | they don't want to be tracked. 52 |
53 | 54 |How can you easily implement a cookie banner?
55 | 56 |57 | Recently I found a react library which I imported into my _app.tsx 58 | file in next.js called 59 | https://www.npmjs.com/package/react-cookie-consent. It works pretty well, but honestly if you wanted to build your 64 | own banner it isn't too hard to do. In the banner, you'll want to 65 | make sure the text explains why exactly you are using cookies on 66 | this site and how you may be tracking their information. You will 67 | want a button for them to accept your cookies, and a button for them 68 | to prevent the tracking cookies. Note that authentication-related 69 | cookies are unrelated to this banner. If your site doesn't track 70 | anyone, you don't need a banner because those authentication cookies 71 | are essential for the site to work. 72 |
73 | 74 |75 | I hope you found this little snippet of information useful. Remember 76 | to abide by the laws of your country, and be courteous to your 77 | users; don't just track them without giving them consent. 78 |
79 | 80 |Have a good day, and happy coding!
81 |4 Great Node CLI Ideas to Practice Coding
20 |21 | Many beginners are hyper-focused on learning react and building out 22 | user interfaces, but trying to build our command line tools is an 23 | alternative approach to solidify your knowledge with javascript, 24 | node, and asynchronous programming. CLI tools might sound simple, 25 | but they can easily get complex as well. You need to read from the 26 | user input using command line arguments, you need to run complex 27 | logic using that initial input, and you often ended to write to the 28 | disk or make API requests. By taking the focus away from the UI, you 29 | can focus more on the fundamentals of coding. 30 |
31 | 32 |33 | I wanted to provide you with four intermediate CLI project ideas you 34 | can try building for yourself. I promise to try to build these tools 35 | yourself will make you an overall better problem solver and 36 | javascript developer, and the things learned WILL transfer over to 37 | the front-end side of web development. 38 |
39 | 40 |Converting a CSV file to JSON
41 | 42 |43 | Doing file reading and writing is critical for all programming 44 | languages. Getting better at using node’s standard library for 45 | parsing files will help you understand asynchronous code and maybe 46 | even a little bit more about content types such as utf-8 or binary 47 | you’ll need to understand when writing and reading files. Next, 48 | you’ll need to figure out how to parse the CSV file after you read 49 | it, which you could do by googling around for an existing npm 50 | library or you could try to really stress your fundamental 51 | javascript knowledge by looping over every line in the CSV, 52 | splitting it by comma, and converting it to JSON objects. Finally, 53 | you’ll want to track all of those rows inside an array so that you 54 | can JSON.stringify the array out to a .json file. A lot to learn 55 | from a simple CLI tool. Add in support for command line arguments if 56 | you’re feeling adventurous. 57 |
58 | 59 |CLI Email Sender Tool
60 | 61 |62 | Write a CLI tool that takes in an email address, a subject, and your 63 | email body command line arguments. You could also have the email 64 | addresses or email content come from a file if you are feeling 65 | adventurous. The goal is to write a tool that uses a tool such as 66 | nodemailer to use your Gmail account to send out an email. Learning 67 | this will help you understand how to use third-party npm 68 | dependencies, how to read their documentation, how to use command 69 | line arguments, and a little bit more about how emails work, and 70 | it’s something you can at some point add to the business logic of 71 | your API when people register or forget their password. 72 |
73 | 74 |CLI Hangman Game
75 | 76 |77 | This is a fun project for beginners because it stresses your 78 | knowledge of how you can continuously read and wait for command line 79 | input from the user. You’ll also have to learn how to use the 80 | console log to print out designs and guessed letters to the console. 81 | You’ll need to keep track of which letters the user guessed and 82 | which ones they got correct. You can also take it to the next level 83 | by connecting to an API to fetch a random word that the user will 84 | have to guess. A simple game like this is great practice for various 85 | fundamental things you’ll encounter in the real world like arrays, 86 | looping, promises, API requests, console logging, etc. 87 |
88 | 89 |Image Scaling CLI Tool
90 | 91 |92 | This is a CLI tool that will take in a path to an image file and 93 | scale it down to various smaller device sizes which will allow you 94 | to make more performant websites. Some tools do this for us already, 95 | but learning how to make one yourself using graphicsmagick to load 96 | in images and scale them is good practice with learning how to use 97 | third-party machine dependencies you’d need to set up for node to 98 | invoke. To practice your node sdk skills, use the node’s exec_child 99 | commands to spawn up child processes that can invoke other command 100 | line tools installed on the machine. You’ll also need to learn how 101 | to write these images to the disk. 102 |
103 | 104 |Conclusion
105 |106 | I hope you try to implement these ideas because I do feel they are 107 | great practice. Stay in touch because I plan to make a small paid 108 | course for maybe $2-3 that might build some of these tools and walk 109 | you through how I’d do it. 110 |
111 | 112 |Have a good day, and happy coding!
113 |The First Email
20 |21 | Since this is my first newsletter email, I want to start by saying 22 | thank you all so much for subscribing to my channel. I'm happy to 23 | know that my content has not only helped many of you learn to code 24 | but also some have said they have landed internships and jobs from 25 | watching my videos. 26 |
27 | 28 |29 | So what is the purpose of this newsletter? To be honest, I don't 30 | know yet, but I plan to hopefully use it as another way to send you 31 | all updates on my channel, links to useful resources, maybe links to 32 | exclusive videos I may record, and also maybe some little tips and 33 | tricks related to coding or the tech stack I'm currently using 34 | (typescript, tailwind, next, react, etc). 35 |
36 |37 | If you don't find this content useful, you can unsubscribe using the 38 | link at the bottom of this email, but I would ask you to give me 39 | some feedback if you think of ways I could provide more value to 40 | y'all using this newsletter. 41 |
42 | 43 |What have I been up to?
44 | 45 |46 | This week I've been focusing on building up my brand and trying to 47 | put more effort into marketing my channel. I set up a 48 | twitch channel 51 | channel which I've been multicast streaming to when I do my normal 52 | youtube streams, so be sure to follow if you like watching streams 53 | on twitch. 54 |
55 | 56 |57 | As you already know, I recently changed my channel brand from Web 58 | Dev Junkie to Web Dev Cody. The main reason was I wanted to get my 59 | name in my channel and decided to do it before I got to 100k 60 | subscribers. Also, the word Junkie doesn't have the best connotation 61 | and isn't that respectful for people will real drug addiction 62 | issues. 63 |
64 | 65 |66 | Another approach I'm taking to growing my brand is working on a 67 | personal website which I may use as a portfolio and maybe adding a 68 | blog where I can also publish some of these newsletter updates if 69 | that might be interesting to read for y'all. 70 |
71 | 72 |My personal site using Astro
73 | 74 |75 | I've been hearing some good things about Astro, so I decided to set 76 | up a personal website using Astro. I will be honest, I only created 77 | a single page with the Astro site, but overall I think this 78 | framework is easier to work with compared to Next.js. Don't get me 79 | wrong, next.js is a great framework, but it can be a little 80 | confusing to learn at first. If you're looking into a simple way to 81 | create statically generated sites, Astro might be your solution. It 82 | has the power to create minimal webpages that contain zero 83 | javascript unless you manually add in interactivity. 84 |
85 | 86 |87 | I also decided to deploy this site using AWS Amplify. Amplify is 88 | another piece of technology I hear a lot about, and I use many AWS 89 | services at work so I figured I'd give it a try. Amplify isn't as 90 | user-friendly as something like vercel or railway, but it will build 91 | and deploy your next application to the CloudFront CDN which means 92 | your static files will load fast for your users. It's also really 93 | cheap to deploy using amplify. 94 |
95 | 96 |
97 | You can watch
98 |
102 | my video
103 |
104 | of me talking about how I hosted my astro site using AWS amplify the
105 | following video
106 |
107 |
111 | 
116 |
117 |
Making my newsletter production ready
120 | 121 |122 | I published two live streams this week where I worked on adding some 123 | integration and e2e cypress tests on my newsletter application. 124 |
125 | 126 |127 | Learning how to write tests is critical for building quality 128 | software applications. When you're on a large team of engineers who 129 | are committing code multiple times daily, it is very easy to 130 | accidentally break a feature for your users. Some projects may have 131 | a dedicated QA team to review changes, but this can often cause 132 | slowdowns in your deployment process. Automated tests, written by 133 | the developers who add the features, intend to run similar checks 134 | against a local or deployed application to verify the correctness of 135 | the website. 136 |
137 | 138 |139 | I use cypress at work since I find it easy to use, but there is also 140 | another testing framework called playwright which I hear great 141 | things about. I'll try to experiment with playwright testing when I 142 | get some time. For my integration and unit tests, I plan to use Jest 143 | since that is what I'm used to, but I also hear vitest is a very 144 | fast testing framework that might be worth transitioning to due to 145 | performance reasons. 146 |
147 | 148 |149 | If you are interested in learning more about testing with jest or 150 | cypress, be sure to check out my 151 | first live stream. 156 |
157 | 158 | 159 |
164 |
165 |
166 | 167 | and 168 | second live stream. 173 |
174 | 175 | 176 |
181 |
182 |
183 | The Importance of Problem Solving
184 | 185 |186 | When you are first learning how to code, there are many challenges 187 | you will have to overcome. For example, there are new things I 188 | encountered while trying to build out this newsletter application. 189 | Styling HTML emails is very difficult, so thankfully I stumbled upon 190 | something called MJML which helps you write email templates that 191 | convert to HTML. A lot of the problems I encountered can be solved 192 | by following a simple approach of breaking the problem down into 193 | small problems. 194 |
195 | 196 |197 | All software involves problem-solving. Some of the problems have 198 | been solved by others, but you'll still need to search google for 199 | those solutions and piece the puzzles together. Sometimes you'll run 200 | into problems you have to solve yourself. Overall, the only way to 201 | get great at coding is to practice solving more and more problems 202 | until most problems you encounter are ones you've solved in the 203 | past. 204 |
205 | 206 |207 | Most larger problems are made up of smaller sub-problems. Check out 208 | the following 209 | video 214 | to get a better understanding of how to break down a problem 215 |
216 | 217 | 218 |
223 |
224 |
225 | Our community Dungeon Crawler is coming along
226 | 227 |228 | For those who don't know, I've been trying to spend some time this 229 | week working on a dungeon crawler game with some other discord 230 | users. I've always wanted to finish one game, so I'm hoping this 231 | project can at least get to an MVP state where some subscribers can 232 | play and have some fun playing. The main focus I've been working on 233 | is the inventory system to allow users to pick up items, drop items, 234 | use items, and equip items. I plan to add in the ability for players 235 | to equip certain types of items this week, so stay tuned for an 236 | updated video related. 237 |
238 | 239 |240 | To follow along with this project, be sure to check out my 241 | video 246 | where I start working on the inventory system 247 |
248 | 249 | 250 |
255 |
256 |
257 | Stay tuned for updates
258 |259 | That was a short update with the things I've been working on and 260 | just some random thoughts on the software. If you have feedback for 261 | me regarding this newsletter, feel free to join my discord and send 262 | me a message. 263 |
264 | 265 |Have a good day and happy coding!
266 |Just Learn HTML and CSS!
11 | 12 |So, you're new to web development and overwhelmed with how much there is to learn. Many people online regurgitate the same "just learn HTML and CSS." How much should you learn? When do you know you've learned enough before progressing to complex topics like vanilla javascript and front-end frameworks like React?
13 | 14 |15 | My rule of thumb for when you know enough HTML and CSS is pretty simple: when you can look at many websites or even the widgets that make up the website and confidently state, "yeah, I can build this," then you're at the point where it's time to progress into more complex topics.
16 |Why do I say this should be your goal? Well, when working as a professional web developer, you'll often work with graphic designers or user experience members who create design mock-ups or design proofs. Your job is to take these designs and convert them to code. The more efficient you can get at doing a task like this, the better you'll become as a front-end developer. 17 |
18 | 19 |
20 | A great way to improve with HTML and CSS is to follow this same pattern done in the industry by trying to replicate existing designs. Let's take this rating widget as an example below taken from frontendmentor.io:
21 |
22 | 
23 |
24 |
This widget is pretty simple, but for a beginner, there are many new things you'll need to understand. How do you evenly space out buttons? How do I add hover effects on these buttons? How do I add a rounded gray background to images? How do I make a panel with rounded corners?
28 | 29 |30 | Figuring out how to build these widgets usually always breaks down to knowing how to solve the smaller individual questions we talked about above. For example, the better you get at identifying you can use border-radius to round corners or make circles, creating this panel becomes less intimidating.
31 | 32 |33 | 34 | Since this is a newsletter to help give tips related to web development, I might as well explain some of the css properties you can use to style this widget: 35 |
36 | 37 |-
38 |
- border-radius: 50% - a great way to make elements circle 39 |
- border-radius: 20px - a way to round the edges on elements 40 |
- :hover - a pseudo-class styling a elements on hover 41 |
- :focus - a pseudo-class for changing the style of elements when focused 42 |
- padding: 20px - add some internal padding to the element to move content away from the edges 43 |
- background: blue - to make an elements background color blue 44 |
- display: flex - a way to change the layout of children inside an container 45 |
- justify-content: space-between - a way to add equal space between the children of the flex container 46 |
- flex-direction: column - change the axis of the flex container to instead be verical 47 |
- text-align: center - center all text and images in the center of the container 48 |
51 | Those are just a few of the css properties needed to build out this widget, but the point I'm trying to make is this: solve more problems. It'll help you improve at identifying which properties and pseudo-classes you can use style your widgets and webpages. The more things you build, the more of these properties you will commit to memory so that the next time you need to center an element or round a corner it'll be muscle memory.
52 |53 | If you're interested in watching me implement this widget myself, be sure to checkout my youtube video and my channel webdevcody 54 |
55 |My T3 Stack Course
20 |Hey subscribers!
21 | 22 |23 | Those of you who have been watching my channel will know that one of 24 | the recent projects I've worked on was a full-stack SaaS that 25 | generated icons using artificial intelligence. I really enjoyed 26 | working on this side project and it uses many useful technologies 27 | that I feel others should learn if trying to become a web developer. 28 |
29 | 30 |31 | As I mentioned in my channel, I've been working on a short course to 32 | help teach others how to build out a similar application that uses 33 | the same technologies that I used on my production-ready 34 | application. 35 |
36 | 37 |38 | Well, great news! I've finally managed to finish my course that 39 | you're welcome to go purchase if learning the same technologies I 40 | used sounds interesting to you. 41 |
42 | 43 |44 | Here is the link to the course: 45 | 46 | https://1017897100294.gumroad.com/l/jipjfm. Be sure to use the following code of 9LX2QSM to get a 30% 48 | discount. 49 |
50 | 51 |What's Will You Learn?
52 | 53 |54 | As mentioned, the following technologies are used in this course. 55 |
56 | 57 |-
58 |
- T3 Stack 59 |
- Typescript 60 |
- Prisma 61 |
- tRPC 62 |
- Tailwind CSS 63 |
- Next Auth 64 |
- AWS S3 65 |
- AWS Amplify 66 |
- Dall-e API 67 |
- Stripe 68 |
- and probably more... 69 |
72 | The course contains 6 hours of content which is split up 73 | between 32 videos. I provide high level diagrams in the 74 | course to really help explain what we will build and how we will 75 | build it out. It has a 30 day return policy, so feel free to contact 76 | me if you are not happy with the course. 77 |
78 | 79 |Who is this course made for?
80 | 81 |82 | As mentioned on the course page, this course isn't for complete 83 | beginners. I expect you have some knowledge of using javascript and 84 | maybe understand how to create react components. Having some 85 | exposure to tailwind css might help as well. The way I teach this 86 | course is very similar to how I make my youtube videos, so please go 87 | watch some of my free T3 stack videos on my youtube channel to get 88 | an idea of the teaching style. 89 |
90 | 91 |92 | Again, here is the course: 93 | 94 | https://1017897100294.gumroad.com/l/jipjfm. Be sure to use the following code of 9LX2QSM to get a 30% 96 | discount 97 |
98 | 99 |Have a good day and happy coding!
100 |20 | Welcome to the WebDevCody Newsletter! 21 |
22 | 23 |24 | If you received this email, you're all set to get future emails when 25 | I publish weekly content updates, new courses, or useful learning 26 | materials. 27 |
28 |
|
ERROR also works !!!
8 | 9 | 10 | -------------------------------------------------------------------------------- /infra/site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |It works !!!
8 | 9 | 10 | -------------------------------------------------------------------------------- /infra/site/main.tf: -------------------------------------------------------------------------------- 1 | terraform { 2 | required_version = ">= 1.2.0" 3 | required_providers { 4 | aws = { 5 | source = "hashicorp/aws" 6 | version = "~> 4.0" 7 | } 8 | } 9 | } 10 | 11 | provider "aws" { 12 | region = "us-east-1" 13 | alias = "aws_cloudfront" 14 | } 15 | 16 | locals { 17 | default_certs = [] 18 | acm_certs = "acm" 19 | domain_name = var.domain_name 20 | } 21 | 22 | data "aws_iam_policy_document" "s3_bucket_policy" { 23 | statement { 24 | sid = "1" 25 | 26 | actions = [ 27 | "s3:GetObject", 28 | ] 29 | 30 | resources = [ 31 | "arn:aws:s3:::${var.domain_name}/*", 32 | ] 33 | 34 | principals { 35 | type = "AWS" 36 | 37 | identifiers = [ 38 | aws_cloudfront_origin_access_identity.origin_access_identity.iam_arn, 39 | ] 40 | } 41 | } 42 | } 43 | 44 | resource "aws_s3_bucket" "s3_bucket" { 45 | bucket = var.domain_name 46 | tags = var.tags 47 | } 48 | resource "aws_s3_bucket_policy" "s3_bucket_policy" { 49 | bucket = aws_s3_bucket.s3_bucket.id 50 | policy = data.aws_iam_policy_document.s3_bucket_policy.json 51 | 52 | } 53 | 54 | resource "aws_s3_bucket_website_configuration" "s3_bucket" { 55 | bucket = aws_s3_bucket.s3_bucket.id 56 | 57 | index_document { 58 | suffix = "index.html" 59 | } 60 | 61 | error_document { 62 | key = "error.html" 63 | } 64 | } 65 | 66 | resource "aws_s3_bucket_acl" "s3_bucket" { 67 | bucket = var.domain_name 68 | acl = "private" 69 | } 70 | 71 | resource "aws_s3_bucket_versioning" "s3_bucket" { 72 | bucket = var.domain_name 73 | versioning_configuration { 74 | status = "Enabled" 75 | } 76 | } 77 | 78 | resource "aws_s3_object" "object" { 79 | count = var.upload_sample_file ? 1 : 0 80 | bucket = aws_s3_bucket.s3_bucket.bucket 81 | key = "index.html" 82 | source = "${path.module}/index.html" 83 | content_type = "text/html" 84 | etag = filemd5("${path.module}/index.html") 85 | } 86 | resource "aws_s3_object" "errorobject" { 87 | count = var.upload_sample_file ? 1 : 0 88 | bucket = aws_s3_bucket.s3_bucket.bucket 89 | key = "error.html" 90 | source = "${path.module}/error.html" 91 | content_type = "text/html" 92 | etag = filemd5("${path.module}/error.html") 93 | } 94 | 95 | data "aws_acm_certificate" "issued" { 96 | domain = var.acm_certificate_domain 97 | statuses = ["ISSUED"] 98 | } 99 | 100 | resource "aws_cloudfront_distribution" "s3_distribution" { 101 | depends_on = [ 102 | aws_s3_bucket.s3_bucket 103 | ] 104 | 105 | origin { 106 | domain_name = aws_s3_bucket.s3_bucket.bucket_regional_domain_name 107 | origin_id = "s3-cloudfront" 108 | 109 | s3_origin_config { 110 | origin_access_identity = aws_cloudfront_origin_access_identity.origin_access_identity.cloudfront_access_identity_path 111 | } 112 | } 113 | 114 | enabled = true 115 | is_ipv6_enabled = true 116 | default_root_object = "index.html" 117 | 118 | aliases = [local.domain_name] 119 | 120 | price_class = "PriceClass_100" 121 | 122 | default_cache_behavior { 123 | allowed_methods = [ 124 | "GET", 125 | "HEAD", 126 | ] 127 | 128 | cached_methods = [ 129 | "GET", 130 | "HEAD", 131 | ] 132 | 133 | target_origin_id = "s3-cloudfront" 134 | 135 | forwarded_values { 136 | query_string = false 137 | 138 | cookies { 139 | forward = "none" 140 | } 141 | } 142 | 143 | viewer_protocol_policy = "redirect-to-https" 144 | 145 | min_ttl = var.cloudfront_min_ttl 146 | default_ttl = var.cloudfront_default_ttl 147 | max_ttl = var.cloudfront_max_ttl 148 | } 149 | 150 | restrictions { 151 | geo_restriction { 152 | restriction_type = "none" 153 | locations = [] 154 | } 155 | } 156 | 157 | viewer_certificate { 158 | acm_certificate_arn = data.aws_acm_certificate.issued.arn 159 | ssl_support_method = "sni-only" 160 | minimum_protocol_version = "TLSv1" 161 | } 162 | 163 | custom_error_response { 164 | error_code = 403 165 | response_code = 200 166 | error_caching_min_ttl = 0 167 | response_page_path = "/index.html" 168 | } 169 | 170 | wait_for_deployment = false 171 | tags = var.tags 172 | } 173 | 174 | resource "aws_cloudfront_origin_access_identity" "origin_access_identity" { 175 | comment = "access-identity-${var.domain_name}.s3.amazonaws.com" 176 | } 177 | -------------------------------------------------------------------------------- /infra/site/outputs.tf: -------------------------------------------------------------------------------- 1 | output "cloudfront_domain_name" { 2 | value = aws_cloudfront_distribution.s3_distribution.domain_name 3 | } 4 | 5 | output "cloudfront_dist_id" { 6 | value = aws_cloudfront_distribution.s3_distribution.id 7 | } 8 | 9 | output "s3_domain_name" { 10 | value = aws_s3_bucket_website_configuration.s3_bucket.website_domain 11 | } 12 | 13 | output "website_address" { 14 | value = var.domain_name 15 | } 16 | 17 | output "s3_bucket_arn" { 18 | value = aws_s3_bucket.s3_bucket.arn 19 | } 20 | 21 | output "s3_bucket_name" { 22 | value = aws_s3_bucket.s3_bucket.id 23 | } 24 | -------------------------------------------------------------------------------- /infra/site/variables.tf: -------------------------------------------------------------------------------- 1 | variable "domain_name" { 2 | description = "domain name (or application name if no domain name available)" 3 | } 4 | 5 | variable "tags" { 6 | type = map(string) 7 | default = {} 8 | description = "tags for all the resources, if any" 9 | } 10 | 11 | variable "hosted_zone" { 12 | default = null 13 | description = "Route53 hosted zone" 14 | } 15 | 16 | variable "acm_certificate_domain" { 17 | default = null 18 | description = "Domain of the ACM certificate" 19 | } 20 | 21 | variable "upload_sample_file" { 22 | default = false 23 | description = "Upload sample html file to s3 bucket" 24 | } 25 | 26 | variable "cloudfront_min_ttl" { 27 | default = 0 28 | description = "The minimum TTL for the cloudfront cache" 29 | } 30 | 31 | variable "cloudfront_default_ttl" { 32 | default = 86400 33 | description = "The default TTL for the cloudfront cache" 34 | } 35 | 36 | variable "cloudfront_max_ttl" { 37 | default = 31536000 38 | description = "The maximum TTL for the cloudfront cache" 39 | } 40 | -------------------------------------------------------------------------------- /infra/state.tf: -------------------------------------------------------------------------------- 1 | terraform { 2 | backend "s3" { 3 | bucket = "wdc-newsletter-manager-terraform-state" 4 | key = "state/terraform.tfstate" 5 | region = "us-east-1" 6 | dynamodb_table = "terraform-state" 7 | } 8 | } 9 | 10 | 11 | resource "aws_s3_bucket" "terraform-state" { 12 | bucket = "wdc-newsletter-manager-terraform-state" 13 | acl = "private" 14 | 15 | versioning { 16 | enabled = true 17 | } 18 | } 19 | 20 | resource "aws_s3_bucket_public_access_block" "block" { 21 | bucket = aws_s3_bucket.terraform-state.id 22 | 23 | block_public_acls = true 24 | block_public_policy = true 25 | ignore_public_acls = true 26 | restrict_public_buckets = true 27 | } 28 | 29 | resource "aws_dynamodb_table" "terraform-state" { 30 | name = "terraform-state" 31 | hash_key = "LockID" 32 | billing_mode = "PAY_PER_REQUEST" 33 | 34 | attribute { 35 | name = "LockID" 36 | type = "S" 37 | } 38 | } -------------------------------------------------------------------------------- /infra/terraform.tfstate: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webdevcody/newsletter-manager/a5c9adde55e286de00c9d34ce2d48c882a2f4b9e/infra/terraform.tfstate -------------------------------------------------------------------------------- /infra/terraform.tfstate.backup: -------------------------------------------------------------------------------- 1 | { 2 | "version": 4, 3 | "terraform_version": "1.3.7", 4 | "serial": 6, 5 | "lineage": "9cf0aff1-ebf2-f055-d402-e3ca877e3c2b", 6 | "outputs": {}, 7 | "resources": [ 8 | { 9 | "mode": "managed", 10 | "type": "aws_dynamodb_table", 11 | "name": "terraform-state", 12 | "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]", 13 | "instances": [ 14 | { 15 | "schema_version": 1, 16 | "attributes": { 17 | "arn": "arn:aws:dynamodb:us-east-1:493255580566:table/terraform-state", 18 | "attribute": [ 19 | { 20 | "name": "LockID", 21 | "type": "S" 22 | } 23 | ], 24 | "billing_mode": "PROVISIONED", 25 | "global_secondary_index": [], 26 | "hash_key": "LockID", 27 | "id": "terraform-state", 28 | "local_secondary_index": [], 29 | "name": "terraform-state", 30 | "point_in_time_recovery": [ 31 | { 32 | "enabled": false 33 | } 34 | ], 35 | "range_key": null, 36 | "read_capacity": 20, 37 | "replica": [], 38 | "restore_date_time": null, 39 | "restore_source_name": null, 40 | "restore_to_latest_time": null, 41 | "server_side_encryption": [], 42 | "stream_arn": "", 43 | "stream_enabled": false, 44 | "stream_label": "", 45 | "stream_view_type": "", 46 | "table_class": "", 47 | "tags": null, 48 | "tags_all": {}, 49 | "timeouts": null, 50 | "ttl": [ 51 | { 52 | "attribute_name": "", 53 | "enabled": false 54 | } 55 | ], 56 | "write_capacity": 20 57 | }, 58 | "sensitive_attributes": [], 59 | "private": "eyJlMmJmYjczMC1lY2FhLTExZTYtOGY4OC0zNDM2M2JjN2M0YzAiOnsiY3JlYXRlIjoxODAwMDAwMDAwMDAwLCJkZWxldGUiOjYwMDAwMDAwMDAwMCwidXBkYXRlIjozNjAwMDAwMDAwMDAwfSwic2NoZW1hX3ZlcnNpb24iOiIxIn0=" 60 | } 61 | ] 62 | }, 63 | { 64 | "mode": "managed", 65 | "type": "aws_kms_alias", 66 | "name": "key-alias", 67 | "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]", 68 | "instances": [ 69 | { 70 | "schema_version": 0, 71 | "attributes": { 72 | "arn": "arn:aws:kms:us-east-1:493255580566:alias/terraform-bucket-key", 73 | "id": "alias/terraform-bucket-key", 74 | "name": "alias/terraform-bucket-key", 75 | "name_prefix": "", 76 | "target_key_arn": "arn:aws:kms:us-east-1:493255580566:key/35f833f5-2f9e-464f-97ce-2277a807b6af", 77 | "target_key_id": "35f833f5-2f9e-464f-97ce-2277a807b6af" 78 | }, 79 | "sensitive_attributes": [], 80 | "private": "bnVsbA==", 81 | "dependencies": [ 82 | "aws_kms_key.terraform-bucket-key" 83 | ] 84 | } 85 | ] 86 | }, 87 | { 88 | "mode": "managed", 89 | "type": "aws_kms_key", 90 | "name": "terraform-bucket-key", 91 | "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]", 92 | "instances": [ 93 | { 94 | "schema_version": 0, 95 | "attributes": { 96 | "arn": "arn:aws:kms:us-east-1:493255580566:key/35f833f5-2f9e-464f-97ce-2277a807b6af", 97 | "bypass_policy_lockout_safety_check": false, 98 | "custom_key_store_id": "", 99 | "customer_master_key_spec": "SYMMETRIC_DEFAULT", 100 | "deletion_window_in_days": 10, 101 | "description": "This key is used to encrypt bucket objects", 102 | "enable_key_rotation": true, 103 | "id": "35f833f5-2f9e-464f-97ce-2277a807b6af", 104 | "is_enabled": true, 105 | "key_id": "35f833f5-2f9e-464f-97ce-2277a807b6af", 106 | "key_usage": "ENCRYPT_DECRYPT", 107 | "multi_region": false, 108 | "policy": "{\"Id\":\"key-default-1\",\"Statement\":[{\"Action\":\"kms:*\",\"Effect\":\"Allow\",\"Principal\":{\"AWS\":\"arn:aws:iam::493255580566:root\"},\"Resource\":\"*\",\"Sid\":\"Enable IAM User Permissions\"}],\"Version\":\"2012-10-17\"}", 109 | "tags": null, 110 | "tags_all": {} 111 | }, 112 | "sensitive_attributes": [], 113 | "private": "bnVsbA==" 114 | } 115 | ] 116 | }, 117 | { 118 | "mode": "managed", 119 | "type": "aws_s3_bucket", 120 | "name": "terraform-state", 121 | "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]", 122 | "instances": [ 123 | { 124 | "schema_version": 0, 125 | "attributes": { 126 | "acceleration_status": "", 127 | "acl": "private", 128 | "arn": "arn:aws:s3:::wdc-newsletter-manager-terraform-state", 129 | "bucket": "wdc-newsletter-manager-terraform-state", 130 | "bucket_domain_name": "wdc-newsletter-manager-terraform-state.s3.amazonaws.com", 131 | "bucket_prefix": null, 132 | "bucket_regional_domain_name": "wdc-newsletter-manager-terraform-state.s3.amazonaws.com", 133 | "cors_rule": [], 134 | "force_destroy": false, 135 | "grant": [ 136 | { 137 | "id": "811f261a17d743956aa1d7cac49f35c78fd2f1cbece56ecb30920856a7b069dd", 138 | "permissions": [ 139 | "FULL_CONTROL" 140 | ], 141 | "type": "CanonicalUser", 142 | "uri": "" 143 | } 144 | ], 145 | "hosted_zone_id": "Z3AQBSTGFYJSTF", 146 | "id": "wdc-newsletter-manager-terraform-state", 147 | "lifecycle_rule": [], 148 | "logging": [], 149 | "object_lock_configuration": [], 150 | "object_lock_enabled": false, 151 | "policy": "", 152 | "region": "us-east-1", 153 | "replication_configuration": [], 154 | "request_payer": "BucketOwner", 155 | "server_side_encryption_configuration": [ 156 | { 157 | "rule": [ 158 | { 159 | "apply_server_side_encryption_by_default": [ 160 | { 161 | "kms_master_key_id": "arn:aws:kms:us-east-1:493255580566:key/35f833f5-2f9e-464f-97ce-2277a807b6af", 162 | "sse_algorithm": "aws:kms" 163 | } 164 | ], 165 | "bucket_key_enabled": false 166 | } 167 | ] 168 | } 169 | ], 170 | "tags": null, 171 | "tags_all": {}, 172 | "timeouts": null, 173 | "versioning": [ 174 | { 175 | "enabled": true, 176 | "mfa_delete": false 177 | } 178 | ], 179 | "website": [], 180 | "website_domain": null, 181 | "website_endpoint": null 182 | }, 183 | "sensitive_attributes": [], 184 | "private": "eyJlMmJmYjczMC1lY2FhLTExZTYtOGY4OC0zNDM2M2JjN2M0YzAiOnsiY3JlYXRlIjoxMjAwMDAwMDAwMDAwLCJkZWxldGUiOjM2MDAwMDAwMDAwMDAsInJlYWQiOjEyMDAwMDAwMDAwMDAsInVwZGF0ZSI6MTIwMDAwMDAwMDAwMH19", 185 | "dependencies": [ 186 | "aws_kms_key.terraform-bucket-key" 187 | ] 188 | } 189 | ] 190 | }, 191 | { 192 | "mode": "managed", 193 | "type": "aws_s3_bucket_public_access_block", 194 | "name": "block", 195 | "provider": "provider[\"registry.terraform.io/hashicorp/aws\"]", 196 | "instances": [ 197 | { 198 | "schema_version": 0, 199 | "attributes": { 200 | "block_public_acls": true, 201 | "block_public_policy": true, 202 | "bucket": "wdc-newsletter-manager-terraform-state", 203 | "id": "wdc-newsletter-manager-terraform-state", 204 | "ignore_public_acls": true, 205 | "restrict_public_buckets": true 206 | }, 207 | "sensitive_attributes": [], 208 | "private": "bnVsbA==", 209 | "dependencies": [ 210 | "aws_kms_key.terraform-bucket-key", 211 | "aws_s3_bucket.terraform-state" 212 | ] 213 | } 214 | ] 215 | } 216 | ], 217 | "check_results": null 218 | } 219 | -------------------------------------------------------------------------------- /load-env.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | export $(cat $1 | xargs) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newsletter-manager", 3 | "version": "1.0.0", 4 | "description": "", 5 | "private": true, 6 | "main": "index.js", 7 | "scripts": { 8 | "deploy:api": "yarn workspace @wdc-newsletter/api deploy" 9 | }, 10 | "workspaces": { 11 | "packages": [ 12 | "business", 13 | "ui", 14 | "e2e", 15 | "api", 16 | "scripts" 17 | ] 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/webdevcody/newsletter-manager.git" 22 | }, 23 | "keywords": [], 24 | "author": "Cody Seibert", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/webdevcody/newsletter-manager/issues" 28 | }, 29 | "homepage": "https://github.com/webdevcody/newsletter-manager#readme", 30 | "devDependencies": { 31 | "cypress": "^12.5.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scripts/integration_tests/sendEmailsCli.test.ts: -------------------------------------------------------------------------------- 1 | import { exec } from "child_process"; 2 | import { mkdirSync, readdirSync, readFileSync, rmSync } from "fs"; 3 | import fsExtra from "fs-extra"; 4 | import { 5 | env, 6 | getSubscriptionByEmailFactory, 7 | saveSubscriptionFactory, 8 | sendEmailFactory, 9 | subscribeUseCase, 10 | TSesConfig, 11 | } from "@wdc-newsletter/business"; 12 | import { expect, describe, it } from "@jest/globals"; 13 | import { TDynamoConfig } from "@wdc-newsletter/business/src/persistence/dynamo"; 14 | 15 | const OUTPUT_EMAIL_FILE_PATH = "../output"; 16 | 17 | const dynamoConfig: TDynamoConfig = { 18 | region: env.REGION, 19 | accessKeyId: env.ACCESS_KEY, 20 | secretAccessKey: env.SECRET_KEY, 21 | endpoint: env.DYNAMO_ENDPOINT, 22 | }; 23 | 24 | /** 25 | * This integration test expects the docker-compose to be up. 26 | */ 27 | describe("sendEmails command line tool", () => { 28 | beforeEach(() => { 29 | jest.setTimeout(30000); 30 | }); 31 | 32 | it("should send out emails to the expected subscribed emails in our database", async () => { 33 | fsExtra.emptyDirSync(OUTPUT_EMAIL_FILE_PATH); 34 | 35 | const subscriberEmails = ["webdevcody@gmail.com", "bob@example.com"]; 36 | 37 | for (const email of subscriberEmails) { 38 | await subscribeUseCase( 39 | { 40 | getSubscriptionByEmail: getSubscriptionByEmailFactory(dynamoConfig), 41 | saveSubscription: saveSubscriptionFactory(dynamoConfig), 42 | }, 43 | email 44 | ); 45 | } 46 | 47 | await new Promise
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/scripts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@wdc-newsletter/scripts",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "import": "tsx src/import.ts",
8 | "test:unit": "jest src",
9 | "test:integration": "jest integration_tests",
10 | "remove-bounced": "tsx ./src/removeBouncedEmailCli.ts"
11 | },
12 | "keywords": [],
13 | "author": "Cody Seibert",
14 | "license": "MIT",
15 | "devDependencies": {
16 | "@jest/globals": "^29.4.1",
17 | "@types/node": "^18.11.18",
18 | "tsx": "^4.7.0"
19 | },
20 | "dependencies": {
21 | "@wdc-newsletter/business": "*",
22 | "aws-sdk": "^2.1306.0",
23 | "dotenv": "^16.0.3",
24 | "fs-extra": "^11.1.0",
25 | "mjml": "^4.13.0",
26 | "uuid": "^9.0.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/scripts/src/.gitignore:
--------------------------------------------------------------------------------
1 | emails.json
--------------------------------------------------------------------------------
/scripts/src/expectedHtml.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/scripts/src/import.ts:
--------------------------------------------------------------------------------
1 | import "dotenv/config";
2 | import { DynamoDB } from "aws-sdk";
3 | import { v4 as uuidv4 } from "uuid";
4 | import fs from "fs";
5 | import path from "path";
6 |
7 | const emails = JSON.parse(
8 | fs.readFileSync(path.join(__dirname, "./emails.json"), "utf-8")
9 | ) as string[];
10 |
11 | const client = new DynamoDB.DocumentClient({
12 | region: process.env.REGION,
13 | credentials: {
14 | accessKeyId: process.env.ACCESS_KEY!,
15 | secretAccessKey: process.env.SECRET_KEY!,
16 | },
17 | });
18 |
19 | async function subscribe(email: string) {
20 | const { Item: subscription } = await client
21 | .get({
22 | TableName: process.env.TABLE_NAME,
23 | Key: {
24 | pk: `email|${email}`,
25 | sk: `email|${email}`,
26 | },
27 | })
28 | .promise();
29 |
30 | if (subscription) {
31 | console.info(`skipping ${email} - already subscribed.`);
32 | return;
33 | }
34 |
35 | const unsubscribeId = uuidv4();
36 | await client
37 | .put({
38 | TableName: process.env.TABLE_NAME,
39 | Item: {
40 | pk: `email|${email}`,
41 | sk: `email|${email}`,
42 | email: email,
43 | unsubscribeId,
44 | },
45 | })
46 | .promise();
47 | }
48 |
49 | async function main() {
50 | for (const email of emails) {
51 | console.time(`subscribing ${email}`);
52 | await subscribe(email);
53 | console.timeEnd(`subscribing ${email}`);
54 | }
55 | }
56 |
57 | main().catch(console.error);
58 |
--------------------------------------------------------------------------------
/scripts/src/migration.ts:
--------------------------------------------------------------------------------
1 | import "dotenv/config";
2 | import { remove, scan } from "@wdc-newsletter/business/src/persistence/dynamo";
3 | import { getDynamoConfig } from "./util/getConfigs";
4 | import { verifyEnv } from "./util/verifyEnv";
5 |
6 | ["REGION", "ACCESS_KEY", "SECRET_KEY", "DYNAMO_ENDPOINT"].forEach(verifyEnv);
7 |
8 | const dynamoConfig = getDynamoConfig();
9 |
10 | async function main() {
11 | const subscriptions = await scan(dynamoConfig);
12 | const toDeleteList = subscriptions.filter((item) =>
13 | item.pk.startsWith("subscription|")
14 | );
15 |
16 | for (const toDelete of toDeleteList) {
17 | console.log("deleting", toDelete);
18 | await remove(dynamoConfig, {
19 | pk: toDelete.pk,
20 | sk: toDelete.sk,
21 | });
22 | }
23 | }
24 |
25 | main().catch(console.error);
26 |
--------------------------------------------------------------------------------
/scripts/src/removeBouncedEmail.ts:
--------------------------------------------------------------------------------
1 | import {
2 | TGetSubscriptionByEmail,
3 | TRemoveBouncedEmailUseCase,
4 | TRemoveSubscription,
5 | } from "@wdc-newsletter/business";
6 |
7 | export async function removeBouncedEmail({
8 | getArguments,
9 | removeBouncedEmailUseCase,
10 | getSubscriptionByEmail,
11 | removeSubscription,
12 | }: {
13 | getArguments: () => string[];
14 | removeBouncedEmailUseCase: TRemoveBouncedEmailUseCase;
15 | getSubscriptionByEmail: TGetSubscriptionByEmail;
16 | removeSubscription: TRemoveSubscription;
17 | }) {
18 | const [email] = getArguments();
19 |
20 | if (!email) {
21 | throw new Error("email is required as an argument but was not provided");
22 | }
23 |
24 | await removeBouncedEmailUseCase(
25 | {
26 | getSubscriptionByEmail,
27 | removeSubscription,
28 | },
29 | email
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/scripts/src/removeBouncedEmailCli.ts:
--------------------------------------------------------------------------------
1 | import {
2 | removeBouncedEmailUseCase,
3 | getSubscriptionByEmailFactory,
4 | removeSubscriptionFactory,
5 | } from "@wdc-newsletter/business";
6 | import { removeBouncedEmail } from "./removeBouncedEmail";
7 | import { getDynamoConfig } from "./util/getConfigs";
8 | import { verifyEnv } from "./util/verifyEnv";
9 |
10 | ["REGION", "ACCESS_KEY", "SECRET_KEY", "DYNAMO_ENDPOINT"].forEach(verifyEnv);
11 |
12 | const dynamoConfig = getDynamoConfig();
13 |
14 | const email = process.argv?.slice(2)[0];
15 |
16 | removeBouncedEmail({
17 | getArguments: () => [email],
18 | removeBouncedEmailUseCase,
19 | getSubscriptionByEmail: getSubscriptionByEmailFactory(dynamoConfig),
20 | removeSubscription: removeSubscriptionFactory(dynamoConfig),
21 | })
22 | .catch((error) => {
23 | throw error;
24 | })
25 | .finally(() => {
26 | console.info(`${email} was removed`);
27 | });
28 |
--------------------------------------------------------------------------------
/scripts/src/sendEmails.test.ts:
--------------------------------------------------------------------------------
1 | import { sendEmails } from "./sendEmails";
2 | import fs from "fs";
3 | import { describe, expect, it, jest } from "@jest/globals";
4 |
5 | const expectedHtml = fs.readFileSync("./src/expectedHtml.html", "utf-8");
6 |
7 | describe("sendEmails", () => {
8 | it("should throw an error if subject is not provided for the first argument", async () => {
9 | await expect(
10 | sendEmails({
11 | readFile: jest.fn(() => "contents"),
12 | getArguments: () => [],
13 | sendNewsletterUseCase: jest.fn(() => Promise.resolve()),
14 | getSubscriptions: async () => [],
15 | sendEmail: async () => undefined,
16 | })
17 | ).rejects.toThrow(
18 | "subject is required as an argument $1 but was not provided"
19 | );
20 | });
21 |
22 | it("should throw an error if mjml file path is not provided for the second argument", async () => {
23 | await expect(
24 | sendEmails({
25 | readFile: jest.fn(() => "contents"),
26 | getArguments: () => ["welcome to webdevcody newsletter"],
27 | sendNewsletterUseCase: jest.fn(() => Promise.resolve()),
28 | getSubscriptions: async () => [],
29 | sendEmail: async () => undefined,
30 | })
31 | ).rejects.toThrow(
32 | "mjml file path is required as an argument $2 but was not provided"
33 | );
34 | });
35 |
36 | it("should attempt to load in the mjml file, convert it to html, and send it out using the use case", async () => {
37 | const sendNewsletterUseCaseSpy = jest.fn(() => Promise.resolve());
38 | await sendEmails({
39 | readFile: () => "
7 |
21 |
22 | {props.children}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/ui/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 |
3 | interface Props extends React.ComponentPropsWithoutRef<"button"> {
4 | isLoading?: boolean;
5 | }
6 |
7 | export function Button(props: Props) {
8 | const { isLoading, ...rest } = props;
9 |
10 | return (
11 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/ui/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { GlobeIcon } from "./icons/GlobeIcon";
2 | import { TwitchIcon } from "./icons/TwitchIcon";
3 | import { TwitterIcon } from "./icons/TwitterIcon";
4 | import { YouTubeIcon } from "./icons/YouTubeIcon";
5 |
6 | export function Footer() {
7 | return (
8 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/ui/src/components/Input.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 |
3 | export function Input(props: React.HTMLProps
52 | Subscribe to the
53 |
WebDevCody Newsletter
54 |
55 | 56 | Subscribe to my newsletter and receive weekly updates on any community 57 | projects we are starting, recently published videos, and updates on 58 | new tutorials and courses. 59 |
60 | 61 | {error && ( 62 |{error}
63 | )}
64 |
65 |
90 | Successfully subscribed!
22 |23 | I hope you enjoy the content I produce and it helps you become a 24 | better web developer. Feel free to{" "} 25 | 31 | join my discord 32 | {" "} 33 | or send me an email at{" "} 34 | 38 | webdevcody@gmail.com 39 | 40 | . 41 |
42 |