Last day of code! Poked around on codewars
Codewars, learning list comprehension!
Played with some python and file reading lines
Reviewing some python code :)
Javascript 30 Day 13 How to copy JS arrays and objects
Skip
Tried running a prior university project on my Mac, but everything is so out-of-date and broken.
Skip
Update styles for mobile and add robots.txt. Good default:
User-agent: *
Allow: /
Skip
Skip
Check Lighthouse scores
Actionable:
Updated score: (at least all green)
Modified table styles to be responsive on mobile.
Update Copy button to copy the fake shortened link to clipboard
Build dynamic rows in table for shortened links and create more dynamic (fake) link shortener.
Styling for mobile menu, transitions and SVG image, and fix ARIA
JavaScript for mobile menu toggle
Styling tweaks for FED project #3.
Still to do:
Working on FED project #3. Styled hero background to be better for mobile and desktop; updated URL shortener to include (faked-in) result if the link given in valid. Spacing between table rows (given a different background color) is kind of difficult actually. Ended up using a border top for tr + tr.
Added form validation for the URL box using PristineJS validation library. Added alert colors to base theme & FED project #3, generated with https://colors.eva.design/.
Skip
Try out Storybook with Jigsaw (no-go); Try out responsively for Chrome
Setup JavaScript to use in the project #3
Skip
FED Project #3, card designs
FED Project #3, font styles
Styling the form and more of project 3. Instead of using offset margins and padding for the off-centered look of the form, I used a 50%/50% linear background.
.cta-form {
background:linear-gradient(to bottom, $color-white, $color-white 50%, $color-gray-light 50%);
}
Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that
$font-sizeand$font_sizeboth refer to the same variable.
Restructuring projects 1-3 using !default; reduces repeating code and overrides.
Original:
| File | Size |
|---|---|
/js/main.js |
10.9 KiB |
css/main.css |
6.74 KiB |
css/proj01.css |
7.38 KiB |
css/proj02.css |
8.35 KiB |
css/proj03.css |
9.36 KiB |
Updated compiled sizes after restructure:
| File | Size |
|---|---|
/js/main.js |
10.9 KiB |
css/main.css |
6.34 KiB |
css/proj01.css |
6.79 KiB |
css/proj02.css |
7.72 KiB |
css/proj03.css |
8.52 KiB |
Skip
Read up on the scss !default usage. Will try to reorder my base theme after my child themes to see if this helps reduce redundancy.
Building out HTML and some more base styles (padding, menu, forms) https://virtual.github.io/fed-projects/03/
Start FED Project #3; going a little more complex now that I have a standard base theme figured out with overrides. More things to add the base core will become apparent like list styles, menu things. :)
Finished FED Project #2; added flexbox mixins to the base SCSS core (pretty easy!); refactored base to a ābaseā folder to cleanup the structure a little.
Setup and worked on FED Project #2
Learning Go (Googleās machine learning language) on SoloLearn app
Skip
Set up FED projects to allow for theme / scss variable overrides in order to maintain one general base code and themes that can override it.
proj01.scss:
@import './variables';
@import './01/variables';
// General includes
@import './structure';
@import './colors';
@import './typography';
@import './lists';
@import './components/buttons';
// Local overrides
@import './01/structure';
@import './01/colors';
@import './01/components/cards';
@import './01/components/buttons';
Skip
Worked on building out more columns, margin, and theme classes (similar to Bootstrap) using scss for loops.
$marginbuffers: 5;
@for $i from 0 through $marginbuffers {
.my-#{$i} {
margin-top: $i * ($theme-font-size-base * .5);
margin-bottom: $i * ($theme-font-size-base * .5);
}
.mt-#{$i} {
margin-top: $i * ($theme-font-size-base * .5);
}
.mb-#{$i} {
margin-bottom: $i * ($theme-font-size-base * .5);
}
}
Worked on FED Project #1
Read Code Complete pp 86-94; inheritance, abstraction
Skip
Skip
Skip
Got stylelint working with some third-party packages
package.json:
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"stylelint": "^13.13.1",
"stylelint-declaration-block-no-ignored-properties": "^2.4.0",
"stylelint-config-rational-order": "Allohamora/stylelint-config-rational-order#master",
"stylelint-order": "^2.2.1",
"stylelint-scss": "^3.20.1"
}
}
.stylelintrc.json:
{
"plugins": [
"stylelint-order",
"stylelint-config-rational-order/plugin",
"stylelint-declaration-block-no-ignored-properties"
],
"rules": {
"order/properties-order": [[], { "severity": "warning" }],
"order/order": [
"custom-properties",
"declarations"
],
"plugin/rational-order": [true, {
"border-in-box-model": false,
"empty-line-between-groups": false,
"severity": "warning"
}],
"declaration-no-important": true,
"plugin/declaration-block-no-ignored-properties": true
}
}
Working on setting up my styelint for a computer but it turns out thereās some issues with this package not being updated for sometime: stylelint-config-rational-order; need to find a new way to accomplish it, due to security vulnerabilities on these packages.
Quick update to add border-radius; if you have an outer parent with a border radius, you can use overflow: hidden to give all the child elements the same border-radius. Never quite thought that through :)
Updated scss to use some functions
Setup some styles and HTML for a small project.
Set up a second page in jigsaw
Not exactly coding; spent the evening trying to figure out mic recording and processing tracks on reaper
Setup a local environment for working on front-end projects
Skipped
JavaScript30, project 12, key sequence detection (like the Konami code used on buzzfeed) pretty magical!
Code Complete, pp 74-86
Finished JavaScript 30 project 11 with custom video controls.
Worked more on JavaScript 30 project #11. Reminder about how cool .dataset.myitem is to pull any items that have an attribute like data-myitem
Skip
Started project 11, video player. Seems like thereās a feature/bug that the video will automatically start/stop on click without an event listener for video.click (so basically if you listen for it, youāre doubling the work and negating the effect). Also interesting: videos have no āplayingā status, only āpaused.ā
Not muchāfigured out the Flask app uses django for HTML templating.
Adding Flask-Scss to the flask app and restructured some of the scss files; added vars
Working to setup https://github.com/virtual/flask-tutorial to maybe work on a team repo project with arek_grows!
Trying to scrape practice questions for license information to make Anki cards but the API seems to be limited to 10 results, no matter what limit you put.
Test by changing your locale in your OS! Can also try the Language Switcher App. Virtual environments can be good.
Localization solutions:
If youāre formatting with bold, italics, or underlines, this may not work in other languages:
Formatting:
Media:
Unicode:
Diacritical marks - accents, tone marks used for pronunciation
Fonts
BiDi - Bi-directional text; where using a mix of LTR & RTL text in the same field or interface
| Characters | Direction | Effect |
|---|---|---|
| Most alphabets | LTR | Strong |
| Hebrew & Arabic | RTL | Strong |
| European numbers | none | Weak |
| Abbr. | Code Point | Name | Description |
|---|---|---|---|
| LRE | U+202A | LEFT-TO-RIGHT EMBEDDING | Treat the following text as embedded left-to-right. |
| RLE | U+202B | RIGHT-TO-LEFT EMBEDDING | Treat the following text as embedded right-to-left. |
| LRO | U+202D | LEFT-TO-RIGHT OVERRIDE | Force following characters to be treated as strong left-to-right characters. |
| RLO | U+202E | RIGHT-TO-LEFT OVERRIDE | Force following characters to be treated as strong right-to-left characters. |
| U+202C | POP DIRECTIONAL FORMATTING | End the scope of the last LRE, RLE, RLO, or LRO. |
Use example, as stored in database:
×Ŗ×××Ŗ×: [U+202a] 123 Easy St. [U+202c]
Desired output:
123 Easy St. :××Ŗ×××Ŗ
202C allows us to āpopā back to global settings after overriding
You can also use native HTML solution (as stored in DB):
×Ŗ×××Ŗ×: <span dir="ltr">123 Easy St.</span>
Strings:
you sent a message at $time allows you rewrite the sentence correctlyNumbers:
ā
Steps for localization:
Considerations:
Localization != language
Associated Preferences:
Identifying locales: typically defined using two values: (eg en_US vs en_CA)
Fixing some of my better codepens!
Attempted to add editing and adding ability for Recipe app ingredients, but ended up scrapping it.
Looking into implementing internationalization (i18n) for my Recipe app, but running into some issues with wrapping the export class in the library. (Example) May try it on a simpler app, or non-React project another time.
Fixed 3-year old issue with my Recipe App search! It turns out the key for the card component wasnāt correct which was causing the wrong results to cache/render. Also spent a good chunk of time playing with outdated node_modules.
Starting freeCodeCamp Information Security, Python for Penetration Testing
Socket: an internal endpoint for sending and receiving data (analogy: outlet)
Types:
Styling broken images with CSS
Finished the Probability Calculator and claimed my Scientific Computing with Python certification! Pretty excited :)
Sick day but did learn a bit more about Pythonās random library. Itās more predestined randomizationāit always gives the same ārandomā result given the same inputs. (Good for testingā¦) It can instead be re-written using SystemRandom()
sr = random.SystemRandom()
# for truly random use sr
# randomSelection = random.choice(contents)
randomSelection = sr.choice(contents)
Battling it out with Python and bash; turns out I just needed a restart. š
Did end up changing my launch.json for python (internalConsole from integratedTerminal), so now it has different colors. (Not sure if itās betterā¦)
{
"version": "0.2.0",
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "main.py",
"console": "internalConsole"
}
]
}
Passing test #2, butā¦ why is always returning ['blue', 'red'] for a ārandomā choice?
Started the fifth python projectāProbability Calculator, passing 1/3 tests.
Finished Polygon Area Calculator! Seemed a lot easier than the last challenge. :D
Started Polygon Area Calculator
Finished Python Budget App! š Calculated percentages overall for withdrawals and added accurate representations for the bar chart. A nifty function:
max(names, key=len) - get the longest length item in a list (then take its length)Setup the vertical labels for the categories for the Python Budget App.
š
Working through the final python project #3, started setting up the bar chart; also worked on a definition to center the category title when printing the given category object.
Simple day of python on sololearn app
Tests #8-10 of Budget app passing; need to still center the title of the instance dynamically.
Overriding what is returned when calling the instance obj by overriding __str__ in the Class; roughly:
def __str__(self):
output = ''
for iter in range(len(self.ledger)):
output = output + str(self.ledger[iter]['amount'])
return f'{output}'
Using Sphinx documentation for Python is helpful for later auto-generating docs.
Example:
def transfer(self, amount, targetCategory):
'''
Send a message to a recipient
:param float amount: The amount of money to transfer
:param str targetCategory: The target category to transfer to
:return: `True` if the transfer took place, and `False` otherwise
:rtype: boolean
:raises ValueError: if the targetCategory exceeds 160 characters
:raises TypeError: if the targetCategory is not a basestring
'''
Had a bit of fun at looking at more profile customizations & updated my GitHub profile a bit with Spotify stats from JeffreyCA, also their project spleeter web looks really neat. Will need to check out :)
Python Project #3: Budget App
Revising Python and objects from py4e
Dogbark()lengthLassieUse dir(var) to list all the items/methods inside a variable
Use dictionaries for a structure like {'jack': 4098, 'sape': 4139}
Back to python, setup the Budget App locally; tried adding a few lines of code to the class but itās obvious I completely forgot everything about python classes.
Added a bit more random sizing, hover effects and interactive note sounds using Tone JS. Done with this project for a bit, not quite going the way I want between the advanced svgs and delays Iād like. And the interactivity, Iām not even sure what I want.
Added animation delay and better handling for performance; only showing svg changes on submit.
A few gotchas:
forwards otherwise it will revert to original styleshouldComponentUpdate to check if the component should re-render. By default it seems every component is re-rendering everytime anything changes!Sentiment Analyzer -
count your lucky stars okay star star star rawr star star circle mew star
i hate cirlces and stars
Oh, no, not really. But now my sentiment app adds svgs based on how many certain words appear (cirlce, star) with a very badly performing regex! You can also click them and see a nice console log.
Lifted the state for the sentiment analysis value for my sentiment analyzer and added some coloring based on positive / negative, and attempted to do some saturation value (HSL) based on just how intense the result is.
Learned about using isInfinite() instead of checking if a var equals Infinity (doesnāt work)
Configured my sentiment analyzer to run on replit!
Overview of changes:
npm run build in public folderbuild folder from public/.gitignore.env to the replit app NODE_ENV set to productionUpdated app.js:
require('dotenv').config();
if (process.env.NODE_ENV === 'production') {
app.use(express.static("./public/build"));
} else {
app.use(express.static("public"));
}
Added logging and debugging with log4js
A few ideas:
Also updated my Heroku apps since they have an necessary upgrade (The Heroku-16 stack is end-of-life).
Added a textarea to input words/lyrics and then using Axios, make a post request to node which then queries my original function to output the sentiment value. :)
Looks like if I want this to run on replit, I need to set up some environment variables
Considering a sentiment analyzer to potentially create an interactive app that can later use a sound library
A few notes:
Resources:
Learned thereās no case statements for python, but may be coming soon :)
Not very pretty but now passing tests 2-5 for the Time Calculator Ā· (Replit)
Working with the Python debugger to check my values
str(min).zfill(2) - for left padding numbers with 0s (07 vs 7)elif not elseifTo reset your Github account on VSCode after enabling 2FA use:
git config --global --unset credential.helper
Run debugger with F5 in VSCode; set up launch.json if needed, e.g.
{
"version": "0.2.0",
"configurations": [
{
"name": "Python: Main File",
"type": "python",
"request": "launch",
"program": "main.py",
"console": "integratedTerminal"
}
]
}
Implemented code to pass the first test for the Time Calculator
Tidy code to split a string and assign it as ints to two variables:
dHours, dMins = map(int,duration.split(':'))
Ideas for Round 4 starting June 1, 2021