Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing different text alignment for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented different text alignment for Different Line in Badgeyay Backend in my Pull Request.
To implement different text alignment for Different Line feature, first, the component in SVG that is determining the text alignment of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font type for the badge is text-align and its default value is set to start(right alignment). If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the text-align value from the frontend.
Using the same for the text-align in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to text-align property provided by the User in the Frontend.
defchange_text_align(self,
filename,
badge_size,
paper_size,
align_1, // Values fromFrontend
align_2,
align_3,
align_4,
align_5):
""" Module to change Text Alignment of each badge line :param `filename` - svg file to modify. :param `align_1` - Text Alignment to be applied on first line :param `align_2` - Text Alignment to be applied on Second line :param `align_3` - Text Alignment to be applied on Third line :param `align_4` - Text Alignment to be applied on Fourth line :param `align_5` - Text Alignment to be applied on Fifth line """// Storing the Values passed altogether in a list.
align = [1, align_1, align_2, align_3, align_4, align_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row)
path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='text-align':
style_detail[ind] ="text-align:"+ align[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("text-align", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the text-align argument of the selected object by changing the value of text-align.
text_style_detail[-1] ="text-align:"+ align[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Text Alignment Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different text-align embedded.
Now, we are done with implementation of different text alignment for Different Line in Badgeyay Backend.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing font types for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font types for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font type for Different Line feature, first, the component in SVG that is determining the font of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font type for the badge is font-family and its default value is set to sans-serif. If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the font-type value from the frontend.
Using the same for the font-type in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font type provided by the User in the Frontend.
defchange_font_family(self,
filename,
badge_size,
paper_size,
Font_1, // Values fromFrontend
Font_2,
font_3,
font_4,
font_5):
""" Module to change Font Family of each badge lines :param `filename` - svg file to modify. :param `font_1` - Family to be applied on first line :param `font_2` - Family to be applied on Second line :param `font_3` - Family to be applied on Third line :param `font_4` - Family to be applied on Fourth line :param `font_5` - Family to be applied on Fifth line """// Storing the Values passed altogether in a list.
font = [1, font_1, font_2, font_3, font_4, font_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row)
path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='font-family':
style_detail[ind] ="font-family:"+ font[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("font-family", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the font family argument of the selected object by changing the value of font-family.
text_style_detail[-1] ="font-family:"+ font[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Font Family Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font type embedded.
Now, we are done with implementation of Different Font type for Different Line in
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing font sizes for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font Size for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font Size for Different Line feature, first, the component in SVG that is determining the font size of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font size for the badge is font-size and its default value is set to 31.25 px. If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
To Determine the font-size value from the frontend.
Using the same for the font-size in SVG..
Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font Size provided by the User in the Frontend.
defchange_font_size(self,
filename,
badge_size,
paper_size,
Font_size_1, // Values fromFrontend
font_size_2,
font_size_3,
font_size_4,
font_size_5):
""" Module to change size of each badge lines :param `filename` - svg file to modify. :param `font_size_1` - Size to be applied on first line :param `font_size_2` - Size to be applied on Second line :param `font_size_3` - Size to be applied on Third line :param `font_size_4` - Size to be applied on Fourth line :param `font_size_5` - Size to be applied on Fifth line """// Storing the Values passed altogether in a list.
font_size = [1, font_size_1, font_size_2, font_size_3, font_size_4, font_size_5]
// Selecting the dimension config based on the parameters passed in the function.
dimensions = badge_config[paper_size][badge_size]
if config.ENV =='LOCAL':
filename ='static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'else:
filename = os.getcwd() +'/api/static/badges/'+ dimensions.badgeSize +'on'+ dimensions.paperSize +'.svg'
tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r'))
element = tree.getroot()
for idx inrange(1, dimensions.badges +1):
for row inrange(1, 6):
//Selecting the text element with the ID
_id ='Person_color_{}_{}'.format(idx, row) path = element.xpath(("//*[@id='{}']").format(_id))[0]
style_detail = path.get("style")
style_detail = style_detail.split(";")
for ind, i inenumerate(style_detail):
if i.split(':')[0] =='font-size':
style_detail[ind] ="font-size:"+ font_size[row]
style_detail =';'.join(style_detail)
text_nodes = path.getchildren()
path.set("font-size", style_detail)
for t in text_nodes:
text_style_detail = t.get("style")
text_style_detail = text_style_detail.split(";")
// Fill the font size argument of the selected object by changing the value of font-size.
text_style_detail[-1] ="font-size:"+ font_size[row]
text_style_detail =";".join(text_style_detail)
t.set("style", text_style_detail)
etree.ElementTree(element).write(filename, pretty_print=True)
print("Font Size Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font size embedded
Now, we are done with implementation of Different Font Size for Different Line in
The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Password functionality in my Pull Request so that the User can change his Password at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User Password component with help of ember cli.
Step 2:
Make changes in Handlebar of User Password. We will be using semantic UI form for making the changes in Handlebars.
<h2class="ui header">Password</h2><h5class="ui dividing header">Change your password.</h5><formclass="ui form"{{action'updateUserPassword'on="submit"}}>
</div></div><buttontype="submit"class="ui basic orange button"tabindex="0">
Save Changes
</button></form>
We have used action on submitting the Form for changing and updating the Password in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
import Component from '@ember/component';
exportdefault Component.extend({
init() {
this._super(...arguments);
},
actions: {
updateUserPassword() {
let password =this.get('newPassword');
this.get('sendUserPassword')(password);
}
},
didRender() {
this.$('.ui.form')
.form({
inline :true,
delay :false,
fields : {
newPassword: {
identifier :'newPassword',
rules : [
{
type :'empty',
prompt :'Please enter a password'
},
{
type :'minLength[6]',
prompt :'Your password must have at least {ruleValue} characters'
}
]
},
newPasswordVerify: {
identifier :'newPasswordVerify',
rules : [
{
type :'match[newPassword]',
prompt :'Passwords do not match'
}
]
}
}
});
}
});
Step 4:
We will now configure the controller to customize the action that we have defined above.
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if Password changes in params, It should change the password and send the response with the updated user schema.
The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and the most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Username functionality in my Pull Request so that the User can change his username at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User account component with help of ember cli.
$ ember g component user-component/user-account
Step 2:
Make changes in Handlebar of User Account. We will be using semantic UI form for making the changes in Handlebars.
We have used action on submitting the Form for changing and updating the username in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if username is change in params, It should change the username and send the response with the updated username.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Badgeyay also keeps record of all the badges generated by user and also gives option to directly download the previously generated badges.
All the badges appear on single page which creates problem when a user has generated lot of badges and all the badges listed on single page.
To resolve this issue and make Badgeyay more user friendly I have implemented pagination in listing badges so that if there are more number of badges, user can see the badges listed in multiple pages in my Pull Request.
To implement this, I have used actions and made the changes accordingly.
Let’s get started and understand it step by step.
Step 1:
We will use semantic icons in handlebars for changing pages.
Step 2:
I will add action for changing page to next and previous page.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges.You have to just click on create badges and the generated badge with download link appear at bottom of form. But a problem arises with the generated badges link that after logout/login or generation of new badges just after creating badges one time, the link of the previously created badges is still there which is a bit confusing, as user might think the previous link to be the new link and press on that in order to download and find the old badges downloaded.
To resolve this issue, I have used the power of Ember notify library and customized it to show the generated badges link and disappear after a specified time in my Pull Request and after that user can always see his previously generated badges in My Badges route.
Let’s get started and understand it.
Customizing Notify library and making the changes in the send Badge data function to show the generated badge link just after the completion of badge generation process.
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
exportdefault Controller.extend({
....
routing : service('-routing'),
notify : service('notify'), // importing Notify service
.....
sendBadge(badgeData) {
const _this =this;
let badgeRecord = _this.get('store').createRecord('badge', badgeData);
badgeRecord.save()
.then(record => {
_this.set('badgeGenerated', true);
_this.set('genBadge', record);
var notify = _this.get('notify');
var link = record.download_link; // Assigning download link to a variable var message = notify.success( // Configuring the message of notify service
{ html:// Adding the html in notify message'
Badge generated successfully.
'+'<p>Visit this<b>'+'<a href='+ link
+'> Link </a></b> to download badge.</p>',
closeAfter:10000 }); // Specifying the time of closing the message
})
.catch(err => {
_this.get('notify').error('Unable to generate badge');
});
},
I have implemented the customized notify function to show the badge generation link for a specific time.
Now run the server to see the implemented changes by following command.
$ ember serve
Ember Notify service showing the generated Badges link:
Now, I am done with the implementation of customised notify function to show the badge generation link for a specific time of 10 seconds.
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges. If a helper is not there for the directions to use these features then these features may be difficult to use for a user.
To resolve this issue and make Badgeyay more user friendly I have implemented a User Guide to help user to go through the User Manual before generating Badges in my Pull Request.
To implement user guide, I have used Semantic UI tables to give examples for CSV format and used other components for Manual format.
Let’s get started and understand it step by step.
Step 1:
Create User Guide component with Ember CLI.
$ ember g component user-component/user-guide
Step 2:
Now, We will use Semantic UI while editing Handlebars.
class="user-guide">
class="ui center aligned huge header">User-Input Guide
class="ui center aligned small header">
Please check what is the "Correct Format"?
class="ui segments">
class="ui segment">
class="ui raised segment">
class="ui header">class="file excel icon">
class="content">
CSV Format
</div></div>
class="ui bulleted list">
class="item">The CSV must be uploaded with 5 columns of data.
class="item">Five comma (',') seperated values should be present in the CSV
What are the issues we had with automatic deployment of Susper?
SUSPER project which is built on Angular is kept on master branch of the repository .
Whenever any PR is merged,Travis CI does all the builds, and checks for any error. After successful checking it triggers deployment script in SUSPER (deploy.sh) .
Here is the deployment script:
#!/bin/bash# SOURCE_BRANCH & TARGET_BRANCH stores the name of different susper.com github branches.
SOURCE_BRANCH="master"
TARGET_BRANCH="gh-pages"# Pull requests and commits to other branches shouldn't try to deploy.if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then
echo "Skipping deploy; The request or commit is not on master"
exit 0
fi# Store some useful information into variables
REPO=`git config remote.origin.url`
SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:}
SHA=`git rev-parse --verify HEAD`# Decryption of the `deploy.enc`
openssl aes-256-cbc -k "$super_secret_password" -in deploy.enc -out deploy_key -d
# give `deploy_key`. the permission to read and write
chmod 600 deploy_key
eval `ssh-agent -s`
ssh-add deploy_key
# Cloning the repository to repo/ directory,# Creating gh-pages branch if it doesn't exists else moving to that branch
git clone $REPO repo
cd repo
git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH
cd ..
# Setting up the username and email.
git config user.name "Travis CI"
git config user.email "$COMMIT_AUTHOR_EMAIL"# Cleaning up the old repo's gh-pages branch except CNAME file and 404.html
find repo/* ! -name "CNAME" ! -name "404.html" -maxdepth 1 -exec rm -rf {} \; 2> /dev/null
cd repo
# commit the changes, move to SOURCE_BRANCH
git add --all
git commit -m "Travis CI Clean Deploy : ${SHA}"
git checkout $SOURCE_BRANCH
# Actual building and setup of current push or PR. Move to `TARGET_BRANCH` and move the `dist` folder
npm install
ng build --prod --aot
mv susper.xml dist/
mv 404.html dist/
git checkout $TARGET_BRANCH
mv dist/* .
# Staging the new build for commit; and then committing the latest build
git add .
git commit --amend --no-edit --allow-empty
# Actual push to gh-pages branch via Travis
git push --force $SSH_REPO $TARGET_BRANCH
This script starts after successfully checking the project (comments shows working of each command). The repository is cleaned,except some files like CNAME and 404.html and a commit is made. Then SUSPER’s build artifacts are generated in dist folder and all the files from dist folder are moved to gh-pages and the changes are amended. GitHub Pages engine then uses the build artifacts to generate static site at susper.com. But we faced a weird problem when we were unable to see changes from latest commits on susper.com. Slowly number of commits increased but still changes were not reflecting on susper.com .
What was the error in deployment of SUSPER?
All the changes were getting committed to the gh-pages branch properly. But the GitHub Pages engine was unable to process the branch to build static site. Due to this the site was not getting updated. The failing builds from gh-engine are notified to the owner via email.
There was a weird error ( Failure: The tag `chartjs` in line 4 on `node_modules/chart.js/docs/charts/bar.md` is not recognized liquid tag) while building the site from build artifacts. There was an issue with `gh-pages` engine as `node_modules/chart.js/docs/charts/bar.md` was previously also present but then there was no such errors than.
Due to this error all commits which were made to SUSPER repository was not shown on susper.com as the site was not getting updated.
on StackOverflow. There was no accepted answer for this question and every answer was different from other. So, we just reproduced the bug in our own repository by just making a similar repository to SUSPER with same branches. Once we successfully reproduced the bug. We tried to correlate all the answers to arrive at a solution to fix this bug. Luckily we found that any commit with no significant change from previous commit removed the error and allowed the gh-pages engine to successfully create the site. So we made a dummy commit in which we created a hidden file with no content and pushed it to gh-pages. This did the trick for us and gh-pages was now able build the site for us.
The whole problem was due to a bug in GitHub pages engine which got fixed by a dummy commit.
Dependency managers are software modules that coordinate the integration of external libraries or packages into larger application stack. Dependency managers use configuration files like composer.json, package.json, build.gradle or pom.xml to determine: What dependency to get, What version of the dependency in particular and, Which repository to get them from. Currently SUSPER has only NPM as a dependency manager which is used to install all dependencies. In this blog, I will describe how we have added facebook’s Yarn as a new dependency manager in Susper
Lets checkout Yarn in detail:
Yarn is a fast and good alternative to NPM. One of the great advantages of Yarn is that while remaining compatible with the npm registry, it replaces the workflow for npm client or other package managers Yarn was created by Facebook, to solve some particular problems that were faced while using NPM. Yarn was developed to deal with inconsistency in dependency installation while scaling and to increase speed.
What is advantages of using Yarn?
Improving Network performance:Queuing up the requests and avoiding requests waterfalls helps to maximize network utilization.
Checks Package Integrity:Package integrity is checked after each install to avoid corrupt packages installation.
Checks Package Integrity:Package integrity is checked after each install to avoid corrupt packages installation.
Caching: Yarn helps to install the dependencies without an internet connection if the dependency has been previously installed on the system. This is done by caching.
Lock File: Lock files are used to make sure that the node_modules directory has the exact same structure on all development environments.
Note: Ubuntu 17.04 comes with cmdtest installed by default. If anyone gets any errors from installing yarn, then remove it by sudo apt remove cmdtest first. Refer to this for more information.
If using nvm you can avoid the node installation by doing:
sudo apt-get install --no-install-recommends yarn
Test that Yarn is installed by running:
yarn --version
Now delete the node_modules folder so that all dependencies installed by npm is removed.
Now use yarn command in project’s repository.
yarn
Wait while dependencies are installed and then we will be done.
What is happening ?
Yarn has created a lock file yarn.lock. After each operation the file is updated (installing, updating or removing packages) to keep the track of exact package version. If kept in our Git repository we can see that the exact same result in node_modules is made available to all systems.
You must be logged in to post a comment.