[{"content":"Introduction OpenTicker is an open-source data compilation and analysis tool for stock trading.\nThe project was initiated by Binh Pham when he saw that there was no free tool on the market that made portfolio analysis easy and quick. As a retail trader himself, he made a tool that he would used personally and recommend to others.\nSkip all the hassle and go straight to the demo. Why not?\nWhy? \u0026ldquo;When I built this, I simply needed a tool to compile all my symbols into a chart, so that my portfolio can be represented as a whole. But nothing do that for free or is very limited. TradingView supports only 10 symbols per chart. And if you want to do the same thing in excel, it is freaking nightmare. So I just build something that compiles the data for me, but it looks pretty cool, why not maintain it in a more stream-lined fashion?\u0026rdquo; - Binh Pham\n\u0026ldquo;The primative tool is for beginners in the stock market, for traders with medium-size portfolio who want to identify groups of correlating data in their investment early on. However, the project exhibits a well-defined structure and philosophy for expansion. It is built to be expandable and is expected to have more advanced features very soon\u0026rdquo; - Binh Pham\nPhilosophy The project’s development philosophy is based on three main staples:\nMaintainable: The project must be built with modularity and expandability in mind so developers can adapt their own solutions to the projects easily with interfaces and modules. Transparent: Every operation must be completely transparent and open. Users\u0026rsquo; data must be stored locally and process only within the application. Logical: The flow of execution in user experience and data process has to be concise and persistent throughout versions of the project. User Experience Flow From an user standpoint, the logical flow of OpenTicker is the following:\nImport Data: Users import data from external sources using Data Source Modules in OpenTicker. View Data: Users view and modify their data from a dashboard using View Modules in OpenTicker. Compile Data: Data is then compiled into user defined definitions using Compilation Modules in OpenTicker. Analyze data: Compiled Data is then analyzed by the user or other modules in OpenTicker This must be maintained and applied in every version of OpenTicker. The clear logical flow is what set OpenTicker apart from any other trading aid.\nProject\u0026rsquo;s Vision The philosophy and logical flow dictates everything the project represents. However, one question remains:\nHow can we use the project? Currently, the project\u0026rsquo;s interface is statically built and hosted on Vercel. This is only for demo purposes.\nIn the future, it will be converted into a micro-service based application with concise services per the logical flow, in which the interface will only be a part of. It will be like Home Assistant where users self-host their instance with their own expansion and customization.\nFeatures: Currently, the project has the following features:\nImport data from Finnhub. View and create portfolio in one tap. View Live StockTrading data in your portfolio. Compile portfolio-as-index charts for technical analysis. Compile charts for symbols within your portfolio. Export CSV of compiled charts. Final Note This project is still in its very early age, please report bugs and errors on Github.\nBear in mind that its developer have only spent 12 hours to create this Pre-Alpha version so most input validation and performance optimization are not in place. Use the tool carefully, don\u0026rsquo;t stress test it, it will definitely break.\nThanks for checking out this tool!\n","permalink":"https://blog.binhph.am/posts/open-ticker/","summary":"Introduction OpenTicker is an open-source data compilation and analysis tool for stock trading.\nThe project was initiated by Binh Pham when he saw that there was no free tool on the market that made portfolio analysis easy and quick. As a retail trader himself, he made a tool that he would used personally and recommend to others.\nSkip all the hassle and go straight to the demo. Why not?\nWhy? \u0026ldquo;When I built this, I simply needed a tool to compile all my symbols into a chart, so that my portfolio can be represented as a whole.","title":"Introducing OpenTicker"},{"content":"Brief This is a project that has been done a while ago by me for my final project in C++ at Budapest University of Technology and Economics. Through this article, you can find:\nThe source code of the project: Including bash scripts/makefile to build the project. The developer documentation: Including documentation of every struct and every critical functions. The resources to understand the project: How Neural Network and State Machine can be implemented in C++ To reduce the length of the article, the content is divided into 2 parts:\nPart 1: Project introduction and demo. Part 2: How the project works and how it is implemented. Introduction In my second term at BME, I was tasked with developing a project in C++ for my Basics Of Programming 2. My lecturer promised that the best project in the group will get an automatic final score addition of 5 points and I was thrilled to be the best.\nThat was when the concept of Neural Network caught my eye. Amidst all the ChatGPT shananingan, a Neural Network seems to be such a buzzword of complexity. However, having a few courses of Data Science and Machine Learning under my belt from years ago, I understand that Neural Network is just basic linear algebra.\nTo gain the precious 5 points addition, I vouched to create a Neural Network PoC from scratch in C++. In the end, not only did I create a trainable Neural Network of variable size, I also created an user interface from a state machine from scratch in C++.\nAnd\u0026hellip; yeah I did get the 5 points\n1. Project Description Below is a video demo of the project, in which you can understand what the project is about.\nThe project is called Binh\u0026rsquo;s Neural Network. It is to demonstrate a Neural Network Proof Of Concept by teaching a neural network to approximate a mathematical function y=sin(x)^2. The project consists of three parts:\nMatrix: The Matrix is coded from scratch in C++ using dynamic memory allocation for doubles. This class is used to support neurons calculation like weights multiplication, bias addition. Neural Network: The Neural Network is coded from scratch in C++ using a Matrix class and a Neural Network class. This class is used to create, train and modify a neural network using matrix calculations. Controller: The Controller is coded from scratch in C++ using basic principles of a Turing\u0026rsquo;s State Machine. This class is used to handle the application logic, mainly the CLI and handle user interactions with the Neural Network. Through the user interface, you can:\nCreate and train a neural network. Save and load a neural network from file. Benchmark the neural network. The project is built on the statement that:\nNo external library is used except for econio: colored output and raw keyboard handling for Linux and Windows console in C and C++. Everything must be built from the ground up: reduce the usage of standard libraries as much as possible. Accuracy of the model can be negligible as long as: the model can show progress of learning. Hence, the most impressive part of this project is that it is built from scratch. The only exception in this project is the usage of econio, a cross-platform keyboard-handling library in C and C++.\n2. Project Result The testing of the project is done by iteratively training the network by 1000, 10000 and 100000 times. After each training session, the network saves its training data which we can use to determine the performance of the network.\nAs you can see, as more data points are given to the network, it generate more accurate output, hence formation of the harmonic function.\nThis can even be clearer when you test the neural network using a test data set after its 100000 iteration.\nNetwork Function vs Input FunctionIn this plot, the network is trained for 100000 times, the input is y=sin(x)^2. From the training data, we can also see how the error of the network is reduced over time.\nNetwork Accuracy ConvergenceThe progress of the network after each iteration. The documentation for this can be found in the project source code below.\n3. Project Source Code If you want to look at the source code right away, here is your place. If you want to know how neural network and state machine work, please proceed to the next section.\nYou can find the project source on my GitHub. Leave a star if you like it as well.\nIn the repository, you can find the documents in the /doc/. In here, you can find the:\nSpecifications on which I build my project. Developer Document Other related documents For compiling and running the game, please refer to the README.md on GitHub.\nHow the project is implemented? To understand more about the theory behind this project, please read [Part 2] Neural Network with a bit of State Machine in C++ from scratch\n","permalink":"https://blog.binhph.am/posts/neural-network/","summary":"Brief This is a project that has been done a while ago by me for my final project in C++ at Budapest University of Technology and Economics. Through this article, you can find:\nThe source code of the project: Including bash scripts/makefile to build the project. The developer documentation: Including documentation of every struct and every critical functions. The resources to understand the project: How Neural Network and State Machine can be implemented in C++ To reduce the length of the article, the content is divided into 2 parts:","title":"[Part 1] Neural Network with a bit of State Machine in C++ from scratch"},{"content":"Brief In the previous part of this article, we have gone through what is the project and its specifications. In the second part, we will discover:\nWhat is a Neural Network and how to implement it in C++? What is a State Machine and how to implement it in C++? Since the topics presented in this article have been on other articles, we will only go through the idea and basics of the implementations. For the in-depth explaination, I will leave it to the critical mindset of readers.\nIntroduction to Neural Network 1. Basics of Neural Network In the world of buzz words like Atificial Intelligence and Machine Learning, Neural Network must be no stranger to every engineer. In the fundamentals of it, it is just a huge mathematic equation of random coefficents that has tons of inputs and outputs.\nOf course, saying something of such complexity as a Neural Network like that would be insanely hard to comprehend and calculate. Therefore, we abstract it in the form of a graph.\nSource: https://www.v7labs.com/blog/neural-network-architectures-guide In such a graph, each node is an equation. The number of variables of this equation is equal to the number of inputs of nodes. Each variable is accomodated with a weight or a coeficient in mathematical sense. This is all summed up and put in an activation function.\nSource: https://morioh.com/p/d70aa769173a If you are wondering, the activation function is to introduce non-linearity into the network, because if every node is just a first order function of variables it would be just a bunch of lines intersecting each other. You can find more information about activation functions here.\nSource: https://www.v7labs.com/blog/neural-networks-activation-functions After constructing the nodes, you will see that the Neural Network is actually very simple. And the only question left behind is how to implement it in code from scratch.\n2. Implementation of Neural Network Currently, there is 2 main approaches:\nImplementing the network with an object-oriented approach: This means we abstract the network into nodes, layers and network classes. This is very memory consuming and not optimized at all, but very understandle and maintainable for newcomers. Implemting the network with linear algebra: This means all calculations of nodes can be put into vectors and matrixes. This is very optimized and fast with hardware acceleration and it is the fundamentals behind every Neural Network engine right now. If you guessed I picked the second option to implement, you are right! To me, nothing is better than the fusion of math and programming. It is just sad that many students don\u0026rsquo;t feel this way.\nTo know how matrices can be used in Neural Network, you can find it in these links: Neural Networks, Structure, Weights and Matrices and Neural Network Representation.\nSource: https://www.jeremyjordan.me/intro-to-neural-networks/ The most curcial information you need to get from these articles is how to build the weight and bias matrices. In addition to this, you must know how to do a foward pass: how to calculate the output of each node using the weight and bias matrix.\nFrom this point, you will be introduced to the world of back propagration to answer the question of how is the Neural Network trained. Quite suprisingly, it might actually be more dull than you think.\n3. Optimization of Neural Network In the case of Neural Network, since everything can be represented in the mathematical form. It means that you can build and graph a function of errors based on the coefficients.\nWhen you have the graph of the function, you will see that by using calculus, you can find the derivative of the function and create a direction vector pointing the extrema or minimum of the function. This is the fundamental of backward propagation.\nSource: https://towardsdatascience.com/gradient-descent-3a7db7520711 To research more on this subject, you can look into Matt Mazur\u0026rsquo;s Simple Backward Propagation Example. This explains how you can build the gradient function and the gradient matrix from a mathematical point of view.\nSource: https://mattmazur.com/2015/03/17/a-step-by-step-backpropagation-example/ In this article\u0026rsquo;s example of a neural network, you can also see that instead of using matrices and linear algebra, the author uses nodes and layers classes. The purpose of this is purely educational as it comprimises performance for ease of reading.\nIf you have reached this point, you have everything it needs to read the source code of the neural network of the project.\nIntroduction to State Machine 1. Basics of State Machine Source: https://micromouseonline.com/2014/05/05/state-machines-introduction/ If you have ever been to the Front-end realm of any kind of application development, you will know that they are based on states and props. Cough\u0026hellip; React Cough\u0026hellip; Vue Cough\u0026hellip; Svelte.\nCreating a State Management System for React from scratchSource: https://dev.to/logeekal/building-state-management-system-like-react-from-scratch-with-vanillajs-3eon While this statement might be wrong because it is different with each framework and library, every front-end is definately based on a state machine.\nActually maybe everything in programming and computers in general is based on a state machine. But this is such an abstract concept that developers often don\u0026rsquo;t even care. In Binh\u0026rsquo;s Archive though, we care.\nA Turing State Machine SchematicSource: https://machinedeturing.com/ang_fonctionnement.php?page=7 Since this project needs an user interface, it has to implement a State Machine from scratch. This helps the application render with ease and efficiency.\nThe basic form of a state machine is having states and each state is connected to actions.\nSource: https://statecharts.dev/what-is-a-state-machine.html For example, in off state, if we flip the light switch, it will move to the on stage. In the polling for the switch transition at the off state, we need to define an activity that constantly look for the state of the switch. This is basically how some basic websites works, by constantly looking for changes and re-render the DOM.\n2. Implementation of State Machine Example State Transition Table for a Sequential MachineSource: https://www.researchgate.net/figure/Example-State-Transition-Table-for-a-Sequential-Machine-Source-Hatley-and-Pirbhai_fig10_269710922 In C++ and C, there is pretty neat trick you can do to implement a transition table. By storing functions into an array, you can call the transition function seamlessly by calling the array at the state index.\nBelow is a code snippet taken from the source code of this project:\nclass Controller { private: int currentState; bool renderFlag; void printBanner(); void generationMenu(); void controlMenu(); void createNetwork(); void trainNetwork(); void testNetwork(); void loadNetwork(); void saveNetwork(); void exit(); Action stateTransitions[8]; public: Controller() { stateTransitions[GEN_MENU] = \u0026amp;Controller::generationMenu; stateTransitions[CREATE] = \u0026amp;Controller::createNetwork; stateTransitions[LOAD] = \u0026amp;Controller::loadNetwork; stateTransitions[CONTROL_MENU] = \u0026amp;Controller::controlMenu; stateTransitions[TRAIN] = \u0026amp;Controller::trainNetwork; stateTransitions[TEST] = \u0026amp;Controller::testNetwork; stateTransitions[SAVE] = \u0026amp;Controller::saveNetwork; stateTransitions[EXIT] = \u0026amp;Controller::exit; }; void render() { (this-\u0026gt;*stateTransitions[currentState])(); } ; }; As you can see, the logic behind the user interface of this project is pretty simple. By leveraging the theory of State Machine, we can easily create transition function to move between different states and in each state we can display the corresponding information.\n// Example function void Controller::saveNetwork() { // Display something cout \u0026lt;\u0026lt; \u0026#34;save network menu\u0026#34;; // Doing something ofstream save_file; save_file.open(\u0026#34;./data/network.txt\u0026#34;); n-\u0026gt;saveNetwork(save_file); save_file.close(); // Change state currentState = CONTROL_MENU; } Since this is a state machine, we can let this function run on an infinite loop and the system would only change the output when there is a state change or an explicit exit from the function.\n// Infinite loop in program Controller a; while (a.renderFlag) { a.render(); } The simplicity of this code snippet is why I love the theory part of Computer Science.\nUsing the knowledge presented in these sections, you can now read everything inside the source code of the project.\nEnd note I know that this can be a little bit too much of information for such a small article. However, as an engineer myself, I have always wanted an article like this to read so that I can find everything and branch out from one place.\nUsing this article, you can have the base for researching more on State Machine and Neural Network. You can also train yourself to have a new mindset in programming and ignite your passion in the theories of Computer Science and Mathematics.\n","permalink":"https://blog.binhph.am/posts/guide-neural-network/","summary":"Brief In the previous part of this article, we have gone through what is the project and its specifications. In the second part, we will discover:\nWhat is a Neural Network and how to implement it in C++? What is a State Machine and how to implement it in C++? Since the topics presented in this article have been on other articles, we will only go through the idea and basics of the implementations.","title":"[Part 2] Neural Network with a bit of State Machine in C++ from scratch"},{"content":"Brief This is not a how-to article. This is a project that has been done a while ago by me for my final project in C at Budapest University of Technology and Economics. Through this article, you can find:\nThe source code of the project: Including bash scripts/makefile to build the project. The developer documentation: Including documentation of every struct and every critical functions. The manual: step-by-step instruction of how to use the program. Introduction In my first year at BME, I was tasked with developing a project in C for my Basics Of Programming 1. Back then, I wasn’t exactly a beginner in C, so I wanted to find some projects that was really fun and cool to do.\nThat was when the concept of Cellular Automata caught my eye. If you don’t know what cellular automata is, it is basically a game with black and white boxes. This game has levels and at each level the color of a box is decided by its neighbors. For example, if a black cell is surrounded by 2 black cells, it turns white. A game can have multiple conditions and these conditions are grouped under a rule, like Rule 30.\nThis simple description of a rule is the background for many other rules of cellular automata. These rules are created under a naming convention: Rule N, in which N is a number indicating the rule itself.\nAs the levels get higher and higher, the complexity of the boxes combinations gets higher as well.\nNow, you may have spotted the main point of the game. What if we change the rule of each level? Like a white box turn to black if it has 4 black neighbors. This is actually an insanely interesting topic and might hold the answer to the existence of our universe right now.\nThe set of rules for this game can be arbitrary complex. From this, a crazy scientist called Stephen Wolfram has researched a new kind of science that is based totally on the workings of the rules of this game. From a set of rules, he can simulate real deterministic events such as forest fires or stocks fluctuation in our world. Then it begs the question: How complex does a set of rules need to be to simulate our world?\nThis is totally out of scope of the article. Therefore, I will leave the researching back to you.\nIn this project, we will only discuss the most famous set of rules of them all: the Conway’s Game of Life. In this set, the rule are of the following:\nIf the box is white, then it stays white if it has either 2 or 3 white neighbors If the box is black, then it turns white in the case that it has 3 white neighbors This may sound like a racist game, but in actuality, the states of the box are called alive/dead and the box is called cell. It was easier to explain it with shapes and colors though. Back to the main point, my project in C was basically a game, in which you can:\nRun the game of life Draw a board with cells and their states Save a board with cells and their states Mark in mind, this has to be done totally from scratch, without external libraries, except for an input-handling library. That means, for the board drawing and the game, not only do you have to implement the logic, you also have to build the interface from scratch.\nProject Demo Below is a Video Demo of the project, in which you can possibly know why I shared this project: it looks freaking cool for a from-scratch project!\nProject source As stated from before, this article is only to show the main point of the project. You can find the project source on my GitHub. Leave a star if you like it as well.\nIn the repository, you can find the documents in the /doc/. In here, you can find the:\nSpecifications on which I build my project. Developer Document Manual For compiling and running the game, please refer to the README.md on GitHub.\nHonorable Mention In this topic, I also want to introduce another book which to me is the ultimate coding book: The Nature Of Code by Daniel Shiffman. In this book, you can find topics such as:\nCellular Automata Neural Network Particle Systems This is insanely helpful if you want to dive into how the world can be simulated with plain coding. This book is literally the inspiration of nearly half of my projects until now.\n","permalink":"https://blog.binhph.am/posts/life/","summary":"Brief This is not a how-to article. This is a project that has been done a while ago by me for my final project in C at Budapest University of Technology and Economics. Through this article, you can find:\nThe source code of the project: Including bash scripts/makefile to build the project. The developer documentation: Including documentation of every struct and every critical functions. The manual: step-by-step instruction of how to use the program.","title":"Cellular Automata: Simulating life in C from scratch"},{"content":"Overall The artwork behind this article is inspired by Everything Everywhere All At Once\u0026rsquo;s poster, in which googly eyes are formed tightly on a flat plane.\nThe first time I saw this poster, I had an idea to make it into an interactive art installation where the eyes follow the movement of a human stading in front of them. The video below is a small demo of Circle Packing and Object tracking based on the newest entity in this artwork.\nAlthough it sounds silly, it requires a strong base of Math and Physics as well as Creative Coding experience. Using p5.js and PoseNet, this wall of googly eyes can track a human using just a normal camera or do effects based on the number of people in its view. Furthermore, it can be implemented on websites as backgrounds or interactive games due to its browser-friendly nature.\nCurrently, this is private work and is not open-sourced in any way. For display purpose, this interactive installation can be modified and installed on demand. Please contact me for further developments and collaboration.\n","permalink":"https://blog.binhph.am/posts/googly/","summary":"Overall The artwork behind this article is inspired by Everything Everywhere All At Once\u0026rsquo;s poster, in which googly eyes are formed tightly on a flat plane.\nThe first time I saw this poster, I had an idea to make it into an interactive art installation where the eyes follow the movement of a human stading in front of them. The video below is a small demo of Circle Packing and Object tracking based on the newest entity in this artwork.","title":"Googly: Creative Coding"},{"content":"Introduction In this article, I will explain and document the process and resources I used to become the youngest Amazon AWS Certified Developer - Associate (DVA-C01) holder in Viet Nam.\n1. What is AWS? As you know, Amazon Web Services (AWS) is a cloud computing platform and infrastructure created by Amazon.com. It provides a wide range of services such as computing, storage, databases, analytics, machine learning, and much more, that can be utilized over the internet on a pay-as-you-go basis. AWS is one of the largest and most popular cloud computing platforms in the world, and it serves millions of customers, including startups, enterprises, and government organizations. Its services are designed to make it easier for customers to build and run applications, store and analyze data, and scale their operations in a cost-effective and secure manner.\n2. What is AWS Certification? AWS Certification is a series of certifications provided by Amazon Web Services (AWS) for individuals who demonstrate proficiency in using the AWS platform. There are several levels of AWS Certifications, including foundational, associate, professional, and specialty certifications. The certifications assess an individual\u0026rsquo;s ability to design, deploy, and manage applications and services on the AWS platform.\n3. What is Amazon AWS Certified Developer - Associate? The AWS Certified Developer - Associate certification is intended for individuals who have a good understanding of the AWS platform and have experience developing and maintaining applications on the AWS platform. It is recommended that candidates have at least one year of hands-on experience in developing and deploying applications on AWS, although there is no strict requirement in terms of years of experience.\nThis certification is ideal for software developers, software architects, and DevOps engineers who want to demonstrate their expertise in developing, deploying, and troubleshooting applications on the AWS platform. The certification provides recognition for the skills and knowledge required to design, build, and maintain secure, scalable, and highly available applications on AWS.\nAbout me I’m a FullStack IoT Developer, currently studying in Budapest, Hungary. Before taking the test, I have not gotten 1 year of experience in AWS as recommended by Amazon. However, I have had experience with developing applications on Heroku, Firebase, Google Cloud and IBM Cloud. Therefore, it was quite straight-forward for me to grasp the system and layout of Amazon AWS.\nRecently, I took and passed the AWS DVA-C01 Exam on 11/02/2023 at 18 years 9 months old, making me the youngest ever in Viet Nam to pass it. You can find my cerification here.\nResources These are the resources I used to prepare for the exam. They are the only source of information I refer to while I study for DVA-C01, and it is really minimal compared to other sources. Although it is compact, fully mastering these documents will certainly help you pass the exam easily.\nI also included the cost of each material, which will help you calculate the cost of this certification.\n1. Stephane Maarek\u0026rsquo;s Course (99$ - bought on discount for only 20$) This brilliant guy is definately the guru on Amazon AWS, and if you want to achieve any of AWS certification, you go to Stephane. His courses are easy to understand, with carefully crafted sections, which will ensure you a solid base before going into the exam.\nThat is why I am reccomending his course on DVA-C01. Apart from Stephane, there are also multiple other courses on the internet, and you can pick any of them. However, be sure to follow at least one course for your exam.\n2. Stephane Maarek\u0026rsquo;s Practice Tests (80$ - bought on discount for only 15$) Practice tests are a must. And Stephane has made really easy for you to purchase his practice tests (6 in total, with full explainations), on which thousands of people have used and succeeded, including me.\nApart from his, there are endless practice tests on the internet, even from Amazon itself, but I should state that I have only used Stephane\u0026rsquo;s in my learning process. His tests are close to the real tests, for at least 60% of the questions. This statistics can even be higher on your exam though, as my exam was testing new questions and materials for the upcoming DVA-C02 (derived from my opinion and experience).\n3. CodeBucket\u0026rsquo;s Cheatsheet (Free) Cheatsheets are not a must, but they are certainly helpful. After hours of searching on the internet for an actually helpful cheatsheet, I came across CodeBucket\u0026rsquo;s.\nThis is the best cheatsheet you can ever find, and if you are able to understand it, you have the exam in the palm of your hand. The developer behind this cheatsheet recently took the exam in 2022, and he has made a wonderful guide into how to ace the exam.\n4. Amazon AWS Documents (Free) If you are a developer, you must know how to read documents. Maybe this resource is not important in other tactics, but with the tactics I used for this exam, you will spend hours reading the documents while doing your practice tests.\nTactics Having the resources for the exam doesn\u0026rsquo;t mean much if you can\u0026rsquo;t utilize them correctly. In this section, I will devise tactics for you to making the most out of your resources.\n1. Time Management Amazon advised engineers to take the exam after they have gotten one year of experice and learning with Amazon AWS. However, this is not a requirement for the exam, and you should be able to take it in 3-6 months of comprehensive learning.\nTo learn, you need to be disciplined and control your time correctly. In the course I have reccommended, you have 31.5 hours of videos, and you should never speed run it. That means no watching 5-6 hours in a day and finish in a week.\nYou should take your time, and learn at least 1 hour a day, 5 days per week . Now, the schedule can change, but the basic is you have to learn day-by-day to retain your knowledge. If you\u0026rsquo;re new to AWS, you need time to adapt and remember AWS concepts, or else you will just forget about it.\nAnd don\u0026rsquo;t be afraid when you don\u0026rsquo;t remember something. It is a benefit of online learning to learn at your pace, don\u0026rsquo;t hesitate to review a section if you have not understand it fully.\nMy tip is to just learn then review later. You bring temporary data into your brain ElastiCache, then let your brain slowly move it to Elastic Block Storage. Cough\u0026hellip; AWS joke.\n2. Practice Management For practice tests, I devised a tactic I learn from AI/ML training. You see, humans are the I in AI, so we can learn from them by dividing our data sets to training and test sets. It is honestly a bit weird though.\nWe have 6 practice tests in the bundle, and what I like to do is to seperate it into 2/4 sections:\nFor the first 2 tests (test set), we do it without any help or documentation. This helps us assess our abilities after finishing the course and helps us improve our tactics. For the next 4 tests (training set), we do it with help from Amazon AWS docs and CodeBucket\u0026rsquo;s cheatsheet. For every question you don\u0026rsquo;t know the answer, search for the keywords online. This helps boost your logical thinking and make you remember longer because you are actively finding for the answer. Don\u0026rsquo;t leave behind any unanswered question. After taking the practice tests, wait for 1-3 days, it is for your brain to relax. Then take the tests again, this time without any help, just like the real tests. Through this process, you will find places you truly need improvements on.\nFor the pace of doing the tests, I reccomend taking 1 test per day using my tactic. This should be done continously, without any cheat day unless specified in the tactic.\n3. Cheatsheet Utilization Knowing how to use your cheatsheet is actually critical. If you follow CodeBucket\u0026rsquo;s Cheatsheet, you will find a 80-page long document of very compact knowledge. However, it could be even more compact.\nTo remember the concepts, I have written my own cheatsheet from CodeBucket\u0026rsquo;s which only spans 30 pages. However, I will not share it, as it is a very good practice for you to do it on your own.\nAgain, this cheatsheet contains everything. If you do Stephane\u0026rsquo;s tests with the cheatsheet, you will score above 90% everytime.\nTest Readiness This is specifically for Practice Management. If you want to know when you are prepared or ready, these are my results for you to compare to. It won\u0026rsquo;t probably help, but it is something that can comfort you if you are having doubts.\nFor my first run on the practice tests, my scores are the following: 69% Failed, 70% Failed, 83% Passes, 83% Passed, 95% Passed, 85% Passed.\nFor my second run on the practice tests, my scores are the following: 92% Passed, 80% Passed, 95% Passed, 92% Passed, 100% Passed, 93% Passed.\nThis part is only for reference purpose and it is not an indicator of success on the exam.\nEndnote The AWS exam is a hard and stressful test to take. I hope this article will be a helpful guide on how to prepare for the exam.\nIf you pass the exam and my article somehow helped you, please reach out to me ^^\nGood luck on your exam!!!\n","permalink":"https://blog.binhph.am/posts/aws-certified/","summary":"Introduction In this article, I will explain and document the process and resources I used to become the youngest Amazon AWS Certified Developer - Associate (DVA-C01) holder in Viet Nam.\n1. What is AWS? As you know, Amazon Web Services (AWS) is a cloud computing platform and infrastructure created by Amazon.com. It provides a wide range of services such as computing, storage, databases, analytics, machine learning, and much more, that can be utilized over the internet on a pay-as-you-go basis.","title":"How I became a Certified Amazon AWS Developer Associate at 18"},{"content":"Overall If you have light on light, you have nothing. If you have dark on dark, you basically have nothing. Just like in life. You gotta have a little sadness once in a while so you know when the good times come.\nBob Ross The joy of painting My 2022 was like a Bob Ross painting, with patches of light and dark in harmony.\nThis was a beautiful year, I have achieved many things I have never dared to think about. I have met people that made my life so much easier to live and pull through. I have gone to places that made me realize like I’m just a speck of sand in this world.\nAnd amidst all that luminous sparkles were the times that I stayed up all night of stress or drowned myself in a bottle of Japanese Whiskey and a pack of cigarettes.\nIf it weren’t for my family and friends and the constant streak of luck I had, maybe this year was “nothing”.\nFortunately, it was something. And to conclude this year with the ending it deserves, I present something that my blog will remind me of every year from now on.\nThis 2022 wrapped can be adapted to your own design with my Photoshop template.\n\u0026lsaquo; \u0026rsaquo; ","permalink":"https://blog.binhph.am/posts/wrapped/","summary":"Overall If you have light on light, you have nothing. If you have dark on dark, you basically have nothing. Just like in life. You gotta have a little sadness once in a while so you know when the good times come.\nBob Ross The joy of painting My 2022 was like a Bob Ross painting, with patches of light and dark in harmony.\nThis was a beautiful year, I have achieved many things I have never dared to think about.","title":"Binh's Wrapped"},{"content":"Overall Square() is an Immersive Art Experience I worked on while I’m bored. This art experience utilized OpenCV and OpenFramework to mirror its observers with colorful squares.\nWith bright color palettes and energetic movement, this art installation is designed to entertain its audience for at least 1 minute before they move on to other installations.\nCurrently this is not open-sourced, if you want to display this art work or collaborate with me in a new project, please contact me through this platform.\n","permalink":"https://blog.binhph.am/posts/square/","summary":"Overall Square() is an Immersive Art Experience I worked on while I’m bored. This art experience utilized OpenCV and OpenFramework to mirror its observers with colorful squares.\nWith bright color palettes and energetic movement, this art installation is designed to entertain its audience for at least 1 minute before they move on to other installations.\nCurrently this is not open-sourced, if you want to display this art work or collaborate with me in a new project, please contact me through this platform.","title":"Square(): Creative Coding"},{"content":"Sponsorship This project is done with the help of Bruno Imbrizi\u0026rsquo;s amazing course.\nIf you want to dive deeper into the world of creative coding, be sure to check out his courses on Domestika.\nIntroduction Creative Coding Examples Apart from being a developer, I\u0026rsquo;m also an graphic designer. The two fields don\u0026rsquo;t make much sense together, but with the right combination, you can make something truly wonderful. And an esssence of such wonderfulness can be found in Creative Coding.\nToday, I\u0026rsquo;ll walk you through the process of making a work of art with Canvas-sketch, a Node.js library that utilizes HTML5 canvas to render artworks.\nBrief Idea Every project starts with an idea, and mine is inspired from various interpretation of Perlin Noise on the internet. Previously, I\u0026rsquo;ve followed Matt Ross\u0026rsquo;s work on LEGO Instacing in Touch Designer. And I\u0026rsquo;m struck with the idea of implenting some what of his work on a website using simpler means.\nTowersBy Benjamin Rethore Lego Instancing in Touch DesignerBy Matt Ross Basic IdeaBy Pham Tuan Binh My idea is an illustration of a lego board, with every piece or stack of pieces represent their corresponding Perlin Noise coordinates and values. From the thumbnail of the article, you can somewhat imagine what our result will look like eventually.\nLEGOBy Pham Tuan Binh Core concepts My artwork is done with multiple tools. Some of which are more important than others, and I\u0026rsquo;ve gathered the core concepts for you to grasp in this section. I will not walkthough the boilerplates and installation of these dependencies in this article, so be sure to read every link carefully.\n1. HTML5 Canvas and Javascript The fundamental of my workflow is HTML5 canvas. It is a tool that helps you draw on websites, and you should be able to find various information of it on the internet. Here is a wonderful explaination from W3.\nTo deal with canvas, you need to use Javascript, a programming language. If you are used to programming before, grasping the concept of JS is simple. In this project, we only use basic Javascript: for loops, let/const variable.\n2. NodeJS and Canvas-sketch Normally, with HTML5 canvas, you would have to write a ton boiler-plate code and of course implement your own HTML, CSS and JS files. With Canvas-sketch, this process is easier and more streamlined. It is a wonderful tool made by Matt DesLauriers, a creative coder, and you can find more about it here.\nTo use Canvas-sketch, you will NodeJS, which helps you run JS without the need of a browser (in simple terms). You can find how to install it here.\n3. Perlin Noise Perlin noise is, you guess it right, random noise, but in a very special way. If you draw Perlin Noise on a 3D plane, adjacent values will be close to eachother, hence create a smooth feel to the terrain. This is the basics behine Minecraft terrain creation.\nThe Perlin noise in this project is used to generate more natural values for the heights and colors of LEGO pieces.\nExecution With every coding problem, the main workflow is to disect it into multiple smaller problems. Likewise, in art, before designing or drawing something, we also have to partition our work into multiple smaller tasks. The same applies in Creative Coding.\n1. Constants Before coding our project, we will set up the constants we use.\n// Canvas-sketch settings const settings = { dimensions: [2048, 2048], animate: true, fps: 20, timeScale: 0.8, }; // Color pallete, in luminance and saturation order const colors = [ \u0026#34;#f1faee\u0026#34;, \u0026#34;#a8dadc\u0026#34;, \u0026#34;#457b9d\u0026#34;, \u0026#34;#1d3557\u0026#34;, \u0026#34;#fcbf49\u0026#34;, \u0026#34;#f77f00\u0026#34;, \u0026#34;#e63946\u0026#34;, ]; const brickHeight = 45; // Lego brick height const brickWidth = 90; // Lego brick width const maxHeight = colors.length; // Max height of a stack of Lego const freq = 0.09; // perlin noise frequency const matrixWidth = 12; // Matrix of Lego width const matrixHeight = 15; // Matrix of Lego height // Canvas Prep (Operations explained in \u0026#34;Drawing a shape\u0026#34;) // This is to color the background and set the default params of canvas operations context.strokeStyle = \u0026#34;black\u0026#34;; context.lineWidth = 4; context.fillStyle = \u0026#34;#f1faee\u0026#34;; context.beginPath(); context.rect(0, 0, width, height); context.fill(); 2. Drawing a shape To draw our lego board and pieces, we will need to draw basic shapes, these include eclipses and rectangles. The process of drawing a simple shape can be described below.\n// Getting the canvas object // With traditional file let canvas = document.querySelector(\u0026#34;canvas\u0026#34;); let context = canvas.getContext(\u0026#34;2d\u0026#34;); // With Canvas-sketch const sketch = () =\u0026gt; { return ({ context, width, height, time }) =\u0026gt; { } }; canvasSketch(sketch, settings); // Drawing a shape context.strokeStyle = \u0026#34;black\u0026#34;; // stroke color context.lineWidth = 4; // stroke width context.fillStyle = \u0026#34;#f1faee\u0026#34;; // fill color // A rectangle with stroke context.beginPath(); // begin drawing context.rect(0, 0, width, height); // draw a rect path context.fill(); // fill that path context.stroke(); // draw a stroke along that path 3. Drawing an eclipse To make our code easier to read, we should write different functions for individual shapes. The one below is for eclipses. Remember that x,y is the center of the eclipse.\n// The fill color and stroke style should be sustained from previous setup function drawEclipse(context, x, y, radiusX, radiusY, rotation, curve) { context.beginPath(); context.ellipse(x, y, radiusX, radiusY, rotation, 0, curve * 2 * Math.PI); context.fill(); context.stroke(); } // We also need to have an eclipse without a stroke, this will be explained later function drawEclipseWithoutStroke(context, x, y, radiusX, radiusY, rotation, curve) { context.beginPath(); context.ellipse(x, y, radiusX, radiusY, rotation, 0, curve * 2 * Math.PI); context.fill(); } 4. Drawing a cylinder To draw a cylinder, we need 3 eclipses and a rectangle.\nfunction drawCylinder(context, x, y, w, h, offset) { // First, we draw the bottom eclipse drawEclipse(context, x, y, w / 2, offset, 0, 0.5); // Then we draw the overlay rectangle on top context.rect(x - w / 2, y - h, w, h); context.fill(); context.stroke(); // Then we draw an eclipse to hide the stroke of that rectangle drawEclipseWithoutStroke( context, x, y, w / 2 - context.lineWidth / 2, offset - context.lineWidth / 2, 0, 1 ); // Then we draw the top eclipse drawEclipse(context, x, y - h, w / 2, offset, 0, 1); } 5. Drawing a LEGO piece To draw a LEGO piece, we need 2 cylinder.\nfunction drawLego(context, x, y, w, h) { // The big one drawCylinder(context, x, y, w, h, h / 2); // The small one, or the snap part // The sizes are calculated through the process of randomizing values :)) drawCylinder(context, x, y - h, w / 2, h / 3, h / 4); } 6. Drawing a stack of LEGO pieces To draw a stack of LEGO pieces, we only need to offset the next lego piece by the height of the previous one.\nfunction drawStackOfLego(context, x, y, w, h, num) { for (let i = 0; i \u0026lt; num; i++) { // Select color in pallete context.fillStyle = colors[i]; // Draw lego in that color drawLego(context, x, y - h * i, w, h); } } 7. Drawing an array of LEGO stacks To draw an array of lego stacks, we need to have nested loops and offset the coordinates of our path according to the values of the loops.\n// Perlin noise lib const random = require(\u0026#34;canvas-sketch-util/random\u0026#34;); for (let i = 1; i \u0026lt; matrixHeight; i++) { for (let j = 1; j \u0026lt; matrixWidth; j++) { // Like a lego board, we need to have spokes on every placement of the board drawCylinder( context, (width / matrixWidth) * j, brickHeight + (height / matrixHeight) * i, brickWidth / 2, brickHeight / 3, brickHeight / 4 ); } } for (let i = 1; i \u0026lt; matrixHeight; i++) { for (let j = 1; j \u0026lt; matrixWidth; j++) { // This is where we draw the stacks of lego // Val is the perlin noise value (0,1) let val = random.noise3D(j, i, time, freq); // For the stack num, we interpolate val range to maxHeight range // Other params are constants which we have already set drawStackOfLego( context, (width / matrixWidth) * j, brickHeight + (height / matrixHeight) * i, brickWidth, brickHeight, Math.ceil(val * maxHeight) ); } } Demonstration You can run the artwork on your own browser on this website.\nThe sketch code can be found below:\nconst canvasSketch = require(\u0026#34;canvas-sketch\u0026#34;); const random = require(\u0026#34;canvas-sketch-util/random\u0026#34;); const math = require(\u0026#34;canvas-sketch-util/math\u0026#34;); const settings = { dimensions: [2048, 2048], animate: true, fps: 20, timeScale: 0.8, }; const colors = [ \u0026#34;#f1faee\u0026#34;, \u0026#34;#a8dadc\u0026#34;, \u0026#34;#457b9d\u0026#34;, \u0026#34;#1d3557\u0026#34;, \u0026#34;#fcbf49\u0026#34;, \u0026#34;#f77f00\u0026#34;, \u0026#34;#e63946\u0026#34;, ]; function drawEclipse(context, x, y, radiusX, radiusY, rotation, curve) { context.beginPath(); context.ellipse(x, y, radiusX, radiusY, rotation, 0, curve * 2 * Math.PI); context.fill(); context.stroke(); } function drawEclipseWithoutStroke( context, x, y, radiusX, radiusY, rotation, curve ) { context.beginPath(); context.ellipse(x, y, radiusX, radiusY, rotation, 0, curve * 2 * Math.PI); context.fill(); } function drawCylinder(context, x, y, w, h, offset) { drawEclipse(context, x, y, w / 2, offset, 0, 0.5); context.rect(x - w / 2, y - h, w, h); context.fill(); context.stroke(); drawEclipseWithoutStroke( context, x, y, w / 2 - context.lineWidth / 2, offset - context.lineWidth / 2, 0, 1 ); drawEclipse(context, x, y - h, w / 2, offset, 0, 1); } function drawLego(context, x, y, w, h) { drawCylinder(context, x, y, w, h, h / 2); drawCylinder(context, x, y - h, w / 2, h / 3, h / 4); } function drawStackOfLego(context, x, y, w, h, num) { for (let i = 0; i \u0026lt; num; i++) { context.fillStyle = colors[i]; drawLego(context, x, y - h * i, w, h); } } const sketch = () =\u0026gt; { return ({ context, width, height, time }) =\u0026gt; { const brickHeight = 45; const brickWidth = 90; const maxHeight = colors.length; const freq = 0.09; const matrixWidth = 12; const matrixHeight = 15; context.strokeStyle = \u0026#34;black\u0026#34;; context.lineWidth = 4; context.fillStyle = \u0026#34;#f1faee\u0026#34;; context.beginPath(); context.rect(0, 0, width, height); context.fill(); for (let i = 1; i \u0026lt; matrixHeight; i++) { for (let j = 1; j \u0026lt; matrixWidth; j++) { drawCylinder( context, (width / matrixWidth) * j, brickHeight + (height / matrixHeight) * i, brickWidth / 2, brickHeight / 3, brickHeight / 4 ); } } for (let i = 1; i \u0026lt; matrixHeight; i++) { for (let j = 1; j \u0026lt; matrixWidth; j++) { let val = random.noise3D(j, i, time, freq); drawStackOfLego( context, (width / matrixWidth) * j, brickHeight + (height / matrixHeight) * i, brickWidth, brickHeight, Math.ceil(val * maxHeight) ); } } }; }; canvasSketch(sketch, settings); Endnote Creative Coding is an amazing field, if you are a graphic designer and you have the time, be sure to check out the wonders of it.\nFor creative coders and learners, feel free to modify my artwork. With minor modifications, you can create totally different variations of it.\nThank you for reading Binh\u0026rsquo;s Archive.\n","permalink":"https://blog.binhph.am/posts/legos/","summary":"Sponsorship This project is done with the help of Bruno Imbrizi\u0026rsquo;s amazing course.\nIf you want to dive deeper into the world of creative coding, be sure to check out his courses on Domestika.\nIntroduction Creative Coding Examples Apart from being a developer, I\u0026rsquo;m also an graphic designer. The two fields don\u0026rsquo;t make much sense together, but with the right combination, you can make something truly wonderful. And an esssence of such wonderfulness can be found in Creative Coding.","title":"LEGO: Creative Coding"},{"content":"What is \u0026ldquo;365 Days\u0026rdquo;? If you are a old follower of mine, you will know that, apart from a developer, I\u0026rsquo;m also a photographer.\nBut for a long time, I have stopped posting photos to focus on my beloved projects in IoT.\nTherefore, to unleash all the photos I\u0026rsquo;ve taken over the last three years and in the upcoming period, I\u0026rsquo;ve created a photo album called \u0026ldquo;365 Days\u0026rdquo;.\nWhat is it and what is special about it? In the beginning of this project, “365 Days” was simply a photo album on Instagram, where I would post a photo every day.\nHowever, as the artist behind this album is also a developer, he said to him self: “Why not make this into a fun and cool coding project”. And then “365 Days” Photo Album was born.\nSo what is it? You might ask.\n“365 Days” is an online experience, where you will discover the artistic works of Binh Pham in a carousel.\nThere will be a new photo uploaded everyday and each day is a different story, a different location, a different person.\nSome day will just have a title, some will have an entire story for you to discover.\nAll of this is hosted on a sub page of Binh’s Archive.\nWhere can I see \u0026ldquo;365 Days\u0026rdquo;? Social platforms of \u0026#34;365 Days\u0026#34;Instagram (Left) and Web Exhibition (Right) Presently, you can check \u0026ldquo;365 Days\u0026rdquo; on 2 platforms: Instagram and Web Exhibition.\nI reccomend taking a look at the Instagram page before heading on to the Web Exhibition. You can find how to use the website there, as well as how to find an easter egg on the website.\nOnline ExhibitionOnly available on phones and small tablets. How to make a website like \u0026ldquo;365 Days\u0026rdquo;? If you are a developer already, you can check the Github for this project. If you are not, I\u0026rsquo;ll explain what you will need to learn before understanding the source code of \u0026ldquo;365 Days\u0026rdquo;.\nAnd remember, I will only show you the keywords and a few core components, not the whole explaination. The components Behind every project, there is some thing called a tech stack. Basically, there will be a database, a frontend, a backend along with APIs framework.\nIn this project, I used a tech stack called SINE:\nThe Frontend: Svelte The Backend: NodeJS The API: ExpressJS The Database: Instagram The files structure To understand the inner workings of \u0026ldquo;365 Days\u0026rdquo;, you will first need to know more about the files structure of the source code.\n365days: |- docs: Static files for web page |- src: Svelte source |- server: NodeJS and ExpressJS functions Server-side Code The Server has a function for retreiving photos from Instagram using their GraphQL API. Here is its implementation.\nconst axios = require(\u0026#34;axios\u0026#34;).default; // Axios is a library for making REST APIs call. const fields = \u0026#34;permalink,media_type,media_url, caption, children{media_url}\u0026#34;; // The Instagram API Structure const access_token = \u0026#34;\u0026#34;; // Make a request for a user with a given ID exports.instaFetch = async function (after = \u0026#34;\u0026#34;, limit = 20) { return await axios .get( `https://graph.instagram.com/me/media?fields=${fields}\u0026amp;access_token=${access_token}\u0026amp;after=${after}\u0026amp;limit=${limit}` ) .then(function (response) { // handle success return response.data; }) .catch(function (error) { // handle error console.log(error); }); }; As you can see, per user request, the server has to make a request to Instagram. If we keep this approach, the average time for a request is 1 second. Therefore, I implemented a caching middleware using a Key-Value storage.\nconst mcache = require(\u0026#34;memory-cache\u0026#34;); // Memory Cache is a Key-Value Storage // ExpressJS Middleware exports.instaHandle = async function (req, res) { const cacheDuration = 43200; try { let key = \u0026#34;exp-\u0026#34; + req.url; let cachedData = mcache.get(key); if (cachedData) { return res.status(200).json(cachedData); } else { let data = await instaFetch(req.query.after, req.query.limit); mcache.put(key, data, cacheDuration * 1000); return res.status(200).json(data); } } catch { return res.status(500).json({ error: \u0026#34;Something went wrong.\u0026#34; }); } }; The refresh time of these values are 12 hours, so users are almost always receiving the newest pictures. Using this caching approach, I reduced the average request time to 200 Milliseconds, an 80% deduction.\nThen it is served using ExpressJS\nconst express = require(\u0026#34;express\u0026#34;); const { instaHandle } = require(\u0026#34;./instaHandler\u0026#34;); const cors = require(\u0026#34;cors\u0026#34;); const app = express(); app.use(cors()); app.use(function (err, req, res, next) { if (!err) return next(); return res.status(500).json({ error: \u0026#34;Something wrong happened\u0026#34; }); }); app.get(\u0026#34;/feed\u0026#34;, instaHandle); Facebook Developers Platform If you truly understand the above section, one question will pop: What is the access token and how to get it?.\nTo get this access token, you need to get on the Meta for Developers and get yourself an account as well as a project. Through this, you can generate a token to use their GraphQL API.\nFrontend Code On the frontend, everything is stored using only one page. As the components mounts or the website renders, the website will call the aboved API using the below functions.\nasync function fetchInstagramFeed() { let url = `https://the365days.herokuapp.com/feed`; if (picturesPaging) { url = url + \u0026#39;?after=\u0026#39; + picturesPaging.cursors.after; } const res = await fetch(url); let picturesData = await res.json(); pictures = picturesPaging ? pictures.concat(picturesData.data) : picturesData.data; picturesPaging = picturesData.paging; pictures = pictures.map((ele, index) =\u0026gt; { ele.index = index; return ele; }); console.log(pictures); } onMount(async () =\u0026gt; { await fetchInstagramFeed(); const medRes = await fetch(`https://the365days.herokuapp.com/user`); mediaCount = await medRes.json(); mediaCount = mediaCount.media_count; console.log(mediaCount); console.log(pictures); }); And to implement the left-click/right-click and easter egg for the website, I used a counter.\nAlso, the pictures are lazy-loaded, that means the website only get 20 pictures per request, so there is also a function to check if the website has loaded all pictures.\nfunction hasLoadedAllPictures() { return pictures.length == mediaCount; } async function leftClickHandle() { if (currentState === 2) { if (currentPicture === 0) { currentState--; } else { currentPicture--; } return; } if (currentState === 0) { specialCounter++; if (specialCounter === 5) { currentState = -1; randomPicture = Math.floor(Math.random() * (pictures.length - 1)); await fetchRandomQuotes(); return; } return; } if (currentState === -1) { return; } currentState--; } async function rightClickHandle() { if (currentState === 2) { if (!hasLoadedAllPictures()) { if (currentPicture \u0026gt;= pictures.length - 2) { await fetchInstagramFeed(); } } else { if (currentPicture === pictures.length - 1) { currentState++; return; } } currentPicture++; } else if (currentState === 3) { currentState = 0; currentPicture = 0; } else if (currentState === -1) { specialCounter = 0; currentState = 0; } else { currentState++; } } The rest is in the JSX or whatever equivalent of Svelt in the source code.\nEndnote If you have any questions regarding this prohject, please contact me at binhpham@binhph.am\nA funny thing about this project is that the total time I used to make it was 2 days: 6 hours for the coding and the rest for media and design\u0026hellip; and I was drunk while I did it =))\nSo I guess I have to pay my gratitude to Nikka Whisky for this project.\nAside from the joke, please don\u0026rsquo;t drink while you\u0026rsquo;re working.\n","permalink":"https://blog.binhph.am/posts/365days/","summary":"What is \u0026ldquo;365 Days\u0026rdquo;? If you are a old follower of mine, you will know that, apart from a developer, I\u0026rsquo;m also a photographer.\nBut for a long time, I have stopped posting photos to focus on my beloved projects in IoT.\nTherefore, to unleash all the photos I\u0026rsquo;ve taken over the last three years and in the upcoming period, I\u0026rsquo;ve created a photo album called \u0026ldquo;365 Days\u0026rdquo;.\nWhat is it and what is special about it?","title":"\"365 Days\" Photo Album"},{"content":"Thank you note Memory Catalog was an idea from a friend of mine, designed and developed by me.\nThrough this article, I want to say thank you for having given me such an amazing idea.\nIntroduction To people who have followed me on Instagram, Memory Catalog is no stranger.\nEverything started when my friend wanted me to develop her own website for storing notes and memories from her friend.\nAt the point, to do such thing, students in Viet Nam would resort to form platforms such as Google From, Type Form or a physical notebook. However, these sites have their disadvantages: lack of customization, expensive, time-costly,\u0026hellip;\nAnd she wanted it to be unique. So I developed a new way of storing notes online, Online Memory as Polaroid, and I called it Memory Catalog.\nWhat is Memory Catalog? Memory Catalog is a place where you can share your memories with me. Instead of writing farewell notes, you can share pictures and stories about places we have been together, dishes we have had,\u0026hellip; These photos are then stored as Polaroid on my website, either privately or publicly and can be viewed eternaly throughout the universe (with internet connection).\nMemory Catalog\u0026#39;s Home PageMinimal and Friendly Design Memory Catalog\u0026#39;s PolaroidYou can click a Polaroid card to view it\u0026rsquo;s content. Memory Catalog\u0026#39;s FormYou can make a Polaroid using this form. There is a Preview on the side so you can check the card. You can see how you can upload a Polaroid on this video.\nYou can access Memory Catalog here\nThe making of Memory Catalog It might be a suprise, but it only took me 14 hours to do this project. This project was made in a 12hr Hackathon. I failed obviously, lol, but I did manage to finish it with an additional 2 hours.\nTo people who want to learn more about my workflow, here it is:\nWebsite Design: Affinity Designer Backend Development: NodeJS API Design API Development: ExpressJs API Testing: Postman Database: FireStore/Firebase FrontEnd Development: VueJs, TailwindCSS Everything is hosted on Heroku.\nInitial Design of Memory CatalogThere is a picture of me and my sister ^^. End Note This article is one of the many articles in a serie about my personal projects.\nYou can access Memory Catalog here. If we know each other, let\u0026rsquo;s store something here with me ^^.\n","permalink":"https://blog.binhph.am/posts/memory-catalog/","summary":"Thank you note Memory Catalog was an idea from a friend of mine, designed and developed by me.\nThrough this article, I want to say thank you for having given me such an amazing idea.\nIntroduction To people who have followed me on Instagram, Memory Catalog is no stranger.\nEverything started when my friend wanted me to develop her own website for storing notes and memories from her friend.\nAt the point, to do such thing, students in Viet Nam would resort to form platforms such as Google From, Type Form or a physical notebook.","title":"Memory Catalog: Store memories as Polaroid"},{"content":"If you haven\u0026rsquo;t read The History of NeoCoat, you can read it here.\nAs I learned more and more, I realized the key to learning was sharing. If I kept everything I\u0026rsquo;ve done for myself, I can\u0026rsquo;t grow as a Maker or as anything. To truly break that limit, I\u0026rsquo;m motivated to share my projects and opinions as articles so they can live on forever in an archive.\nSearching for a project to start this \u0026ldquo;archive\u0026rdquo;, I stumbled upon NeoCoat and found it as the perfect candidate. It is fun and weird and\u0026hellip; weird. For the majority of my audience, it is approachable, non-academic and DIY-able.\nHowever, writing about some projects you made years ago ain\u0026rsquo;t sound like fun, it doesn\u0026rsquo;t show what I\u0026rsquo;m capable of now and how I\u0026rsquo;ve grown as a Maker. Therefore, I decided to make NeoCoat (2).\nNeoCoat (2) was made with a simple purpose: to go beyond. This means going beyond the first NeoCoat\u0026rsquo;s quality as well as going beyond myself as a Maker. Besides, I\u0026rsquo;m bored so I need something to kill time.\nLet\u0026rsquo;s build a new NeoCoat So what does it mean to go beyond the first NeoCoat\u0026rsquo;s quality? Hasn\u0026rsquo;t it been made with care and perfection from the start?\nNo product can be made from the start with perfection. Only through trials and errors did I find new improvements and features for NeoCoat to grow. In this case, NeoCoat was bugged with several pain points:\nThe case was fragile, easy to break upon the slightest impact. The wirings was done hastily with little care, containing high risks of short circuit or hardware failures. Requires constant power, not portable. Limited functionalities. To solve these issues, EasyEDA was my go-to. Using its Sketch designer, I drew the schematic of the NeoCoat with new components added.\nSchematic of NeoCoatWith new components installed, there is no limit to what NeoCoat can do. As you can see in the schematics, there were 5 new components:\nAn accelorometer and a Gyroscope A temperature sensor Buttons Indicator Leds Charging module These components were then located on a small PCB that was also designed on EasyEDA.\nNeoCoat\u0026#39;s PCBThanks to the new PCB, NeoCoat is compact, durable and safe to handle. Waiting is the key to success now as I wait for the PCB to be manufactured and delivered from China. The provider I used was Thien Lam PCB. Their PCB mask was top-notch, surpassing the quality of ThegioiIC or Hatakey. Furthermore, for orders below 500.000VND, you don\u0026rsquo;t need to pay upfront.\nAfter one month of loitering, I recieved the package and here it was.\nNeoCoat\u0026#39;s PCBNormally, the delivery time would be 2-week. However, one week into the production process of my order, a Covid Lockdown was initiated in Shenzen, putting down factories. For the ingridients, I order them on ThegioiIC. The BOM can be found on my EasyEDA project, along with the schematics and PCB\u0026rsquo;s designs.\nHere are some pictures of the new NeoCoat.\nThe front of NeoCoatDue to hardware shortages, some components hasn\u0026rsquo;t arrived at the time this article was published. The back of NeoCoatThe new NeoCoat supports a Lithium-Ion battery and a charging module. At the time of writing this article, I have only received the charging module. If you are thinking this looks awful as a finished product, I do too. That\u0026rsquo;s why I\u0026rsquo;ve created a new case to house this PCB in Fusion360. However, as I can\u0026rsquo;t find any 3D printing service in Hai Phong anymore, I have decided not to include the case in the final project. Still, here is a sneak peak into what it would look like.\nNeoCoat\u0026#39;s caseEvery product I designed is heavily influenced by the design philosophy of Dieter Rams. Although I haven\u0026rsquo;t reach a point where such philosophy is applied perfectly, I\u0026rsquo;m trying. Additionaly, I\u0026rsquo;ve created diffusers for the Leds in Affinity Designer as well.\nNeoCoat\u0026#39;s diffusersThese help spread the color evenly on each LED. SO what does a NeoCoat (2) actually do? After all this hassle, what can NeoCoat (2) actually do?\nWell\u0026hellip; There are four main functions of NeoCoat. These are pretty much the old ones, but there is a little twist to it.\n1. Draw 8-bit art Using our product, you can draw pixel art and decorate everything with your NeoCoat.\n2. Play Snake You can also use it to play Snake when you are bored. No pixel-art display should exist without the ability to run Snake.\n3. Create animation When it is in idle mode, you can play animation on it. Unlike other projects, the animation doesn\u0026rsquo;t need to be hard-coded or installed through an USB. You can control it directly on Neocoat\u0026rsquo;s web interface.\n4. Wild cards Limited by only three features?\nDon\u0026rsquo;t worry. The possibilities with NeoCoat are endless.\nCustomization is a feature of our product:\nUsing the onboard MPU6050, you can turn your NeoCoat into a keyboard or a mouse. The temperature sensor can make your NeoCoat into a thermostat. What limit you are your ability to imagine\u0026hellip; and probably your programming skill.\nMake your own NeoCoat If you\u0026rsquo;re interested in NeoCoat, continue to read this article as I\u0026rsquo;ll show you how to make the barebone version of NeoCoat. NeoCoat\u0026#39;s barebone versionThis version requires the least work and ingridients with only three main parts and four making steps. 1. Prepare the ingridients To start the DIY process, you have to acquire the ingredients first. There are only three ingredients in the minimum version:\nWemos D1 Neopixel Matrix PCB You can buy all through the links I provided. However, with the PCB, you need to order them through a vendor.\nThe Geber files for the PCBs are included on my EasyEDA project.\n2. Soldering On EasyEDA, you can find the schematics of NeoCoat and assemble the components accordingly. This is quite straightforward and you can probably find the way by just looking at the board.\n3. Install the firmware If you did the previous steps correctly, you should be able to power the board through the Wemos\u0026rsquo;s Micro USB port now.\nTo install the firmware, you will need to install PlatformIO. The tutorial can be found here.\nNext, you\u0026rsquo;ll need to install Git. The tutorial can be found here.\nAfter that, open your command line and follow the below instructions:\n# Clone my repo git clone https://github.com/pham-tuan-binh/neo-coat.git # Change your working directory cd \u0026#34;neo-coat/Neopixel controller\u0026#34; # This will install all the libraries needed for this project platformio lib install # This will upload the filesystem platformio run -t uploadfs # This will build your firmware platformio run -t build # This will upload your firmware platformio run -t upload # Tadah you\u0026#39;re done 4. Control the board If the firmware is installed correctly, you will find a new Wifi hotspot popping up in your phone\u0026rsquo;s setting. It should be named \u0026ldquo;NeoCoat\u0026rdquo;.\nConnect to this and you should be able to access NeoCoat\u0026rsquo;s web interface at \u0026ldquo;1.1.1.1\u0026rdquo;\nCongratulations! You can use your NeoCoat now.\nClosing NeoCoat was my favorite side project. It doesn\u0026rsquo;t solve climate change or plastic pollution but it is fun and it can make people smile.\nFor most of my audience, building a NeoCoat and understanding the technologies behind it can be hard and may require a high level of dedication. However, as you read more and more, you acquire new knowledge and what boggles you now won\u0026rsquo;t in the future.\nIt is unfortunate I can\u0026rsquo;t talk about all the hassle I came through in the making of NeoCoat. If you have any question, feel free to reach me.\nKeep doing what you love and what comes will come.\n","permalink":"https://blog.binhph.am/posts/neocoat-2/","summary":"If you haven\u0026rsquo;t read The History of NeoCoat, you can read it here.\nAs I learned more and more, I realized the key to learning was sharing. If I kept everything I\u0026rsquo;ve done for myself, I can\u0026rsquo;t grow as a Maker or as anything. To truly break that limit, I\u0026rsquo;m motivated to share my projects and opinions as articles so they can live on forever in an archive.\nSearching for a project to start this \u0026ldquo;archive\u0026rdquo;, I stumbled upon NeoCoat and found it as the perfect candidate.","title":"NeoCoat (2): The new NeoCoat"},{"content":"Introduction This is the beginning of a series where I share my DIY projects and how to do them. Through this series, I want to motivate and inspire students to be a part of the Maker Culture. Every episode will be about one of my projects, in which you can learn more about what I do, how I do, and what you can do.\nThe project presented here is called NeoCoat. It\u0026rsquo;s a Pixel Display I made 2 years ago. NeoCoat\u0026rsquo;s Inspration At the end of 2020, after wandering online, I was struck by the beautiful work by Jeremy Williams, Game Frame.\nGame FrameThe Game Frame was a pixel art display that you can put on your desk or hang on your wall. It gained over 150,000$ on Kickstarter with over 700 backers in 2016. His work was a beautiful feat of engineering. It brought me memories of a time when I was playing Contra and Mario with my brother on a NES. So I was really motivated to make a display myself, not only to decorate my room but also to keep a piece a memory with me.\nI started to research more on past projects that shared the same idea. Unsurprisingly, there were multiple \u0026ldquo;8-bit display\u0026rdquo; projects. Pixel Project by AI Linke and Pixelstick were a few successful examples.\nThey were great, but they had some draw-backs:\nThey were not open-source. They were expensive to make or buy. Some cost 200$ to 300$. They only showed animations and static pictures. They requires an SD Card or Wired connections to store and update animation or pixel data. And you know, I\u0026rsquo;m some thing of a programmer myself. Therefore, I decided to make my own display from scratch with its special functions and designs. The beginning of NeoCoat The main idea of NeoCoat is a firmware that will fix its predecessors\u0026rsquo; errors and be used in a broadband of cases. As it is only a software product, its hardware of expression can be really flexible. If you want it to be a display, you can utilize a matrix of LEDs. If you want it to be a strip like Pixel Stick, you can buy a strip. In both scenarios, the software can be reused.\nThen, if you were to choose a medium in which NeoCoat shined, would you choose something general that everybody had done or something weird and silly? I would pick the latter.\nBut what is weird and silly that can make an 8-bit display stand out? An Eureka moment occured to me as I looked around my room. I stared at my school\u0026rsquo;s coat and suddenly thought: \u0026ldquo;What if I put a display on that.\u0026rdquo;\nNeoCoat on a CoatNeoCoat is actually the concatenation of Neopixel and Coat. The question now would be how to do such thing. There wasn\u0026rsquo;t any display on Shopee or Tiki that can fit my coat and followed my requirements.\nI turned over to my crafting table and made my own display from cardboard and a few Neopixel strips. It was bad, but it worked. You can see it working in a log video below.\nTo control the display, I used an ESP8266 NodeMCU. This is a popular powerful microcontroller that supports WIFI. I put in the front pocket of my coat and connected everything to a power bank.\nAfter that, I started building the firmware to run the LEDs. To fully explain how the firmware works, this article would be too long and boring. Avoiding that pitfall, I would only introduce the firmware\u0026rsquo;s structures and technologies. If you\u0026rsquo;re a programmer hoping to understand NeoCoat\u0026rsquo;s inner-workings, you\u0026rsquo;re welcomed at my Github Repo. Web InterfaceThe web interface followed Neomorphism style. The firmware uses Arduino framework and contains 4 main components:\nDrawable: A set of APIs that help you address each LED and set their color with HSV. This is made to work with FastLED library. Animation: A set of APIs that help you process MP4s and turn them into animations. Snake: Snake\u0026rsquo;s Game logic made by Emanuel Knopfel, implemented in my system by me. Web Server: The web interface and REST APIs for controlling the display. NeoCoat\u0026rsquo;s firmware is built with Object-Oriented conventions. The naming of classes might be confusing but their functionalities are straight-foward. If you want to know more about them, open the collapse below. More on the firmware Drawable represents the display itself. If you want to change any properties of the display, you will need to initiate a Drawable object. This objects contains the size of your display, the pins to which it is connected. Through this object, you can change the brightness and color of each pixel of your display.\nAnimation controls the animation functions of the display. By using a Drawable object and an MP4 decoder, it is able to render videos on your display, setting properties such as Frame-Per-Second.\nSnake is the Snake\u0026rsquo;s logic. It takes inputs from the users and renders a matrix. This matrix is then rendered to your display using Drawable.\nWeb Server is the interaction and presentation layer with the users. Through the web interface, you send commands to the controllers. These commands are then done with according libraries and functions.\nFurther development NeoCoat on a Coat was an amazing idea. But if I were to walk around school with a display on my back, the first time may be cool but the second would mean \u0026ldquo;I\u0026rsquo;m a nerd, please bully me\u0026rdquo;. Therefore, I wanted something small that I can put on my desk or put in my backpack.\nImmediately, I designed a simple case in Fusion360 and sent it to my favorite 3D Printing place, RoytechVN. They had it printed for me in 2 days and this was the result: NeoCoat\u0026#39;s caseRoytechVN was the best place I\u0026rsquo;ve ever printed at. 100% recommended. To diffuse the LEDs, I designed a set of simple squares in Affinity Designer. These were laser-cut at DreamlaserVN.\nAfter this, I only had to stick a NodeMCU inside the case and wire it up. This was how everything turned out: Finished productThe process might seem long, but I did it in a week. The coding was 4-day, the case was made in 3-day. The story of NeoCoat ended there\u0026hellip; until it was revived again for my blog.\nThe birth of NeoCoat (2)\n","permalink":"https://blog.binhph.am/posts/neocoat-intro/","summary":"Introduction This is the beginning of a series where I share my DIY projects and how to do them. Through this series, I want to motivate and inspire students to be a part of the Maker Culture. Every episode will be about one of my projects, in which you can learn more about what I do, how I do, and what you can do.\nThe project presented here is called NeoCoat.","title":"The history of NeoCoat"},{"content":"","permalink":"https://blog.binhph.am/categories/","summary":"","title":"Danh mục"},{"content":"","permalink":"https://blog.binhph.am/tags/","summary":"","title":"Thẻ"}]