Engineering diary
The tree command shows the folder structure of the current directory. Use the -d option to only show directories. The -I option lets you exclude certain directories. For example:
tree -I node_modulesTo exclude multiple directories, separate their names with |:
tree -I 'node_modules|cache|notes|test*'his will hide node_modules, cache, notes, and any directories starting with test from the output.
tree` is installed with brew
brew install treeIn the fast-evolving world of technology, managing web content effectively is often a complex, multifaceted task. As a tech lead for a large international technology company, I’ve come to recognize the importance of not just keeping up with technological advancements, but also maintaining a standard I like to call “web hygiene.” While not an official industry term, web hygiene captures an essential, holistic approach to how we create, maintain, and protect our web presence.
Web hygiene is a practice that embodies the principles and actions necessary to maintain a healthy, compliant, and user-centric online environment. It’s not just about flashy features or impressive performance metrics—it’s about ensuring that every part of our web content adheres to certain standards that safeguard users, support accessibility, and uphold our company’s reputation.
The term itself, “hygiene,” implies cleanliness and routine care—much like personal hygiene is a baseline for health and social interactions, web hygiene is the baseline for maintaining a trustworthy, robust, and inclusive web presence.
Web hygiene is not just one aspect of web management; it’s a cohesive practice that spans several critical areas:
An inclusive web experience is not just a compliance checkbox; it’s a commitment to enabling all users to engage with our content. Meeting WCAG standards ensures that people with disabilities can navigate, read, and interact with our sites seamlessly. Proper web hygiene integrates accessibility into every stage of design and development, making it part of the DNA of our content creation.
Data is a powerful asset, but with great power comes great responsibility. Web hygiene means that any data we collect adheres strictly to privacy laws and ethical standards. This involves implementing transparent consent mechanisms, anonymizing data wherever possible, and maintaining a secure infrastructure to protect against breaches. The trust we build through responsible data collection cannot be understated—it’s what sets leading technology companies apart from those who cut corners.
Web hygiene demands regular maintenance. This includes routine security audits, updates, and testing to ensure that we’re proactively closing vulnerabilities and optimizing performance. The idea here is to prevent problems before they arise—keeping the web infrastructure as healthy as possible to avoid breakdowns that could compromise user experience and trust.
Even the most secure, accessible, and well-maintained site can fall flat if the content is subpar. Good web hygiene includes having clear guidelines for writing effective, relevant, and engaging content. This means avoiding jargon, staying concise, and keeping the end user in mind at all times. Content should be easy to read, informative, and updated as needed to reflect current information and practices.
To uphold web hygiene, it’s crucial that all web content creators and site owners undergo an access course or training before being given the keys to their own subdomain or access to an existing one. This training ensures they understand the fundamentals of web hygiene, including accessibility, data handling, and content standards. This process will be tracked, and refresher sessions will be offered to maintain their access over time, reinforcing a culture of continuous learning and adherence to best practices.
Web hygiene extends beyond human practices. Automated tools can be employed to scan websites and provide feedback on compliance with accessibility, security, and content quality. These tools serve as a proactive measure, highlighting potential issues before they escalate and ensuring that web hygiene standards are consistently met.
You might wonder, why not just let creators and site owners do what they please? Isn’t creativity key? While creative freedom is important, in a large-scale organization, it must coexist with responsible practices. Poor web hygiene leads to a host of issues—ranging from accessibility complaints and data privacy violations to decreased trust and engagement. In an environment where a single oversight can cascade into serious reputational damage, maintaining web hygiene isn’t just good practice—it’s a business imperative.
Web hygiene isn’t a one-time checklist or a static policy; it’s a dynamic, ongoing process that involves cross-functional teams, including developers, content strategists, legal advisors, and security experts. It requires a shared understanding and commitment across the organization to do what’s right—even when no one is watching.
It’s about creating a culture where web hygiene is as natural as locking the doors when you leave a building. When every team member understands their role in maintaining these standards, we foster a healthier web presence that’s not just compliant, but also resilient and respected.
In the end, web hygiene represents a commitment to quality, integrity, and inclusivity that benefits both the company and its users. It’s about setting the bar higher and making sure that we’re doing more than the bare minimum—we’re upholding the values that make our digital spaces trustworthy and sustainable for all.
Time to learn a new skill, here is my cheat sheet
| Concept | JavaScript / TypeScript Example | Python Example |
|---|---|---|
| Declare variable (let, const) | let x = 5; const y = 10; |
x = 5 |
| Declare object | let obj = { name: "John" } |
obj = { "name": "John" } |
| Declare array | let arr = [1, 2, 3]; |
arr = [1, 2, 3] |
| Array of objects | let arr = [{name: "A"}, {name: "B"}]; |
arr = [{"name": "A"}, {"name": "B"}] |
| Null | null |
None |
| Undefined | undefined |
None (used in place of undefined) |
| True/False | true, false |
True, False |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Create object | let obj = { key: "value" } |
obj = { "key": "value" } |
| Access object value | obj.key or obj["key"] |
obj["key"] |
| Add/update key | obj.newKey = "newValue" |
obj["newKey"] = "newValue" |
| Delete key | delete obj.key |
del obj["key"] |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Create array/list | let arr = [1, 2, 3]; |
arr = [1, 2, 3] |
| Access element | arr[0] |
arr[0] |
| Add element | arr.push(4) |
arr.append(4) |
| Remove element | arr.pop() |
arr.pop() |
| Array length | arr.length |
len(arr) |
| Loop through array | arr.forEach(item => console.log(item)) |
for item in arr: print(item) |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Spread array | let newArr = [...arr, 4]; |
new_arr = [*arr, 4] |
| Spread object | let newObj = {...obj, newKey: "new"} |
new_obj = {**obj, "newKey": "new"} |
| Spread function args | function(...args) {} |
def function(*args): |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| If statement | if (condition) {} |
if condition: |
| Ternary | let val = condition ? trueVal : falseVal |
val = trueVal if condition else falseVal |
| Nullish coalescing operator | let val = x ?? "default"; |
val = x or "default" |
| Optional chaining | let val = obj?.key; |
val = obj.get("key") or val = obj["key"] if obj else None |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| For loop | for (let i = 0; i < arr.length; i++) {} |
for i in range(len(arr)): |
| For…of loop (array) | for (let item of arr) {} |
for item in arr: |
| For…in loop (object keys) | for (let key in obj) {} |
for key in obj: |
| While loop | while (condition) {} |
while condition: |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Declare function | function myFunc() {} |
def my_func(): |
| Arrow function | const myFunc = () => {} |
N/A (use def my_func():) |
| Return | return value; |
return value |
| Default parameter | function myFunc(a = 10) {} |
def my_func(a=10): |
| Rest parameters | function(...args) {} |
def function(*args): |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Declare class | class MyClass {} |
class MyClass: |
| Constructor | constructor() |
def __init__(self): |
| Instance method | this.myMethod() |
self.my_method() |
| Create object | let obj = new MyClass(); |
obj = MyClass() |
| Concept | JavaScript / TypeScript | Python |
|---|---|---|
| Try/Catch | try { ... } catch (e) { ... } |
try: ... except Exception as e: |
None represents both null and undefined in JavaScript. There’s no separate undefined in Python.True and False in Python (capitalized), not true and false as in JavaScript.self as the first argument in Python, which refers to the instance of the class.
In the fast-paced world of software development, maintaining focus is crucial, especially for our dynamic team, which consists of a core of four developers but can expand to about a dozen. We’ve found that implementing thematic sprints—where each sprint is named after a specific theme or goal—significantly enhances our productivity and engagement
When our team is small, usually capped at six members, we experience a focused output with active involvement from developers in the planning phase. However, we’ve noticed that stories can grow in complexity, leading to a loss of focus and extended timelines. To address this, we started naming our sprints with clear themes, creating a shared understanding of our objectives.
This simple practice reinforces our commitment during daily stand-up meetings, where we consistently reference the sprint theme. By framing our work around these themes, developers stay aligned with our goals and feel a greater sense of ownership.
Moreover, thematic sprints foster collaboration. As we engage with a specific focus, discussions naturally emerge, leading to innovative solutions and richer features. For instance, dedicating a sprint to user experience made our team more attentive to feedback, resulting in improved designs.
In conclusion, thematic sprints have transformed our development process, enhancing focus and creativity while nurturing a culture of collaboration and innovation. This approach has proven invaluable in our journey as a dynamic software development team.
Build what users want
Use small teams
Get feedback quickly and take small steps
Do not sacrifice quality for features
Automate your testing both big and small tests
Team autonomy to self organise
Image from ChatGPT
Dependency notation in the package.json file influences how npm handles version installations, and this affects whether npm install may update the package-lock.json file.
Here’s how it works based on different notations:
2. Caret (^) Notation (“^4.19.2”):
3. Tilde (~) Notation (“~4.19.2”):
4. Major Version (“4.19”):
If you use npm install (as opposed to npm ci), and the notation in your package.json allows for updates (like ^4.19.2), npm may install a newer version within the range, and as a result, the package-lock.json file will be updated with this new version.
On the other hand, if the package-lock.json specifies a version (say 4.19.2), and your package.json allows updates (^4.19.2), running npm install could still install a newer version (like 4.19.3), which would then update the lock file.
This flexibility is a double-edged sword: it allows for automatic updates of patches and minor versions, but if not managed well, it can lead to differences in installed versions across environments, which is why many teams prefer using npm ci in CI/CD pipelines for consistency.
Image created by ChatGPT
I needed to take a step back and fully understand this issue so I could explain it clearly to both new and experienced developers. The problem surfaced because our deployment pipelines run npm audit, which became a bottleneck in our process. We kept seeing the same vulnerabilities flagged repeatedly, even though they had been fixed multiple times.
Here we go, npm instal, ci and audit
Here’s an overview of the flow from installing a new package with npm to running npm install or npm ci in a pipeline, along with details on how vulnerabilities may resurface through npm audit.
2. Pushing to Version Control:
3. Pipeline – npm install vs npm ci:
4. npm audit:
2. New Vulnerabilities Discovered:
3. Out-of-Date Dependencies:
4. Partial Fixes:
5. Conflicts Between Versions:
I needed to add an additional response header to my requests to aid in tracking errors.
Here is my solution. A middleware that will add the AppInsights Operation ID to the response. The Operation ID is unique to each request so searching for it is simple.
import { Request, Response, NextFunction } from 'express';
import appInsights from '../../lib/appInsights';
export default (req: Request, res: Response, next: NextFunction) => {
const { operation } = appInsights.getCorrelationContext();
res.setHeader('X-Operation-ID', operation.id);
next();
};I’ve been working on compiling a set of questions we should ask at the outset of each new feature. In my experience, teams often become laser-focused on coding and implementing new features without considering the broader context. I believe it’s crucial to be proactive and demonstrate the value of our work to the company, as ultimately, the bottom line is what matters most.
For every new feature, let’s ensure we ask these questions. The responses we gather can then inform the creation of tickets and specifications, ensuring that we’re aligned with both technical requirements and organizational objectives.
| Aspect | Questions |
|---|---|
| Top Level User Story | – What is the main objective or goal of this feature/change? |
| Security Concerns | – Are there any potential security vulnerabilities or risks associated with this work? |
| Organizational Policies and Processes | – Are there specific policies or processes that need to be adhered to during development? |
| Value Addition | – How does this work enhance the application/product? |
| – What additional benefits or improvements does it bring? | |
| Justification | – Why is this work necessary or important? |
| – What problem or need does it address? | |
| Proving Worth | – How can we demonstrate the impact or value of this work? |
| – What criteria or metrics can be used to measure its success? | |
| Monitoring | – What metrics or indicators can be used to track the performance or usage of this feature/change? |
| – How will we monitor its effectiveness over time? | |
| Technical Requirements | – Are there any specific technical constraints or dependencies that need to be considered? |
| – What technologies or frameworks should be utilized for this work? | |
| User Experience (UX) | – How will this work impact the user experience? |
| – Are there any usability considerations to be aware of? | |
| Testing and Quality Assurance | – What testing strategies will be employed to ensure the quality of the implementation? |
| – Are there any specific test cases or scenarios that need to be addressed? | |
| Scalability and Performance | – How will this work scale as the application grows? |
| – Are there any performance considerations or benchmarks to meet? | |
| Documentation | – What documentation needs to be created or updated as part of this work? |
| – How will knowledge transfer be facilitated for other team members? | |
| Deployment and Rollout | – What is the deployment plan for this work? |
| – Are there any rollout or release strategies to consider? | |
| Feedback and Iteration | – How will feedback be collected and incorporated into future iterations? |
| – What mechanisms are in place for continuous improvement? | |
| Collaboration and Communication | – How will communication be maintained between team members and stakeholders throughout the process? |
| – Are there any collaboration tools or platforms to be used? | |
| Risk Management | – What potential risks or challenges could arise during implementation, and how will they be mitigated? |
| – Is there a contingency plan in place for unexpected issues? |
Problem: I have a data dump of a MongoDb query in a JSON file. I need to replace the ObjectID(“12345677abc”) with “12345677abc”.
Using Visual Studio Code’s find and replace
Find:
ObjectId\("([0-9a-fA-F]{24})"\)
Replace with: “$1”
Turns this
"_id" : ObjectId("5e3b1890e032d225a091d43f"),
"userId" : ObjectId("65ed1c2c-922c-4c82-b5bc-7324f69eea10"),To this
"_id" : "5e3b1890e032d225a091d43f",
"userId" : "65ed1c2c-922c-4c82-b5bc-7324f69eea10",
Bonus:
ISODate\("([^"]+)"\)